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

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