从RN到微信小程序

1字数 1781阅读 637

前言

针对做过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转去做小程序,除了样式的写法稍微有些不同之外,其他的业务可以完全“依瓢画葫芦”,遇到问题再去看文档,如果是接口的问题,建议上小程序开发者社区

参考文档:

小程序开发-教程

推荐阅读更多精彩内容

  • 春阳初盛,天空澄清,小区里粉红的细小海棠开了一树,火树银花般的。气温回暖,夜间穿秋裤睡觉不用再开空调。 20岁,2...
  • 1 用作来找存在感 2 让所有人知道你的梦想 3 挽留要走的人 4 在意痛苦 夸大压力 5 轻易相信承诺 6 把...
  • 一天,我在直播间播放曾经在全面K歌上唱过的歌。因为是提前录制好的,所以就没有关心直播状况,当我忙完手头的工作,来到...
  • 貌似中学之后就没再写过任何文字性的东西了,十来年后的今天突然想记录点什么,具体是什么呢?自己也不清楚,大概诡异...
  • 作家曹文轩认为:“阅读是对一种生活方式、人生方式的认同。阅读与不阅读,区别出两种截然不同的生活方式或人生方式。”古...