您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“摩拜單車微信小程序開發(fā)技術(shù)有哪些 ”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“摩拜單車微信小程序開發(fā)技術(shù)有哪些 ”吧!
微信小程序沒有HTML的常用標(biāo)簽,而是類似React的微信自定義組件,比如view、text、map等
沒有window變量,但微信提供了wx全局方法集
沒有a標(biāo)簽鏈接,不可嵌套iframe
事件綁定和條件渲染類似Angular,全部寫在WXML中
數(shù)據(jù)綁定采用Mustache雙大括號語法
無法操作DOM,通過改變page data(類似React的state)來改變視圖展現(xiàn)
所以如果你熟悉以上提到的所有前端技術(shù)棧,開發(fā)微信小程序你會得心應(yīng)手。
你可以理解小程序就是一個(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"})
根目錄的app.js很有用,根目錄的app.js很有用,根目錄的app.js很有用。
因?yàn)樵谒鼉?nèi)部注冊的變量或方法,都是可以被所有頁面獲取到,所以利用它也可以處理上面所述的跨頁面事件觸發(fā)問題。而且可以注冊globalData供所有頁面取用,例如可以把systemInfo直接注冊到globalData中,這樣就不用在每個(gè)頁面都獲取一遍:
// app.js const systemInfo = wx.getSystemInfoSync() App({ globalData: { systemInfo } })
在頁面獲?。?/p>
// Page A const { systemInfo } = getApp().globalData
小程序運(yùn)行在微信平臺,而且可能和眾多小程序“共享運(yùn)行內(nèi)存”,可想而知,單個(gè)小程序的性能極可能遇到瓶頸而Crash或被微信主動(dòng)銷毀!
比如在摩拜單車有這個(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的問題。
到此,相信大家對“摩拜單車微信小程序開發(fā)技術(shù)有哪些 ”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。