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

深碍√TFBOYSˉ_ 2021-07-26 21:58 903阅读 0赞

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

## 1/申请微信小程序账号 ##

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

1.  通过公司微信服务号进行申请（推荐）。  
    通过公司微信服务号申请微信小程序可免认证，节省费用300元，同时审核周期更短。  
    申请地址：进入公司微信服务号（登录时需要管理员认证）点击小程序管理快速注册 并认证小程序根据提示进行后续操作（需要提供未绑定任何微信服务端的邮箱）  
    微信公众平台登录地址：[微信公众平台入口][Link 1]
2.  通过个人邮箱申请（不推荐）。  
    通过个人邮箱（需提供未绑定任何微信服务的邮箱）申请微信小程序。根据注册提示完成信息录入。通过此种方法注册的微信小程序无法调用微信的高级接口，如微信支付，视频直播等。需要条用此类接口需要进行小程序认证。需提供企业营业执照，对公账号等信息，认证费用300元或企业小额打款验证。  
    独立小程序注册地址：[小程序申请地址][Link 2]

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

### 获取小程序APPID，APPSERECT ###

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

### 配置域名白名单 ###

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

### 基本信息设置 ###

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

### 开发人员，体验人员配置 ###

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

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

## 3/微信小程序开发工具 ##

1.  HBUIDER-X （编辑器）下载地址：[下载][Link 3]
2.  微信开发者工具（预览、代码调试）下载地址：[下载][Link 4]
3.  开发工具配置  
    将微信开发者工具和HBuiderX绑定，将浏览器与HBuiderX绑定。HBuiderX点击工具设置运行配置对应位置输入浏览器安装路径微信开发者工具安装路径。  
    ![配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70]

## 4/微信小程序开发步骤 ##

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

## 5/微信小程序版本发布 ##

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

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

## 6/学习参考文档 ##

### 微信小程序开发文档 ###

【参考】主要学习其 API，开发技巧及语法参看uni-app  
地址：[微信小程序开发文档][Link 5]

### UNI-APP开发文档 ###

【重要】主要学习其基础组件的使用，语法，Api及开发规范  
地址：[UNI\_APP开发文档][uni-app]

### Vue开发文档 ###

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

### 扩展 ###

【微信云开发】地址：[微信云开发文档][Link 6]  
【vuex】地址：[vuex][]

[Link 1]: https://mp.weixin.qq.com/
[Link 2]: https://mp.weixin.qq.com/wxopen/waregister?action=step1
[Link 3]: https://www.dcloud.io/hbuilderx.html
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70]: /images/20210726/daf5e06d970d45b0ae55f2bdc85a9a00.png
[uni-app]: https://uniapp.dcloud.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70 1]: /images/20210726/5eb848cb94df470593226a0946116d0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70 2]: /images/20210726/26df3bfeba6e4d32a9675237c8606727.png
[Link 5]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[Vue.js]: https://cn.vuejs.org/
[Link 6]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
[vuex]: https://vuex.vuejs.org/zh/