摩拜单车微信小程序开发技术总结
责任编辑:网站建设公司 https://www.zequninfo.com/
摩拜单车微信小程序开发技术总结 项目自推出以来一直在线上。无论是来自微信小程序开发技术还是微信小程序操作,都值得后来者学习。以下是Mobike微信小程序开发技术的总结。
1,思维改变
微信小程序没有通常的HTML标签,而是React的微信自定义组件,如视图,文本,地图等。
没有窗口变量,但是WeChat提供了一个wx全局方法集
没有标记链接,没有嵌套的iframe
事件绑定和条件渲染类似于Angular,都是写的在WXML
数据绑定使用Mustache双括号语法
无法操作DOM,通过更改页面状态更改视图显示,如React状态
因此,如果您熟悉上述所有前端技术堆栈,您将能够开发微信小程序。
2生命周期
你可以理解小程序就是一个单页面的H5网页,所有元素的加载都是一次性的,这就引来了生命周期的概念:
摩拜单车微信小程序开发技术总结 微信小程序开发技术总结
首先打开,小程序初始化在小程序初始化后触发onShow事件。
小程序切换到后台关闭屏幕,切换APP等,触发onHide
小程序从后台切换到前台并再次触发onShow。
小程序错误,触发onError
每个页面也有自己的生命周期:
注意:在微信6.5.3版本中,有些Android机器无法触发onLoad事件,你可以改为使用onReady。
摩拜单车微信小程序开发技术总结
3事件广播
单页微信小程序,你可以使用事件广播统一事件中心来注册和触发自定义事件,否则事件管理会变得越来越混乱,而且它涉及跨页转移事件,你需要这个触发
机制的事件,你可以参考br
Oadcast.js。
例如,摩拜单车中有这样一个场景:
扫描代码成功后,解锁页面A提示解锁成功,并跳转到骑行页面B并查询用户的骑行状态。
如果您没有统一的事件管理中心,则很难完成此类过程。当然,您可以使用Hack来解决它。
因为跳到页面B会触发B的onShow事件,你可以在onShow中编写业务逻辑:
//页面A
//解锁成功后,跳转到Page B
wx.redirectTo {
Url:/ pages / riding / index}
// Page B
Page {
onShow {
/ /检查骑行状态
}
}
} \\ n
但是使用事件广播来处理更合理:
Const broadcast = requirelibs / broadcast
//注册活动首先
Broadcast.oncheck_ride_state,= \\ u003e {
/ /检查骑行状态
}
Const broadcast = requirelibs / broadcast
//页面A
//解锁成功后,触发事件,然后跳转到第B页。
广播。 firecheck_ride_state
wx.redirectTo {
Url:/ pages / riding / index}
4数据中心
根app.js很有用,根app.js很有用,根app.js很有用。
因为变量或方法是regi其中的内容可以通过所有页面获取,因此它也可以处理上述跨页面事件触发问题。
并且您可以为所有页面注册globalData,例如,您可以将systemInfo直接注册到globalData,因此您不必每个页面都可以获取它:
// app。 js
Const systemInfo = wx.getSystemInfoSync
App {
globalData:{
systemInfo
#n ##}
}
获取页面:
//页面A
Const {
systemInfo
} = getApp.globalData
5性能优化
applet在WeChat平台上运行,可能共享运行内存有许多小程序。可以想象一个小程序
性能可能会遇到瓶颈,而Crash或WeChat会主动销毁
例如,Mobike骑行中有这个场景:
主页显示汽车,扫描完代码后,它跳转到骑行地图。
简单的逻辑,直接两页,两个地图组件可以切换。
在实际测试场景中,iOS确实如预期,一切正常,但在Android下,很有可能是小程序崩溃,在成功扫描代码后,直接退出小程序。
解决方案是整个applet只维护一个地图组件,用不同的状态更改地图的不同表示:
Index.wxml \\ n
\\ u003cmap id = map controls = {{controls}} style = {{style}} \\ u003e \\ u003c / map \\ u003e
Index / index.js \\ n
Const indexStyle = width:750rpx;身高:1260rpxconst rideStyle =宽度:750rpx; height:960rpxPage {
数据:{
样式:indexStyle
},
onUnlock {
this .setData {
样式:rideStyle
}
}
}
}
这成功解决了一些Android设备applet Crash的问题。
泽群一站式网络服务机构竭诚为您提供: