开发摩拜单车小程序的开发周期内内如何进阶？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

开发摩拜单车小程序的开发周期内内如何进阶？

介绍

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

改变想法

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

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

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

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

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

6.无法操作DOM开发摩拜单车小程序的开发周期内内如何进阶？，通过改变页面数据来改变视图显示（类似React的state）

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

生命周期

可以理解为小程序是一个单页的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确实符合预期，一切正常。 但扫码成功后很有可能小程序崩溃，小程序直接退出。

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

索引.wxml

登录后复制

索引/index.js

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

登录后复制

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

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等