基于UNI-APP开发微信小程序的基本流程
1/申请微信小程序账号
申请微信小程序的两种途径:
-
通过公司微信服务号进行申请(推荐)。
通过公司微信服务号申请微信小程序可免认证,节省费用300元,同时审核周期更短。
申请地址:进入公司微信服务号(登录时需要管理员认证)点击小程序管理快速注册 并认证小程序根据提示进行后续操作(需要提供未绑定任何微信服务端的邮箱)
微信公众平台登录地址:微信公众平台入口 -
通过个人邮箱申请(不推荐)。
通过个人邮箱(需提供未绑定任何微信服务的邮箱)申请微信小程序。根据注册提示完成信息录入。通过此种方法注册的微信小程序无法调用微信的高级接口,如微信支付,视频直播等。需要条用此类接口需要进行小程序认证。需提供企业营业执照,对公账号等信息,认证费用300元或企业小额打款验证。
独立小程序注册地址:小程序申请地址
2/微信小程序开发前准备
获取小程序APPID,APPSERECT
小程序注册成功,通过微信公众平台登录地址:微信小程序入口
进入小程序。在</>开发开发者设置里获取到APPID(小程序ID)以及AppSecret AppID和AppSecret非常重要是后续开发的重要凭证。
配置域名白名单
在开发者设置里完成服务器域名配置(域名白名单)不在域名白名单里的URL资源正式上线后将无法访问。开发时若没有,此配置可展缓设置。
注意:域名必须是HTTPS协议,服务器TLS1.2及以上
基本信息设置
在设置里完成小程序的通用配置,入名称,行业,头像等,按要求配置即可。
开发人员,体验人员配置
在管理成员管理下添加开发人员(主要是协同开发,以及让相关用户可以使用体验版本),权限什么的按要求配置即可。
注意:添加开发者和体验人员需要通过微信号搜索,如果微信号正确,但是搜索不到,则可能是对方关闭了微信的通过微信号添加好友功能。解决办法:联系对方在微信手机端操作:点击我设置隐私添加我的方式开启允许通过微信号添加。设置完成后再次通过微信号搜索添加开发人员或体验人员。
3/微信小程序开发工具
- HBUIDER-X (编辑器)下载地址:下载
- 微信开发者工具(预览、代码调试)下载地址:下载
- 开发工具配置
将微信开发者工具和HBuiderX绑定,将浏览器与HBuiderX绑定。HBuiderX点击工具设置运行配置对应位置输入浏览器安装路径微信开发者工具安装路径。
4/微信小程序开发步骤
- 新建uni-app项目:HBuiderX 文件新建项目UNI-App项目
- 参考uni-app官方文档及相关实例进行程序功能开发
Uni-app官方文档:uni-app官网 - 程序在微信开发者工具运行测试:HBuiderX点击运行运行到小程序模拟器微信开发者工具
注意:若是程序运行失败,请调试程序,若是无法打开开发者工具请检查是否将微信开发者工具和HBuiderX绑定。此外需要在初次启动微信开发者工具时在设置代理设置里将代理设置为使用系统代理、安全里开启服务端口。配置完成后关闭微信开发者工具,重启HBuiderX再次运行步骤3.
- 微信小程序调试说明:
【情形一】如果调试期间后台服务器不是https协议,或者服务器域名不在微信小程序后台域名白名单内,可在微信开发者工具里点击详情本地设置勾选不校验合法域名、web-view(业务域名)、TLS版本以及https证书
【情形二】无法启用预览和真机调试:请在详情基本信息中填入小程序的APPid
注意:预览和真机测试人员必须在微信小程序的开发者列表内,详情见上文描述。
5/微信小程序版本发布
小程序业务功能开发完毕后可提交发布,发布前需要做如下准备:
- 配置域名白名单,参见配置域名白名单
- 在HBUIDERX里面完成APPID和APPSERECT绑定(这样在预览或真机调试时无须每次都输入APPID)在HBUIDERX里点击发行小程序(微信)填写小程序名字和小程序APPID,小程序APPID获取参见获取小程序APPId、APPSerect
- 将程序运行在微信开发者工具,调试无误后(确保实在未勾选不校验合法域名、WEB-VIEW(业务域名)、TLS版本及HTTPS证书的前提下程序运行正常,参见小程序调试说明)点击上传。
程序上传完毕后,使用注册微信小程序的邮箱登录到微信小程序管理后台,点击管理版本管理查看刚才上传的版本,可将上传的版本设置为体验版(仅开发人员和体验人员可用,相关人员配置见开发人员,体验人员配置)
微信小程序入口:小程序登录入口 - 发布正式版,选择要发布的版本提交审核,初次提交按照要求填写表单,完成提交。提交后等待微信官方审核。初次提交审核,审核时间较久(3—7个工作日),以后版本更新提交审核则审核相对较快。审核成功后需要进入当前界面手动发布。发布之后社会用户就能在微信上搜索到相关小程序了。
6/学习参考文档
微信小程序开发文档
【参考】主要学习其 API,开发技巧及语法参看uni-app
地址:微信小程序开发文档
UNI-APP开发文档
【重要】主要学习其基础组件的使用,语法,Api及开发规范
地址:UNI_APP开发文档
Vue开发文档
【重要】uni-app基于vue的语法和规范,主要学习vue的指令,组件开发, 组件间通信,动态样式绑定等
地址:Vue.js