前言

摩拜单车小程序在微信小程序上线首日正式发布，就刷爆了微博媒体朋友圈。本文主要讲微信小程序开发的经验总结以及如何一步步学习和进阶。

思维改变

微信小程序没有常见的HTML标签，而是类似微信的自定义组件，比如视图、文本、地图等。

没有变量，但是微信提供了wx全局方法集

没有标签链接，不能嵌套。

事件绑定与条件渲染类似，都是用WXML编写的

数据绑定使用双花括号语法

无法操作DOM，通过改变页面数据来改变视图呈现（类似）

所以如果你熟悉了上面提到的所有前端技术栈，那么你开发微信小程序就会游刃有余。

小程序开发手册参考：微信小程序开发文档

生命周期

可以理解为小程序是一个单页的H5网页，所有元素都加载一次，这就引出了生命周期的概念：

第一次打开时，小程序会被初始化。

小程序初始化后，触发事件

小程序切换到后台（熄屏、切换APP等），触发

小程序从后台切换到前台并再次触发

小程序错误，触发

每个页面也有自己的生命周期：

注：微信6.5.3版本中，部分电脑无法触发事件，可更换。

事件广播

对于“单页面结构”的微信小程序，可以使用事件广播（统一事件中心）来注册并触发自定义事件。不然后期事件管理会越来越混乱，而且涉及到事件的跨页面传输。你需要更多关于这个事件触发机制，请参考.js。比如摩拜单车中有这样一个场景：

扫码成功后，在解锁页面A会提示解锁成功，需要跳转到骑行页面B查看用户的骑行状态。

如果没有统一的事件管理中心，几乎不可能完成这样的过程。当然，你可以使用Hack来解决。因为跳转到B页面会触发B的事件，所以可以将业务逻辑写在：

但使用事件广播来处理更合理：

数据中心

根目录下的app.js非常有用。根目录下的app.js非常有用。根目录下的app.js非常有用。

由于其内部注册的变量或方法可以被所有页面获取，因此也可以用来处理上面提到的跨页面事件触发问题。并且可以注册所有页面的访问。比如你可以直接注册，这样就不用每个页面都获取了：

进入页面：

性能优化

小程序运行在微信平台上，可能会与很多小程序“共享运行内存”。可以想象，单个小程序的性能很可能会遇到瓶颈，被微信主动摧毁！

比如摩拜单车中有这样一个场景：

主页显示地图以查找乘车服务。扫码成功后，将跳转至骑行地图。

逻辑简单，只需在两个页面和两个地图组件之间切换即可。在实际测试场景中，iOS确实符合预期，一切正常。但这种情况下，很有可能小程序扫码成功后直接退出。

解决方案是整个小程序中只维护一个地图组件，通过不同的方式改变地图的不同呈现方式：

.wxml

/.js

这成功解决了部分设备小程序的问题。

如果您是微信小程序新手，请学习php中文网微信小程序开发系列视频教程：