微信小程序的开发流程（前端部分）

以下将讲述微信小程序的开发流程 （前端部分）

参考网址：https://mp.weixin.qq.com/

 

1. 准备

• 申请账号，获取 appId 与 appSecret；（团队开发时，自己未注册时也可以获取，可让账号管理员把自己拉入成员管理）
• 下载开发者工具；
• 通过开发者工具（可以选择模板）创建一个小程序项目；
• 编译预览自己的小程序项目，熟悉开发者工具的界面功能（如下图）；
• 研习微信小程序开发文档；

 

 

2. 配置小程序

参考微信小程序的官网指南

配置 app.json、 project.config.json 、project.private.config.json文件。（后面文件多了，可以配置分包）

配置 api、公共js库、.wxs文件、公共.wxss文件、公共组件、全局变量、公共资源链接前缀。（图片等资源链接建议使用远程地址，尽量减少包的大小）

注释：app.json 中最上面的一个页面路径为小程序的 默认入口页面。

 

3. 按照需求开发页面与交互

研习微信小程序开发文档，熟悉 页面、组件、api的常用功能；

可以引入其他UI框架进行辅助开发，比如 vant；

根据设计稿开发页面（小程序整个宽度 750rpx，很多地方可以固定宽度）

 

4. 对接后台api

与vue类似，调用接口，获取返回值进行处理

 

5. 上传与设为体验版

预览后，可上传至小程序后台，然后登录后台查看刚发布的版本，将其设为体验版，之后可扫码在手机上查看并测试。

注释：新手查看体验版未更新成预期效果时，很可能是没有去设为体验版。

 

6. 提交审核与发布正式

体验版测试完成后，通过开发者工具更改api的请求地址前缀（ip+port），切换为正式地址，然后再次上传、提交审核；

审核通过后进行“提交发布”；

 

注：微信小程序开发时，遇到的一些问题集地址：https://www.cnblogs.com/bky419/p/16927339.html