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

责任编辑:网站建设公司 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的问题。




泽群一站式网络服务机构竭诚为您提供:

区块链开发棋牌游戏网站建设网页设计APP开发小程序开发公众号制作网络营销推广SEO优化模板建站云服务等服务

相关资讯