Mobike自行车微信小程序开发技术总结

Mobike自行车小程序自推出以来一直上线，无论是从微信小程序开发技术，还是微信小程序操作都非常值得学习，以下是Mobike自行车开发技术的总结微信小程序

1思维转型

微信小程序没有通常的HTML标签，但类似于React的微信自定义组件，例如视图，文本，地图等。

没有窗口变量，但微信提供了wx全局方法集

没有标记链接，没有嵌套的iframe

事件绑定和条件渲染类似于Angular，全部用WXML编写

使用Mustache双括号语法

进行数据绑定

无法操纵DOM，通过更改页面数据（类似于React的状态）来更改视图显示

因此，如果您熟悉上面提到的所有前端技术堆栈，您将能够开发微信小程序。

2生命周期

您可以理解小程序是单页H5页面，并且所有元素都被加载一次，这导致了生命周期的概念：

首次打开，小程序初始化

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

小程序切换到后台（关闭屏幕，切换APP等），触发onHide

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

小程序错误，触发onError

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

注意：在版本微信6.5.3中，某些Android机器无法触发onLoad事件，可以用onReady替换。

3事件广播

“单页结构”微信小程序，你可以使用事件广播（统一事件中心）来注册和触发自定义事件，否则事件管理会变得越来越混乱，而且它涉及跨页面传输事件，你需要这个更多的事件触发机制可以参考broadcast.js。例如，Mobike自行车就有这样一个场景：

在扫描代码成功之后，解锁页面A提示解锁成功，并跳转到骑乘页面B并查询用户的骑行状态。

如果您没有统一的事件管理中心，则很难完成此类过程。当然，您可以使用Hack来解决它。因为跳转到页面B会触发B的onShow事件，所以您可以在onShow中编写业务逻辑：

//Page A //成功解锁后，跳转到Page Bwx.redirectTo（{url:'/pages/riding/index'}）//页面BPage（{onShow（）{//检查骑行状态}}}）

但是使用事件广播来处理更合理：

Const broadcast=require（'libs/broadcast'）//注册事件broadcast.on（'check_ride_state'，（）=> {//检查骑行状态}）const broadcast=require（'libs/broadcast'）//页面A //解锁成功后，事件被触发，然后跳转到Page Bbroadcast.fire（'check_ride_state'）wx.redirectTo（{url:'/pages/riding/index'}）4数据中心

根app.js非常有用，根app.js非常有用，而根app.js非常有用。

因为在其中注册的变量或方法可以通过所有页面获得，所以它也可以处理上述的跨页面事件触发问题。并且您可以为所有页面注册globalData，例如，您可以将systemInfo直接注册到globalData中，因此您不必每个页面都可以获取它：

//app.jsconst systemInfo=wx.getSystemInfoSync（）App（{globalData: {systemInfo}}）

登录页面：

//Page Aconst {systemInfo}=getApp（）。globalData5性能优化

小程序在微信平台上运行，并且可以与许多小程序共享正在运行的内存。可以想象，单个小程序的性能可能会遇到瓶颈而崩溃或被微信主动销毁！

例如，Mobike骑行中有这个场景：

主页显示汽车，扫描完代码后，它会跳转到骑行地图。

简单的逻辑，直接两页，可以切换两个地图组件。在实际测试场景中，iOS确实如预期，一切正常，但在Android下，很可能会产生小程序Crash。成功扫描代码后，将直接退出小程序。

解决方案是整个小程序只维护一个地图组件，改变不同状态的地图的不同表示：

Index.wxml

索引/index.js

Const indexStyle='width: 750rpx;身高: 1260rpx'const rideStyle='width: 750rpx;高度: 960rpx'Page（{data: {style: indexStyle}，onUnlock（）{this.setData（{style: rideStyle}）}}}）

这成功解决了一些Android设备小程序Crash的问题。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。