记一次完整的uni-app微信小程序开发到上线过程

uni-app 是什么？uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有500万开发者用户，几十万应用案例、10亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾

潘多编程

6150人浏览 · 2020-09-12 15:51:44

潘多编程 · 2020-09-12 15:51:44 发布

uni-app 是什么？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有500万开发者用户，几十万应用案例、10亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

快速体验
一套代码编到10个平台，这不是梦想。眼见为实，扫描10个二维码，亲自体验最全面的跨平台效果！

在这里插入图片描述

下载开发工具 HBuilderX

HBuilderX：官方IDE下载地址 https://www.dcloud.io/hbuilderx.html

在这里插入图片描述

注册微信小程序

个人和企业都可以注册，本人这次注册是是个人主体小程序。

地址： https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

在这里插入图片描述

创建项目

选择uni-app 项目
点击插件市场，然后选择一个项目模板

在这里插入图片描述

选择好模板以后，导入插件就可以使用
在这里插入图片描述

发布小程序

登录微信小程序后台，新的改动，可以提交审核，第二天就会有审核结果。
审核通过，就可以上线了。
在这里插入图片描述

使用小程序

有两种方式使用小程序

直接扫描小程序二维码。
把小程序设置到一个微信公众号的菜单
登录微信公众平台后台, 并且添加刚刚的小程序

自定义菜单，选择跳转到小程序

在这里插入图片描述
测试

扫描关注微信公众号
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^