摩拜單車小程序源代碼分析
2017-12-29
導(dǎo)讀：共享單車品牌之一的摩拜單車很早就創(chuàng)立了屬于自己的小程序，使用戶不用下載APP就可以直接掃碼騎車，為用戶帶來(lái)了極大的便利，摩拜單車小程序的源代碼也受到很多業(yè)內(nèi)人士的關(guān)注...
提醒您：在使用本網(wǎng)站前，請(qǐng)您務(wù)必閱讀并理解本聲明。您所瀏覽的內(nèi)容為網(wǎng)絡(luò)數(shù)據(jù)收集所得，并非由海商制作，目的僅為方便網(wǎng)民了解網(wǎng)絡(luò)信息，網(wǎng)民對(duì)于如何使用該內(nèi)容，需作出個(gè)人的獨(dú)立判斷。部分內(nèi)容來(lái)源網(wǎng)絡(luò)，如有錯(cuò)誤，提供相關(guān)所屬證明信息，開(kāi)發(fā)類似小程序。
共享單車品牌之一的摩拜單車很早就創(chuàng)立了屬于自己的小程序，使用戶不用下載APP就可以直接掃碼騎車，為用戶帶來(lái)了極大的便利，摩拜單車小程序的源代碼也受到很多業(yè)內(nèi)人士的關(guān)注，下面來(lái)分析。
我們知道，我們可以直接進(jìn)入摩拜單車的小程序，進(jìn)行掃描摩拜單車的二維碼。
并且新用戶可以在摩拜小程序中快速注冊(cè)賬戶。
很簡(jiǎn)單，威力很大。用微信掃一掃，就可以直接進(jìn)入小程序。
摩拜單車小程序源代碼分析：
生命周期
你可以理解小程序就是一個(gè)單頁(yè)面的H5網(wǎng)頁(yè)，所有元素的加載都是一次性的，這就引來(lái)了生命周期的概念：
首次打開(kāi)，小程序初始化
小程序初始化完成后，觸發(fā)onShow事件
小程序被切換到后臺(tái)（熄屏，切換APP等），觸發(fā)onHide
小程序從后臺(tái)切換到前臺(tái)，再次觸發(fā)onShow
小程序出錯(cuò)，觸發(fā)onError
每個(gè)頁(yè)面也有自己的生命周期：
注意：在微信6.5.3版本中，部分Android機(jī)觸發(fā)不了onLoad事件，可以用onReady替代。
事件廣播
“單頁(yè)面結(jié)構(gòu)”的微信小程序，你可以使用事件廣播（統(tǒng)一的事件中心）來(lái)注冊(cè)和觸發(fā)自定義事件，否則到后期事件管理會(huì)越來(lái)越亂，而且涉及跨頁(yè)面?zhèn)鬏斒录?，你更需要這種事件觸發(fā)機(jī)制，可以參考broadcast.js。比如在摩拜單車中有這樣的場(chǎng)景：
掃碼成功后在開(kāi)鎖頁(yè)面A提示開(kāi)鎖成功，要跳轉(zhuǎn)到騎行頁(yè)面B并查詢用戶騎行狀態(tài)。
如果沒(méi)有統(tǒng)一的事件管理中心，你幾乎無(wú)法完成這樣的過(guò)程，當(dāng)然，可以使用Hack的方式解決。因?yàn)樘D(zhuǎn)到頁(yè)面B會(huì)觸發(fā)B的onShow事件，所以可以在onShow中寫業(yè)務(wù)邏輯：
// Page A
// 開(kāi)鎖成功后，跳轉(zhuǎn)到Page B
wx.redirectTo({
url: "/pages/riding/index"
})
// Page B
Page({
onShow() {
// 檢查騎行狀態(tài)
}
}
})
但更合理的應(yīng)該是利用事件廣播來(lái)處理：
const broadcast = require("libs/broadcast")
// 先注冊(cè)事件
broadcast.on("check_ride_state", () => {
// 檢查騎行狀態(tài)
})
const broadcast = require("libs/broadcast")
// Page A
// 開(kāi)鎖成功后，觸發(fā)事件，再跳轉(zhuǎn)到Page B
broadcast.fire("check_ride_state")
wx.redirectTo({
url: "/pages/riding/index"
})
數(shù)據(jù)中心
根目錄的app.js很有用，根目錄的app.js很有用，根目錄的app.js很有用。
因?yàn)樵谒鼉?nèi)部注冊(cè)的變量或方法，都是可以被所有頁(yè)面獲取到，所以利用它也可以處理上面所述的跨頁(yè)面事件觸發(fā)問(wèn)題。而且可以注冊(cè)globalData供所有頁(yè)面取用，例如可以把systemInfo直接注冊(cè)到globalData中，這樣就不用在每個(gè)頁(yè)面都獲取一遍：
// app.js
const systemInfo = wx.getSystemInfoSync()
App({
globalData: {
systemInfo
}
})
在頁(yè)面獲?。?/div>
// Page A
const {
systemInfo
} = getApp().globalData
性能優(yōu)化
小程序運(yùn)行在微信平臺(tái)，而且可能和眾多小程序“共享運(yùn)行內(nèi)存”，可想而知，單個(gè)小程序的性能極可能遇到瓶頸而Crash或被微信主動(dòng)銷毀！
比如在摩拜單車有這個(gè)場(chǎng)景：
首頁(yè)展示地圖找車，掃碼成功后跳轉(zhuǎn)到騎行地圖。
簡(jiǎn)單的邏輯，直接兩個(gè)頁(yè)面，兩個(gè)map組件切換就可以搞定。實(shí)際測(cè)試場(chǎng)景中，iOS的確如預(yù)期，一切正常，但是在Android下，就很有可能會(huì)使得小程序Crash，掃碼成功后直接退出了小程序。
解決辦法就是， 整個(gè)小程序只維護(hù)一個(gè)map組件 ，通過(guò)不同的State來(lái)改變map的不同展現(xiàn)：
index.wxml
<map id="map" controls="{{controls}}" style="{{style}}"></map>
index/index.js
const indexStyle = "width: 750rpx; height: 1260rpx"
const rideStyle = "width: 750rpx; height: 960rpx"
Page({
data: {
style: indexStyle
},
onUnlock() {
this.setData({
style: rideStyle
})
}
}
})
這樣就成功解決了部分Android設(shè)備小程序Crash的問(wèn)題。
第二部分：如何開(kāi)通一個(gè)小商店
- 關(guān)注官方公眾號(hào) -
