celsius的个人博客

星星之火可以燎原

0%

微信小程序开发基础

发表于 更新于
本文字数： 3k 阅读时长 ≈ 5 分钟

简介

微信⼩程序，简称⼩程序，英⽂名 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 阿里 Facebook Google
    开发方式 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即可

1
2
3
#app{
  width: 750rpx;
}

2.条件编译

1
2
3
4
5
6
// #ifdef H5  
  console.log("这段代码只会在h5端运行")
// #endif 
// #ifndef H5  
  console.log("这段代码只会在非h5端运行")
// #endif

3.id含义

1
2
3
appid: 小程序id，小程序的唯一识别
openid: 微信用户id，对于当前小程序的微信用户的唯一识别
unionId: 微信用户id，对于当前小程序所属微信商户账号的微信用户的唯一识别

三、测试及发布

3-1 打包上传

如果是原生开发，直接上传代码
注意一下开发者工具的几个配置项，按需选择就行
配置项
如果是uni-app项目，则在HBuilderX里选择 发行-小程序-微信，然后再点击上传

3-2 设置体验版

上传包后，在微信公众平台 管理-版本管理中选择刚刚的开发版本为体验版
版本管理
然后，再将测试人员添加到体验人员中（管理-人员管理-体验成员）
此时，测试人员扫描体验版二维码，就能使用小程序了

3-3 提交审核及发布

测试完成后，点击提交审核，在1-3个工作日内会出结果，如果审核不通过，按照提示信息修改；如果通过，点击发布小程序即可
中（管理-人员管理-体验成员）
此时，测试人员扫描体验版二维码，就能使用小程序了

3-3 提交审核及发布

测试完成后，点击提交审核，在1-3个工作日内会出结果，如果审核不通过，按照提示信息修改；如果通过，点击发布小程序即可
注：第一次审核时，部分类别需要工信部二次审核，时间较长