前言
针对做过RN开发,但没有接触过微信小程序的同学,你可以通过本文了解微信小程序开发的整体流程,在之后的小程序开发中可以快速定位问题,找到解决方案。
注册账号
任何平台的开发都不能跳过这一步 申请账号 。
个人/公司都可以注册微信小程序,一个账号只能对应一个小程序/公众号,个人注册相对简单写,公司注册则需要上传公司的营业执照等信息。
需要注意的是:公司在注册过程中需要认证主体,这个步骤腾讯要求公司使用对公账号向微信打款几分钱,在腾讯收到钱后,会将款项退回,才能通过主体审核。这需要1-3天左右的时间,对于一些大公司来说,对外打款需要经过oa审核,这可能对部分公司来说会相对耗时。只有主体审核通过了,才算是注册成功,注册一定要走在前面,否则会影响开发后提供测试版本/审核,阻断项目进度。
tip:对于部分小公司/个人,还需要注意小程序上线必须支持https,也就是说必须要有一个合法域名,否则同样会影响审核。
开发工具的使用(IDE)
建议:动手创建一个Demo工程,实际走一遍操作印象更深刻。
打开小程序IDE,新建项目。
点击“测试号”会生成一个临时的AppID。
从上图可以看出,IDE除了能用于小程序开发,同样还支持小游戏、公众号网页开发。
开发工具主要包括 模拟器、编辑器、调试器。
模拟器
模拟器提供了 iPhoneX、iPhone5、iPhone6、Plus、Nexus 5 等不同尺寸、不同平台的模拟器供开发者使用,还可以选择当前的网络环境为WIFI、2G、3G,动手将这些功能都点开看看,在脑海中有个印象。
编辑器
编辑器会根据开发者输入的内容智能补足代码,实际开发中也会有一些开发者会选择使用 Visual Studio Code 进行开发。笔者建议,如果是原生小程序开发(未使用框架如Taro),用微信的IDE会更好,针对微信小程序开发,微信开发团队对IDE一直都在做优化,IDE的一些小功能能让开发者提高不少效率,比如创建Page时候自动创建基础文件,并且填充了一些基础代码。
调试器
笔者认为,调试器非常棒,有很多使用的功能,比如“Network”,记录了模拟器的所有请求,从此告别青花瓷(Charles)。
- Console:打印业务里的console.log()、组件误用的警告 、报错 等,告别rn开发中console.warn()。
- Sources:这个跟rn里边使用谷歌浏览器调试一样。
- Network:记录模拟器发送的请求,可以很清楚看到每个请求的header、params、response。
- AppData:当前页面的成员变量的当前值,也可以在这手动修改。
- Storage:当前本地缓存,key-value,也手动修改。
开发过程中这几个功能都非常实用,用过的都说好。
代码构成
我们将目光移到项目的目录:
直接暴露在根目录下的文件都是全局配置文件:
- app.js:小程序入口,小程序启动后会执行App实例的onLaunch()回调。
- app.json:全局配置文件,打开后默认有pages、window。pages可以理解为rn的路由,默认第一个页面是小程序的首页;window则配置全局的导航栏样式、标题颜色等。
- app.wxss:全局样式文件。
- project.config.json: 项目配置文件,记录项目的基础配置,如:是否关闭域名校验。
我们来动手创建一个页面,在pages目录下右键创建目录Home,在Home目录下右键创建Page,命名为Home。
我们看到IDE在创建Page的时候为我们生成了4个文件,并且每个文件都有自己的基础代码,比如Home.js,整个页面生命周期的回调方法都已经写好。
我们可以把Home文件夹当成是一个代码构造器,我们将页面分成两个部分:视图层、逻辑层。
视图层:由 .wxml .wxss 构成页面的结构。
逻辑层:.js 负责业务逻辑,通过改变data里的成员,改变页面展示。
关于JS交互逻辑:
在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
// 点击 button 按钮的时候,
// 把界面上 msg 显示成 "Hello World",
// 于是我们在 button 上声明一个属性: bindtap ,
// 在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:
Page({
clickMe() {
this.setData({msg: 'Hello World'})
}
})
小程序除了提供基础组件、还有一些定制的组件如<map>,还有丰富的接口,建议同学们将 API、组件 都简单浏览一遍,无论是在需求评审,或者是在实际开发中,都会有一些帮助,你可以知道小程序是否支持某个需求,或者这个需求是否需要额外申请资质,又或者是在开发中,需要用到某些接口,可以快速定位到文档内容。
组件:https://developers.weixin.qq.com/miniprogram/dev/component/
API:https://developers.weixin.qq.com/miniprogram/dev/api/
可以说小程序的开发就是在pages目录下添加业务page,在完成提供体验版本,微信公众平台生成体验二维码,拥有体验权限的微信可以扫码测试,测试版本右上角可以选择不去校验合法域名,所以体验版也可以使用http进行测试。切记小程序上架必须是https!
上线
需要注意:一些资质需要额外申请,比如你的小程序是有声阅读类应用,后台会要求你提交相关资质文件。这些需要留意,提前确认,避免进度阻断。
最后
从RN转去做小程序,除了样式的写法稍微有些不同之外,其他的业务可以完全“依瓢画葫芦”,遇到问题再去看文档,如果是接口的问题,建议上小程序开发者社区。