12月份，微信更新版本，首页强推微信小游戏-跳一跳，将很多之前没有体验过小程序的用户带到了小程序之中。与之而来的小程序也推出了各种各样的功能配合推广，比如小程序中调起app，远程调试小程序等等功能。赶着这趟风，公司也需要做一个小程序出来，于是乎花了将近一个月扑在了小程序上面。写篇文章记录一下开发感受以及开发过程中遇到的问题。
文档
个人觉得小程序的开发文档 写得还算简洁明了，小程序的上手难度也不大。花了一天时间看文档就开始写了。写得时候发现小程序借鉴了三大框架里的很多东西。比如数据驱动，类似于React的Diff算法更新局部页面，类似于angular1.x的条件渲染等等。如果有相关的基础，上手速度会很快。
框架选择
框架选择决定了开发的舒适程度。小程序的原生框架开发起小型的小程序还是很顺畅的。但是对ES6、ES7的一些新方法支持度不够高，比如asnyc wait、promise这些简化异步流程的语法糖，需要手动添加。同时原生框架对组件化开发的支持度不够高，虽然最近版本中可以自己编写组件了，但有挺多不方便的地方，比如HTML结构的文本无法通过属性传递，需要依靠<slot></slot>标签，或者依靠wxParse来解析成微信可以识别的结构。
熟悉Vue的开发者可以选择鹅厂自家推出的wepy框架。
WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。
特性：
- 类Vue开发风格
- 支持自定义组件开发
- 支持引入NPM包
- 支持Promise
- 支持ES2015+特性，如Async Functions
- 支持多种编译器，Less/Sass/Styus、Babel/Typescript、Pug
- 支持多种插件处理，文件压缩，图片压缩，内容替换等
- 支持 Sourcemap，ESLint等
- 小程序细节优化，如请求列队，事件优化等
也可以采用比如dva-wxapp这种结合了redux的开发框架,更好的管理state。
开发
微信小程序的一些api只对认证过的用户开放（认证需要交300元认证费），因此开发者在开发前需要了解自己要用到的api有没有需要验证才能调用的，避免因为认证而延缓开发进度。
目录结构(仅供参考)
├─assets //存放静态资源
│ ├─icon
│ └─image
├─page
│ ├─common
│ │ ├─components //组件
│ │ └─lib //公共文件
│ └─demo //页面主体
├─utils //工具类
├─app.js //入口
├─app.json //入口配置文件
├─app.wxss //样式文件
├─project.config.js //项目配置信息
└─README.md
因为小程序的文档有点乱，所以下面会按照自己的思路整理一下官方文档。
生命周期
生命周期
左边绿色的是页面渲染的进程，右边则是js执行的进程。小程序的页面是栈结构的，它根据路由的切换来执行进栈出栈的操作，即决定当前页面是否仍保留在页面栈中。
-
onLoad: 页面加载- 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
-
onShow: 页面显示- 每次打开页面都会调用一次。
-
onReady: 页面初次渲染完成- 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
- 对界面的设置如
wx.setNavigationBarTitle请在onReady之后设置。
-
onHide: 页面隐藏- 当
navigateTo或底部tab切换时调用。
- 当
-
onUnload: 页面卸载- 当
redirectTo或navigateBack的时候调用。
- 当
因此在使用redirectTo或 navigateBack的时候当前页面会出栈，下次打开的时候会经历整个生命周期。而使用 navigateTo时当前页面只是隐藏了，也就是还在页面栈中，因此下次进入只会执行一次onShow中的代码。当退回某页，需要重新请求数据时，请求应写在onShow之中，或者在上一页的onUnload或者onHide中使用getCurrentpage获取页面栈，去执行setData操作，此处后面会有提及。
页面传值
小程序页面之间传值是开发中经常碰到的场景。微信的传值一般通过以下几种方法：
1.使用wx.navigator或者<navigator>，此时直接在url后面拼上跳转页面需要使用的参数，在下一个页面的onLoad中可以获取到query参数
例如
<navigator wx:if="{{showAddBtn}}" url="/page/info/pages/address/address-add?type=add" class="navigator">
在address-add页面中便可以这样取值
onLoad: function (options) {
this.setData({...options});
}
options即是query参数构成的对象，此处将tpye直接存在了data中便于当前页面其余地方使用。wx.navigator使用方法和上面一样，不再赘述。值得注意的是当要传递一个对象作为参数时，可以使用JSON.stringify序列化，在接受的时候再反序列化为json对象。
2.在实际业务中，当一个页面发生了值变化时，另外一个页面也需要作出对应改变，比如选择地址时，
演示.gif
(年轻时写的了，太监一哈，下次再开发小程序的时候补充完整）
网友评论