用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 技术分析 查看内容

摩拜单车微信小程序开发技术总结

天下雪 2017-1-12 00:30

作者:binnng,来自授权地址前言摩拜单车小程序已于微信小程序上线第一天正式发布,刷爆微博媒体朋友圈。本文主要讲讲技术方向的总结,在段时间的开发周期内内如何一步步从学习到进阶。思维转变微信小程序没有HTML的 ...

作者:binnng,来自授权地址:https://segmentfault.com/a/1190000008056208

前言

摩拜单车小程序已于微信小程序上线第一天正式发布,刷爆微博媒体朋友圈。本文主要讲讲技术方向的总结,在段时间的开发周期内内如何一步步从学习到进阶。

思维转变

  • 微信小程序没有HTML的常用标签,而是类似React的微信自定义组件,比如viewtextmap

  • 没有window变量,但微信提供了wx全局方法集

  • 没有a标签链接,不可嵌套iframe

  • 事件绑定和条件渲染类似Angular,全部写在WXML

  • 数据绑定采用Mustache双大括号语法

  • 无法操作DOM,通过改变page data(类似React的state)来改变视图展现

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

生命周期

你可以理解小程序就是一个单页面的H5网页,所有元素的加载都是一次性的,这就引来了生命周期的概念:

  • 首次打开,小程序初始化

  • 小程序初始化完成后,触发onShow事件

  • 小程序被切换到后台(熄屏,切换APP等),触发onHide

  • 小程序从后台切换到前台,再次触发onShow

  • 小程序出错,触发onError

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

注意:在微信6.5.3版本中,部分Android机触发不了onLoad事件,可以用onReady替代。

事件广播

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

扫码成功后在开锁页面A提示开锁成功,要跳转到骑行页面B并查询用户骑行状态。

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

  1. // Page A
  2. // 开锁成功后,跳转到Page B
  3. wx.redirectTo({
  4. url: "/pages/riding/index"
  5. })
  1. // Page B
  2. Page({
  3. onShow() {
  4. // 检查骑行状态
  5. }
  6. }
  7. })

但更合理的应该是利用事件广播来处理:

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

  1. const broadcast = require("libs/broadcast")
  2. // Page A
  3. // 开锁成功后,触发事件,再跳转到Page B
  4. broadcast.fire("check_ride_state")
  5. wx.redirectTo({
  6. url: "/pages/riding/index"
  7. })

数据中心

根目录的app.js很有用,根目录的app.js很有用,根目录的app.js很有用。
因为在它内部注册的变量或方法,都是可以被所有页面获取到,所以利用它也可以处理上面所述的跨页面事件触发问题。而且可以注册globalData供所有页面取用,例如可以把systemInfo直接注册到globalData中,这样就不用在每个页面都获取一遍:

  1. // app.js
  2. const systemInfo = wx.getSystemInfoSync()
  3. App({
  4. globalData: {
  5. systemInfo
  6. }
  7. })

在页面获取:

  1. // Page A
  2. const {
  3. systemInfo
  4. } = getApp().globalData

性能优化

小程序运行在微信平台,而且可能和众多小程序“共享运行内存”,可想而知,单个小程序的性能极可能遇到瓶颈而Crash或被微信主动销毁!

比如在摩拜单车有这个场景:

首页展示地图找车,扫码成功后跳转到骑行地图。

简单的逻辑,直接两个页面,两个map组件切换就可以搞定。实际测试场景中,iOS的确如预期,一切正常,但是在Android下,就很有可能会使得小程序Crash,扫码成功后直接退出了小程序。

解决办法就是, 整个小程序只维护一个map组件 ,通过不同的State来改变map的不同展现:

index.wxml

  1. <map id="map" controls="{{controls}}" style="{{style}}"></map>

index/index.js

  1. const indexStyle = "width: 750rpx; height: 1260rpx"
  2. const rideStyle = "width: 750rpx; height: 960rpx"
  3. Page({
  4. data: {
  5. style: indexStyle
  6. },
  7. onUnlock() {
  8. this.setData({
  9. style: rideStyle
  10. })
  11. }
  12. }
  13. })

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

鲜花
鲜花 (5)
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (6 人)

分享至 : QQ空间
收藏
原作者: binnng 来自: 授权地址

相关阅读

  • qijunli 2017-1-13 18:17
    你好
    咨询一个问题     就是  地图上有一个  “离我最近”的   这个是文字吗        但是小程序上的  markers的  title的写上并没什么用 (什么都不显示)      
    但是看摩拜的那像是图片      能否赐教下   万分感谢
  • wx_6908e4aaa1 2017-1-12 15:15
    有价值,有内涵,赞一个~

    不过小程序就是要小而精,就应该用最简化的方式处理。如果小程序都要套上状态、事件处理的全局机制(类比react+redux),未免有点大工程了,这样的场景也不应该是小程序承载的。
  • MephistoSun 2017-1-12 13:33
    小程序虽然小,但是想做好却并不简单啊