mobike微信小程序开发技术总结

前言

mobike小程序在微信小程序上线首日正式发布，引爆了微博媒体朋友圈。本文主要谈技术方向的总结，以及如何在一段发展周期内从学习到进阶的循序渐进。

思维转变

微信小程序没有HTML的常用标签，而是像React这样的微信自定义组件，如视图、文本、地图等。

没有窗口变量，但微信提供wx全局方法集。

标记链接不可用，iframe不能嵌套。

事件绑定和条件呈现类似于Angular，都是用WXML编写的。

数据绑定采用小胡子双大括号语法。

无法操作DOM，通过更改页面数据来更改视图显示(状态类似React)

因此，如果你熟悉了上面提到的所有前端技术栈，那么你在开发微信小程序时就会得心应手。

生命周期

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

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

小程序初始化完成后，onShow事件被触发。

APPlet切换到后台(屏幕关闭、app切换等)。)，在侧面触发。

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

小程序出错，触发onError

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

注意：在微信6.5.3版本中，部分安卓机无法触发onLoad事件，可以改用onReady。

事件广播

“单页结构”微信小程序，可以使用事件广播(统一事件中心)注册触发自定义事件，否则后期的事件管理会越来越混乱，而且涉及到事件的跨页传输，你更需要这个事件触发机制。请参考broadcast.js例如，mobike中有这样一个场景：

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

如果没有统一的事件管理中心，你很难完成这样的过程。当然可以用Hack方法解决。因为跳转到页面B会触发B的onShow事件，所以可以在onShow中编写业务逻辑：

//页面A//解锁成功后，跳转到页面BWX。重定向至({ URL : '/Pages/riding/index ' })//PageB Page({ on show(){//检查riding状态}})，但使用事件广播处理更合理：

Const broadcast=require(' libs/broadcast ')//注册事件broadcast.on('check_ride_state '，()={//检查骑行状态})Const broadcast=require(' libs/broadcast ')//page a//解锁成功后，触发事件，然后跳转到page bbroadcast . fire(' Check _ ride _ state ')wx .重定向到({ URL 3360 '/page/)