从RN到微信小程序

前言

针对做过RN开发，但没有接触过微信小程序的同学，你可以通过本文了解微信小程序开发的整体流程，在之后的小程序开发中可以快速定位问题，找到解决方案。

注册账号

任何平台的开发都不能跳过这一步 申请账号 。

个人/公司都可以注册微信小程序，一个账号只能对应一个小程序/公众号，个人注册相对简单写，公司注册则需要上传公司的营业执照等信息。

需要注意的是：公司在注册过程中需要认证主体，这个步骤腾讯要求公司使用对公账号向微信打款几分钱，在腾讯收到钱后，会将款项退回，才能通过主体审核。这需要1-3天左右的时间，对于一些大公司来说，对外打款需要经过oa审核，这可能对部分公司来说会相对耗时。只有主体审核通过了，才算是注册成功，注册一定要走在前面，否则会影响开发后提供测试版本/审核，阻断项目进度。

tip：对于部分小公司/个人，还需要注意小程序上线必须支持https，也就是说必须要有一个合法域名，否则同样会影响审核。

开发工具的使用（IDE）

建议：动手创建一个Demo工程，实际走一遍操作印象更深刻。

开发工具下载地址

打开小程序IDE，新建项目。

image.png

点击“测试号”会生成一个临时的AppID。

从上图可以看出，IDE除了能用于小程序开发，同样还支持小游戏、公众号网页开发。

image.png

开发工具主要包括 模拟器、编辑器、调试器。

模拟器

模拟器提供了 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，也手动修改。

开发过程中这几个功能都非常实用，用过的都说好。

代码构成

我们将目光移到项目的目录：

image.png

直接暴露在根目录下的文件都是全局配置文件：

• app.js：小程序入口，小程序启动后会执行App实例的onLaunch()回调。
• app.json：全局配置文件，打开后默认有pages、window。pages可以理解为rn的路由，默认第一个页面是小程序的首页；window则配置全局的导航栏样式、标题颜色等。
• app.wxss：全局样式文件。
• project.config.json： 项目配置文件，记录项目的基础配置，如：是否关闭域名校验。

我们来动手创建一个页面，在pages目录下右键创建目录Home，在Home目录下右键创建Page，命名为Home。

创建Home

我们看到IDE在创建Page的时候为我们生成了4个文件，并且每个文件都有自己的基础代码，比如Home.js，整个页面生命周期的回调方法都已经写好。

我们可以把Home文件夹当成是一个代码构造器，我们将页面分成两个部分：视图层、逻辑层。
视图层：由 .wxml .wxss 构成页面的结构。
逻辑层：.js 负责业务逻辑，通过改变data里的成员，改变页面展示。

关于JS交互逻辑：
在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

{{ msg }}
点击我

// 点击 button 按钮的时候，
// 把界面上 msg 显示成 "Hello World"，
// 于是我们在 button 上声明一个属性: bindtap ，
// 在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：
Page({
  clickMe() {
    this.setData({msg: 'Hello World'})
  }
})

小程序除了提供基础组件、还有一些定制的组件如

可以说小程序的开发就是在pages目录下添加业务page，在完成提供体验版本，微信公众平台生成体验二维码，拥有体验权限的微信可以扫码测试，测试版本右上角可以选择不去校验合法域名，所以体验版也可以使用http进行测试。切记小程序上架必须是https！

上线

点击查看官方流程

需要注意：一些资质需要额外申请，比如你的小程序是有声阅读类应用，后台会要求你提交相关资质文件。这些需要留意，提前确认，避免进度阻断。

最后

从RN转去做小程序，除了样式的写法稍微有些不同之外，其他的业务可以完全“依瓢画葫芦”，遇到问题再去看文档，如果是接口的问题，建议上小程序开发者社区。

参考文档：

小程序开发-教程