简介
微信⼩程序,简称⼩程序,英⽂名 Mini Program,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤“触⼿可及”的梦想,⽤⼾扫⼀扫或搜⼀下即可打开应⽤
微信小程序的优势:
1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾;
2.推⼴app或公众号的成本太⾼。
3.开发适配成本低。
4.容易⼩规模试错,然后快速迭代。
5.跨平台。
一、开发前的准备工作
1-1 注册小程序
官方注册文档: https://developers.weixin.qq.com/miniprogram/introduction/
微信小程序注册地址:https://mp.weixin.qq.com/
官方给的注册步骤很详细了,跟着教程来就行,需要注意几点
- 记得保存appid,appsecret,如果丢失需要重新生成,可能会影响线上应用
- 服务器域名、业务域名等配置项位置:开发-开发管理-开发设置
- 服务器域名必须是https,小程序发布类别(如社交,音视频等)需要证书,这些东西可以在开发时同步进行
1-2 开发者工具
开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安装完成后,扫码登录,新建/导入小程序项目时输入appid即可
- 上面是微信小程序标准的目录结构,无论使用什么框架(比如uni-app)最后打包成微信小程序时也是生成类似的结构
- json文件配置文档(微信小程序):https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
- json文件配置文档(uni-app):https://uniapp.dcloud.net.cn/collocation/pages.html
- 在开发时,可以打开 设置-本地设置-不校验合法域名 来关闭对服务器域名、业务域名等的校验,包括在体验版时也可以通过打开调试模式来关闭校验
- 如果后面要使用uni-app项目,需要将开发者工具的服务端口选项打开(设置-安全设置)
1-3 微信小程序注意事项
- 微信官方时不时就会修改API(获取用户信息修改了三四次了),或者API收费(获取手机号),要有心理准备
- 微信小程序每个包大小不能超过2M,可以用分包来解决,全部包加起来不能超过16-20M
- 因为大小的限制,静态资源最好是放在自己的服务器上
- 扫描二维码打开小程序,h5跳转小程序,微信消息通知,这些功能很有用、接入也很简单,但是一定要仔细阅读开发文档
- 获取用户位置,音视频通话,红包等功能是需要开通的,一定要先确定能够开通再选择使用
二、开发
2-1 选择开发方式
目前主流混合开发方式
原生开发 | uni-app | nvue | weex | RN | flutter | |
---|---|---|---|---|---|---|
所属公司 | 腾讯 | Dcloud | Dcloud | 阿里 | ||
开发方式 | js | vue.js | vue.js | vue.js | react.js | Dart |
渲染方式 | 魔改webview | webview | weex原生渲染 | weex原生渲染 | webview | 原生渲染 |
支持系统 | 微信小程序 | web、Android、iOS、多方小程序 | Android、iOS | web、Android、iOS | web、Android、iOS、多方小程序 | Android、iOS、Fuchsia |
性能 | 一般 | 一般 | 较快 | 较快 | 一般 | 快 |
总结:
- 如果只考虑小程序和h5端,个人建议是uni-app
- 如果应用只需要考虑 Android 和 iOS,个人认为性能体验方面:flutter > nvue/weex > RN > uni-app ;
- 如果要跨多个端,除了 Android 和 iOS,还包括微信、支付宝小程序等等,毋庸置疑,首选uni-app;
- 如果要考虑桌面端,flutter 本身就支持桌面端,RN 则需要使用react-native-windows这个项目,uni-app 则需要集成 electron
2-2 开发项目
这里我以uni-app为例,至于为什么选择uni-app,我的理由是
1.微信原生开发的状态管理及双向绑定并不好用
2.uni-app的vue语法让开发更敏捷
3.虽然有兼容性问题,uni-app打包多端的能力仍然好使
4.多年的迭代使得uni-app目前有较多的插件
5.跨平台
没有最好的,只有最合适的,实际选用时也要视情况而定
2-2-1 项目搭建
可以从uni-app官网下载模板,也可以从github拉
当然也可以导入已有的项目
2-2-2 开发工具及插件安装
HBuilderX下载地址:https://www.dcloud.io/hbuilderx.html
安装后,打开我们刚刚的代码,点击 运行-运行到小程序模拟器 即可拉起小程序预览项目
比如安装UI库uView
uni-app插件市场地址:https://ext.dcloud.net.cn/
搜索到需要的插件点击导入HBuilderX,然后选择对应项目导入即可
2-2-3 开写
uni-app开发规范:
1.页面文件遵循 Vue 单文件组件 (SFC) 规范,即每个页面是一个.vue文件
2.组件标签靠近小程序规范,详见uni-app 组件规范
3.接口能力(JS API)靠近小程序规范,但需将前缀 wx、my 等替换为 uni,详见uni-app接口规范
4.数据绑定及事件处理同 Vue.js 规范,同时补充了应用生命周期及页面的生命周期
5.如需兼容app-nvue平台,建议使用flex布局进行开发
简单来说的话就是跟写vue差不多,这里我就不多说vue该怎么写了
值得一说的:
1.rpx
不用去管实际运行时的窗口尺寸,750rpx = 100vw,也就是让UI出图时使用750px为基准,编辑样式时一比一换成rpx即可
#app{
width: 750rpx;
}
2.条件编译
// #ifdef H5
console.log("这段代码只会在h5端运行")
// #endif
// #ifndef H5
console.log("这段代码只会在非h5端运行")
// #endif
3.id含义
appid: 小程序id,小程序的唯一识别
openid: 微信用户id,对于当前小程序的微信用户的唯一识别
unionId: 微信用户id,对于当前小程序所属微信商户账号的微信用户的唯一识别
三、测试及发布
3-1 打包上传
如果是原生开发,直接上传代码
注意一下开发者工具的几个配置项,按需选择就行
如果是uni-app项目,则在HBuilderX里选择 发行-小程序-微信,然后再点击上传
3-2 设置体验版
上传包后,在微信公众平台 管理-版本管理中选择刚刚的开发版本为体验版
然后,再将测试人员添加到体验人员中(管理-人员管理-体验成员)
此时,测试人员扫描体验版二维码,就能使用小程序了
3-3 提交审核及发布
测试完成后,点击提交审核,在1-3个工作日内会出结果,如果审核不通过,按照提示信息修改;如果通过,点击发布小程序即可
中(管理-人员管理-体验成员)
此时,测试人员扫描体验版二维码,就能使用小程序了
3-3 提交审核及发布
测试完成后,点击提交审核,在1-3个工作日内会出结果,如果审核不通过,按照提示信息修改;如果通过,点击发布小程序即可
注:第一次审核时,部分类别需要工信部二次审核,时间较长