作為一名前端開發人員,在小程序隨處可見的現在,如果還不會小程序,是不是就有點OUT了呢??接下來,已經做過幾款小程序的Sophia就給大家分享一下自己對小程序原理的一些看法。
一、小程序是什么?
2016年,“微信之父”張小龍在微信公開課上向大家介紹了小程序,他說:小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念,但又無需安裝卸載。
二、小程序與普通網頁開發的區別
1、普通網頁開發
網頁開發渲染線程和腳本線程是互斥的,開發者可以使用到各種瀏覽器暴露出來的 DOM API,進行 DOM 選中和操作;而且網頁開發者需要面對的環境是各式各樣的瀏覽器,PC 端需要面對 IE、Chrome、360、Firefox等瀏覽器,在移動端需要面對Safari、Chrome以及 iOS、Android 系統中的各式 WebView 。
2、小程序
渲染層和邏輯層是分開運行在不同的線程當中,邏輯層運行在 JSCore 中,並沒有一個完整瀏覽器對象,因而缺少相關的DOM API和BOM API。這一區別導致了前端開發非常熟悉的一些庫,例如 jQuery、 Zepto 等,在小程序中是無法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同,所以一些 NPM 的包在小程序中也是無法運行的。小程序開發過程中需要面對的是兩大操作系統 iOS 和 Android 的微信客戶端,以及用於輔助開發的小程序開發者工具。
三、小程序原理
小程序的框架包含兩部分,分別是渲染層和AppService邏輯層,渲染層的界面使用了WebView 進行渲染;邏輯層采用JsCore線程運行JS腳本,進行邏輯處理、數據請求及接口調用等,一個小程序存在多個界面,所以渲染層存在多個WebView線程,這兩個線程的通信會經由微信客戶端進行中轉,邏輯層把數據變化通知到渲染層,觸發渲染層頁面更新,渲染層把觸發的事件通知到邏輯層進行業務處理。
下面附上一張小程序框架圖:
解析(從下往上看):
1、最底層是微信,當我們發版時小程序開發工具會把我們的代碼和框架一起進行打包,當我們在微信里打開小程序時其實微信會把打包好的代碼下載到微信app里,這樣我們就可以像在開發工具里一樣在微信里運行我們的小程序了。
2、native層就是小程序的框架,這個框架里封裝了ui層組件和邏輯層組件,這些組件可以通過微信app提供的接口調用手機硬件信息。
3、最上層的兩個框,是我們真正需要進行操作的視圖層和邏輯層,視圖層和邏輯層的交互是通過數據經由native層進行交互的。視圖層和邏輯層都可以調用native框架里封裝好的組件和方法。
四、小程序的生命周期
關於小程序的生命周期,可以分為兩個部分來理解:應用生命周期和頁面生命周期。
應用的生命周期:
1、用戶首次打開小程序,觸發 onLaunch(全局只觸發一次)。
2、小程序初始化完成后,觸發onShow方法,監聽小程序顯示。
3、小程序從前台進入后台,觸發 onHide方法。
4、小程序從后台進入前台顯示,觸發 onShow方法。
5、小程序后台運行一定時間,或系統資源占用過高,會被銷毀。
頁面生命周期:
1、小程序注冊完成后,加載頁面,觸發onLoad方法。
2、頁面載入后觸發onShow方法,顯示頁面。
3、首次顯示頁面,會觸發onReady方法,渲染頁面元素和樣式,一個頁面只會調用一次。
4、當小程序后台運行或跳轉到其他頁面時,觸發onHide方法。
5、當小程序有后台進入到前台運行或重新進入頁面時,觸發onShow方法。
6、當使用重定向方法wx.redirectTo()或關閉當前頁返回上一頁wx.navigateBack(),觸發onUnload。
同時,應用生命周期會影響到頁面生命周期。
以上就是我對微信小程序的一些理解,有不對的地方,歡迎大家指出,謝謝!