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