摩拜單車微信小程序開發技術總結

責任編輯:網站建設公司 http://www.askvjx.live/



摩拜單車微信小程序開發技術總結  項目自推出以來一直在線上。無論是來自微信小程序開發技術還是微信小程序操作,都值得后來者學習。以下是Mobike微信小程序開發技術的總結。  

1,思維改變

微信小程序沒有通常的HTML標簽,而是React的微信自定義組件,如視圖,文本,地圖等。 

沒有窗口變量,但是WeChat提供了一個wx全局方法集  

沒有標記鏈接,沒有嵌套的iframe   

事件綁定和條件渲染類似于Angular,都是寫的在WXML   

數據綁定使用Mustache雙括號語法 

無法操作DOM,通過更改頁面狀態更改視圖顯示,如React狀態  

因此,如果您熟悉上述所有前端技術堆棧,您將能夠開發微信小程序。  

 2生命周期

你可以理解小程序就是一個單頁面的H5網頁,所有元素的加載都是一次性的,這就引來了生命周期的概念:  

摩拜單車微信小程序開發技術總結  微信小程序開發技術總結    

首先打開,小程序初始化在小程序初始化后觸發onShow事件。  

小程序切換到后臺關閉屏幕,切換APP等,觸發onHide   

小程序從后臺切換到前臺并再次觸發onShow。  

小程序錯誤,觸發onError   

每個頁面也有自己的生命周期:   

注意:在微信6.5.3版本中,有些Android機器無法觸發onLoad事件,你可以改為使用onReady。  

 摩拜單車微信小程序開發技術總結  

 3事件廣播 

單頁微信小程序,你可以使用事件廣播統一事件中心來注冊和觸發自定義事件,否則事件管理會變得越來越混亂,而且它涉及跨頁轉移事件,你需要這個觸發

機制的事件,你可以參考br 

Oadcast.js。 

例如,摩拜單車中有這樣一個場景:  

掃描代碼成功后,解鎖頁面A提示解鎖成功,并跳轉到騎行頁面B并查詢用戶的騎行狀態。  

如果您沒有統一的事件管理中心,則很難完成此類過程。當然,您可以使用Hack來解決它。 

因為跳到頁面B會觸發B的onShow事件,你可以在onShow中編寫業務邏輯:  

 //頁面A  

 //解鎖成功后,跳轉到Page B  

 wx.redirectTo { 

 Url:/ pages / riding / index}  

 // Page B  

 Page { 

 onShow { 

 / /檢查騎行狀態 

}  

}  

}  \\ n 

但是使用事件廣播來處理更合理:  

 Const broadcast = requirelibs / broadcast   

 //注冊活動首先 

 Broadcast.oncheck_ride_state,= \\ u003e { 

 / /檢查騎行狀態 

}  

 Const broadcast = requirelibs / broadcast   

 //頁面A  

 //解鎖成功后,觸發事件,然后跳轉到第B頁。 

廣播。 firecheck_ride_state  

 wx.redirectTo { 

 Url:/ pages / riding / index}  

 4數據中心 

根app.js很有用,根app.js很有用,根app.js很有用。  

因為變量或方法是regi其中的內容可以通過所有頁面獲取,因此它也可以處理上述跨頁面事件觸發問題。 

并且您可以為所有頁面注冊globalData,例如,您可以將systemInfo直接注冊到globalData,因此您不必每個頁面都可以獲取它:  

 // app。 js   

 Const systemInfo = wx.getSystemInfoSync  

 App { 

 globalData:{ 

 systemInfo 

#n ##}  

}  

獲取頁面:  

 //頁面A   

 Const { 

 systemInfo  

} = getApp.globalData  

 5性能優化 

 applet在WeChat平臺上運行,可能共享運行內存有許多小程序。可以想象一個小程序

性能可能會遇到瓶頸,而Crash或WeChat會主動銷毀  

例如,Mobike騎行中有這個場景:  

主頁顯示汽車,掃描完代碼后,它跳轉到騎行地圖。  

簡單的邏輯,直接兩頁,兩個地圖組件可以切換。 

在實際測試場景中,iOS確實如預期,一切正常,但在Android下,很有可能是小程序崩潰,在成功掃描代碼后,直接退出小程序。  

解決方案是整個applet只維護一個地圖組件,用不同的狀態更改地圖的不同表示:  

 Index.wxml   \\ n 

 \\ u003cmap id = map controls = {{controls}} style = {{style}} \\ u003e \\ u003c / map \\ u003e  

 Index / index.js   \\ n 

 Const indexStyle = width:750rpx;身高:1260rpxconst rideStyle =寬度:750rpx; height:960rpxPage { 

數據:{ 

樣式:indexStyle  

}, 

 onUnlock { 

 this .setData { 

樣式:rideStyle  

}  

}  

}  

這成功解決了一些Android設備applet Crash的問題。




澤群一站式網絡服務機構竭誠為您提供:

區塊鏈開發棋牌游戲網站建設網頁設計APP開發小程序開發公眾號制作網絡營銷推廣SEO優化模板建站云服務等服務

相關資訊

高手看初赔