微信小程序上手之路分享

最近两周，处于公司业务需求，完成一个微信小程序的开发，主要是前端开发。无微信小程序和前端开发经验，纯属摸着石头过河，边学边干，花三周时间，完成了一个麻雀虽小五脏俱全的样品（具体内容不分享）。就是这么一个从0到1的过程，愿意分享出来，IT码农们共勉。

时间分配

首先看看在开发小程序过程的时间分配，从时间上基本也知道小程序前端开发的大体情况，已经难点在哪里。

内容	时间
小程序基础	一周
样式适配	一周
JS代码逻辑编写	一周

上述几个内容是没有前后顺序的，了解一些基础后，很多东西是现学现卖。只是在复盘的时候，发现它们各自的时间消耗基本一样。

小程序基础

小程序基础我概括为几个方面：

1. 基本概念的认知
2. 熟悉开发工具
3. 熟悉小程序基本框架和运行原理
4. 熟悉小程序开发指南
5. 熟悉小程序常用组件和API
6. 熟悉云开发与服务端

基本概念的认知

小程序、小游戏、公众号、订阅号、服务号，这几本产品概念。我要开发的就是小程序，可认为这是一个运行在微信中的APP，而且是一个Web APP。小游戏是专门用于游戏小程序，比如跳一跳小游戏。公众号，主要是用于服务人民大众（客户）的一种微信账号，这种账号区别于微信号。可以这么说，微信号是面向个人的，而公众号是面向企业的。而公众号又分为订阅号和服务号，订阅号的主动性比较偏向于用户，提供用户订阅功能。服务号则比较偏向于企业（更全一点还有政府、服务机构等），企业要向广大群众提供服务，服务的主动性由在于企业。

微信上常常会收到一些来自各种小程序和公众号的消息，消息出现的位置和产品的关系：

产品消息类型	消息位置
小程序消息	服务通知
订阅号消息	订阅号消息
服务号消息	微信消息列表独占一行

关于消息推送，深入了解还有消息的推送行为和权限申请，消息具体子类别，消息受限情况等等。比如小程序消息，就有一次性订阅消息和长期性订阅消息。

小程序的开发管理，管理员、开发者、体验者等等概念，appId，openid等概念。

熟悉开发工具

下载开发工具，创建一个最小小程序，摸索一下基本的面板和开发功能。熟悉小程序上传和发布，git待托管于自己托管代码的区别。熟悉开发工具各项配置，特别是项目配置。

熟悉开发工具虽然简单，但是也得花时间。最好了解一下开发工具的不足之处，避免日后开发工作中遇到不必要的麻烦。

熟悉小程序基本框架和运行原理

小程序是基于Web引擎运行的，Android 上基于V8引擎，所以，原理上小程序类似WebApp，但是他们的实现方式和功能有较大的区别。小程序有自己的框架、组件、API。

了解小程序的启动（冷启动热启动），前后台状态，摧毁等相关内容，以及小程序的生命周期等。

了解小程序的运行线程和UI线程的关系，熟悉数据驱动UI开发模式。

小程序的组织架构，都包含哪些组件和功能模块。

熟悉小程序开发指南

将官网的开发指南过一遍，熟悉小程序开发涉及的技术原理。上面提到的基本框架、运行机制都在官网开发指南中有所阐述。

熟悉小程序常用组件和API

最常用的view button input等组件，wx. 开头的API。过了一遍组件和API，在我们遇到开发需求时，不至于一片空白。

熟悉云开发与服务端

云开发在实际的公司项目中，可能用处不大，但是可以用于我们在还没有服务器支持时，使用它来替代服务器进行需求实现研究。

适当熟悉一下服务器API不会亏，比如在我们研究登录和消息推送时。

样式适配

样式适配基本是CSS的内容，推荐的步骤是，先将 WeUI 下载下来看看官方都提供了哪些样式的DEMO。WeUI中提供了诸如 列表、基本组件、复杂组件的样式实现样例。

注意一下，-webkit开头的css属性是专门用于支持Safari 浏览器的，但是我不清楚相对应的标准的CSS属性在Safari 浏览器中是否有效（本人穷码农一枚，没有苹果开发环境）。

WeUI中的样式都包装得很好，单独拎一个组件出来，自己仿照着敲一遍，尽量尝试去读懂属性配置的含义。

完成之后，就CSS教程学两遍。有了在WeUI上的努力，CSS学起来很快，这个东西学着不难，难在用起来感觉爽。

然后在开发过程中，在WeUI中有的，尽量拉去改，自己研究比较慢。多抄几个页面之后，很快就能如鱼得水，自己实现样式也就没什么大问题了。

JS代码逻辑编写

JS代码写起来还是比较爽了，JS对象和json对象转换非常灵活，对象属性的添加和赋值很方便。
使用JS进行函数式编程，感觉比较舒服。以上是个人体验。

学一遍JS教程，一遍其实都算多，浏览一下基本数据类型、函数、对象，仿几段代码就可以搞了。

在整个开发过程中，JS最大的难点在于脱离回调，将异步变成同步。微信很多API都是异步，比如弹窗、延时、网络等。很多时候，我们希望完成事件A在去做事件B。这个时候可以使用Promise，或者async/await（需要继承第三方lib）。

技术积累

把开发过程中遇到的新技术点积累下来，积累一点，成长一点。

微信开发个人账户和企业账户的区别

功能	个人账户	企业账户
认证	No	Yes
支付	No	Yes
附近小程序	No	Yes
申请模板消息的模板	可申请但无权，不会通过	有权获得通过

公众号和小程序通知的区别

见网络参考

微信右上角胶囊按钮，点击后，在开发工具和实际显示的不同

开发工具中，点击后只有 转发 和 取消 两个按钮；实体机中显示如其它小程序无异。

一次性订阅消息和长期性订阅消息

一次性订阅消息，订阅一次，服务器可推送一次。连续订阅多次，服务器可推送响应的次数。订阅有效期不会过期。

css 尺寸单位

单位	含义
px	屏幕像素单位
em	单个字体的字号，它的单位是px；比如当前组件字体字号是14px，则2em=2*14px=28px
rem	即 root em，它参考的字体大小是root view的字号，而不是当前组件
rpx	小程序自适应像素，规定宽度为 750rpx；在 iPhone6 标准屏幕上，2rpx = 1px
vm/vh	屏幕被分成宽100vm和高100vh

微信自定义组件

这个官方有详细的介绍，之所以放这里，是因为它很重要，搞起来也比较复杂。一些公共的组件可以做成自定义组件。

外部样式类：
作为一个类的桥接。类的具体名字由外部决定，外部对类配置样式。从而达到了样式由外部提供的效果。“外部样式类”与直接由“外部提供样式”具有相同的效果。

使用外部样式的几种方法：

1. 取消样式隔离 isolated
2. 通过特殊符号使用页面样式或者父组件样式
3. 使用外部样式类

behavior：
行为与Component是一个组合的关系。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。
behavior的用意在于：可以将一些多个component都需要的公共属性、数据、生命周期和方法独立到一个相同的代码段中。

微信内部也有一些内置的behavior，可供小程序选择使用。

注意：

1. 只有自定义组件拥有behavior，页面没有。

CSS 组件的层次关系

后出现的在上面。
比如下面的view icon在open-data的上方：

<view class='iconView'>
      <open-data class='icon' mode="aspectFit" type="userAvatarUrl"></open-data>
      <view class='icon'></view>
</view>

JS 异步变同步

关于Promise原理：

• 我的文章：《JavaScript Promise 承诺执行原理浅析》
• 廖雪峰-Promise

关于async/await与Promise的关系：
https://www.cnblogs.com/CandyManPing/p/9384104.html

如果在小程序中勾选了ES6转ES5，async/await会报错。
处理方法是引入regenerator-runtime
参考使用方法：https://www.cnblogs.com/cckui/p/10231801.html

由于Android上使用X5内核，对ES6支持不好，所以，使用async还是需要regenerator-runtime的。

如果不打算使用async/await，则可以单独使用Promise，参考：
https://www.jianshu.com/p/79c82f0609af

Promise.all可以运行一组Promise，但是，一旦一个Promise运行失败，then不会被执行。
Promiss.all是并行执行的，小程序有最大连接数，可能会出问题。
其它注意事项参考：https://www.jianshu.com/p/4d03afeee580

理解Promise的链式调用。

中断Promise链，参考：https://www.jianshu.com/p/eff3173d9dc1
大体有两种方法：

1. throw一个异常，throw发生后，依次调用catch和finally函数
2. 在需要跳出的地方直接返回Promise.reject()

const test = (up_url) => {
   return new Promise((presolve, preject) => {
     console.log(up_url);                                              
     presolve(up_url)})
}

let p = Promise.resolve(1,2).then((result) => {  // 多个参数，只有第一个生效
    return test(result)
}).then((result) => {
    return test(result)   
}).then((result) => {
    console.log('last', result)
}).catch((result) => {
    console.log(result)
    return result
})

输出结果：

> 1
> 1
> 1
> "last" 1

如果希望传递多个参数：

const test = (obj) => {
   return new Promise((presolve, preject) => {
     console.log(obj.up_url);                                              
     presolve(obj)})
}

let p = Promise.resolve({up_url:1,l:2}).then((result) => {  
    return test(result)
}).then((result) => {
    return test(result)   
}).then((result) => {
    console.log('last', result)
}).catch((result) => {
    console.log(result)
    return result
})

输出结果：

> 1
> 1
> "last" Object { up_url: 1, l: 2 }

其实，函数体不需要返回Promise对象：

const test = (obj) => {
   obj.up_url += 1
   console.log(obj.up_url)
   return obj;
}

let p = Promise.resolve({up_url:1,l:2}).then((result) => {  
    return test(result)
}).catch((result) => {
    console.log(result)
    return result
}).then((result) => {
    return test(result)   
}).then((result) => {
    console.log('last', result)
})

输出结果：

> 2
> 3
> "last" Object { up_url: 3, l: 2 }

由此可见，then函数返回的内容会被一个Promise对象包裹，新的Promise对象执行结果就是then函数的返回结果。有了新的Promise对象，我们才能不断地then下去。