摩拜單車小程序源代碼分析
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)容,需作出個人的獨立判斷。部分內(nèi)容來源網(wǎng)絡(luò),如有錯誤,提供相關(guān)所屬證明信息,開發(fā)類似小程序。
共享單車品牌之一的摩拜單車很早就創(chuàng)立了屬于自己的小程序,使用戶不用下載APP就可以直接掃碼騎車,為用戶帶來了極大的便利,摩拜單車小程序的源代碼也受到很多業(yè)內(nèi)人士的關(guān)注,下面來分析。
我們知道,我們可以直接進(jìn)入摩拜單車的小程序,進(jìn)行掃描摩拜單車的二維碼。
并且新用戶可以在摩拜小程序中快速注冊賬戶。
很簡單,威力很大。用微信掃一掃,就可以直接進(jìn)入小程序。
摩拜單車小程序源代碼分析:
生命周期
你可以理解小程序就是一個單頁面的H5網(wǎng)頁,所有元素的加載都是一次性的,這就引來了生命周期的概念:
首次打開,小程序初始化
小程序初始化完成后,觸發(fā)onShow事件
小程序被切換到后臺(熄屏,切換APP等),觸發(fā)onHide
小程序從后臺切換到前臺,再次觸發(fā)onShow
小程序出錯,觸發(fā)onError
每個頁面也有自己的生命周期:
注意:在微信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的方式解決。因為跳轉(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很有用。
因為在它內(nèi)部注冊的變量或方法,都是可以被所有頁面獲取到,所以利用它也可以處理上面所述的跨頁面事件觸發(fā)問題。而且可以注冊globalData供所有頁面取用,例如可以把systemInfo直接注冊到globalData中,這樣就不用在每個頁面都獲取一遍:
// app.js
const systemInfo = wx.getSystemInfoSync()
App({
globalData: {
systemInfo
}
})
在頁面獲?。?/div>
// Page A
const {
systemInfo
} = getApp().globalData
性能優(yōu)化
小程序運(yùn)行在微信平臺,而且可能和眾多小程序“共享運(yùn)行內(nèi)存”,可想而知,單個小程序的性能極可能遇到瓶頸而Crash或被微信主動銷毀!
比如在摩拜單車有這個場景:
首頁展示地圖找車,掃碼成功后跳轉(zhuǎn)到騎行地圖。
簡單的邏輯,直接兩個頁面,兩個map組件切換就可以搞定。實際測試場景中,iOS的確如預(yù)期,一切正常,但是在Android下,就很有可能會使得小程序Crash,掃碼成功后直接退出了小程序。
解決辦法就是, 整個小程序只維護(hù)一個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的問題。
第二部分:如何開通一個小商店