介绍

小程序在微信小程序上线首日正式发布，最大化微博媒体朋友圈。 本文主要讲一下开发摩拜小程序的技术总结，以及如何在一段开发周期内一步步从学习到进阶。

改变主意

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

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

3.没有标签链接，不能嵌套

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

5.数据绑定使用双括号语法

6.无法操作DOM，通过改变页面数据来改变视图显示（类似）

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

生命周期

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

1.首次打开微信小程序开发小结，小程序初始化

2、小程序初始化完成后，触发事件

3、小程序切换到后台（关闭屏幕、切换APP等），触发

4、小程序从后台切换到前台，再次触发

5.小程序错误、触发

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

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

事件广播

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

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

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

// Page A// 开锁成功后，跳转到Page Bwx.redirectTo({ url: "/pages/riding/index"})

登录复制

// Page BPage({ onShow() { // 检查骑行状态 } } })

登录复制

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

const broadcast = require("libs/broadcast") // 先注册事件 broadcast.on("check_ride_state", () => { // 检查骑行状态 })

登录复制

const broadcast = require("libs/broadcast") // Page A // 开锁成功后，触发事件，再跳转到Page Bbroadcast.fire("check_ride_state") wx.redirectTo({ url: "/pages/riding/index"})

登录复制

数据中心

根目录下的 app.js 很有用，根目录下的 app.js 很有用，根目录下的 app.js 很有用。

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

// app.jsconst systemInfo = wx.getSystemInfoSync() App({ globalData: { systemInfo } })

登录复制

在页面上获取：

// Page A const { systemInfo } = getApp().globalData

登录复制

性能优化

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

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

首页显示找车地图，扫码成功后跳转到乘车地图。

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

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

.wxml

登录复制

/.js

const indexStyle = "width: 750rpx; height: 1260rpx"const rideStyle = "width: 750rpx; height: 960rpx"Page({ data: { style: indexStyle }, onUnlock() { this.setData({ style: rideStyle }) } } })

登录复制

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