从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 脚本文件来处理用户的操作。

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

参考文档:

小程序开发-教程

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

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