前言
针对做过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 脚本文件来处理用户的操作。
<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转去做小程序，除了样式的写法稍微有些不同之外，其他的业务可以完全“依瓢画葫芦”，遇到问题再去看文档，如果是接口的问题，建议上小程序开发者社区。
网友评论