基于UNI-APP开发微信小程序的基本流程

基于UNI-APP开发微信小程序的基本流程

1/申请微信小程序账号

申请微信小程序的两种途径:

  1. 通过公司微信服务号进行申请(推荐)。
    通过公司微信服务号申请微信小程序可免认证,节省费用300元,同时审核周期更短。
    申请地址:进入公司微信服务号(登录时需要管理员认证)点击小程序管理快速注册 并认证小程序根据提示进行后续操作(需要提供未绑定任何微信服务端的邮箱)
    微信公众平台登录地址:微信公众平台入口

  2. 通过个人邮箱申请(不推荐)。
    通过个人邮箱(需提供未绑定任何微信服务的邮箱)申请微信小程序。根据注册提示完成信息录入。通过此种方法注册的微信小程序无法调用微信的高级接口,如微信支付,视频直播等。需要条用此类接口需要进行小程序认证。需提供企业营业执照,对公账号等信息,认证费用300元或企业小额打款验证。
    独立小程序注册地址:小程序申请地址

2/微信小程序开发前准备

获取小程序APPID,APPSERECT

小程序注册成功,通过微信公众平台登录地址:微信小程序入口
进入小程序。在</>开发开发者设置里获取到APPID(小程序ID)以及AppSecret AppID和AppSecret非常重要是后续开发的重要凭证。

配置域名白名单

在开发者设置里完成服务器域名配置(域名白名单)不在域名白名单里的URL资源正式上线后将无法访问。开发时若没有,此配置可展缓设置。
注意:域名必须是HTTPS协议,服务器TLS1.2及以上

基本信息设置

在设置里完成小程序的通用配置,入名称,行业,头像等,按要求配置即可。

开发人员,体验人员配置

在管理成员管理下添加开发人员(主要是协同开发,以及让相关用户可以使用体验版本),权限什么的按要求配置即可。

注意:添加开发者和体验人员需要通过微信号搜索,如果微信号正确,但是搜索不到,则可能是对方关闭了微信的通过微信号添加好友功能。解决办法:联系对方在微信手机端操作:点击我设置隐私添加我的方式开启允许通过微信号添加。设置完成后再次通过微信号搜索添加开发人员或体验人员。

3/微信小程序开发工具

  1. HBUIDER-X (编辑器)下载地址:下载
  2. 微信开发者工具(预览、代码调试)下载地址:下载
  3. 开发工具配置
    将微信开发者工具和HBuiderX绑定,将浏览器与HBuiderX绑定。HBuiderX点击工具设置运行配置对应位置输入浏览器安装路径微信开发者工具安装路径。
    配置

4/微信小程序开发步骤

  1. 新建uni-app项目:HBuiderX 文件新建项目UNI-App项目
  2. 参考uni-app官方文档及相关实例进行程序功能开发
    Uni-app官方文档:uni-app官网
  3. 程序在微信开发者工具运行测试:HBuiderX点击运行运行到小程序模拟器微信开发者工具
    注意:若是程序运行失败,请调试程序,若是无法打开开发者工具请检查是否将微信开发者工具和HBuiderX绑定。此外需要在初次启动微信开发者工具时在设置代理设置里将代理设置为使用系统代理、安全里开启服务端口。配置完成后关闭微信开发者工具,重启HBuiderX再次运行步骤3.
    在这里插入图片描述
  4. 微信小程序调试说明:
    【情形一】如果调试期间后台服务器不是https协议,或者服务器域名不在微信小程序后台域名白名单内,可在微信开发者工具里点击详情本地设置勾选不校验合法域名、web-view(业务域名)、TLS版本以及https证书
    在这里插入图片描述
    【情形二】无法启用预览和真机调试:请在详情基本信息中填入小程序的APPid
    注意:预览和真机测试人员必须在微信小程序的开发者列表内,详情见上文描述。

5/微信小程序版本发布

小程序业务功能开发完毕后可提交发布,发布前需要做如下准备:

  1. 配置域名白名单,参见配置域名白名单
  2. 在HBUIDERX里面完成APPID和APPSERECT绑定(这样在预览或真机调试时无须每次都输入APPID)在HBUIDERX里点击发行小程序(微信)填写小程序名字和小程序APPID,小程序APPID获取参见获取小程序APPId、APPSerect
  3. 将程序运行在微信开发者工具,调试无误后(确保实在未勾选不校验合法域名、WEB-VIEW(业务域名)、TLS版本及HTTPS证书的前提下程序运行正常,参见小程序调试说明)点击上传。
    程序上传完毕后,使用注册微信小程序的邮箱登录到微信小程序管理后台,点击管理版本管理查看刚才上传的版本,可将上传的版本设置为体验版(仅开发人员和体验人员可用,相关人员配置见开发人员,体验人员配置)
    微信小程序入口:小程序登录入口
  4. 发布正式版,选择要发布的版本提交审核,初次提交按照要求填写表单,完成提交。提交后等待微信官方审核。初次提交审核,审核时间较久(3—7个工作日),以后版本更新提交审核则审核相对较快。审核成功后需要进入当前界面手动发布。发布之后社会用户就能在微信上搜索到相关小程序了。

6/学习参考文档

微信小程序开发文档

【参考】主要学习其 API,开发技巧及语法参看uni-app
地址:微信小程序开发文档

UNI-APP开发文档

【重要】主要学习其基础组件的使用,语法,Api及开发规范
地址:UNI_APP开发文档

Vue开发文档

【重要】uni-app基于vue的语法和规范,主要学习vue的指令,组件开发, 组件间通信,动态样式绑定等
地址:Vue.js

扩展

【微信云开发】地址:微信云开发文档
【vuex】地址:vuex

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mingyong.g

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值