微信小程序知識點總結（一）

1、微信小程序宿主環境

微信小程序使用的技術棧是js/wxml/wxss。跟咱們web開發使用的技術棧存在一些不一樣。

• js：微信小程序的js運行是基於微信客戶端，或者只微信APP上下文來運行的，並非在瀏覽器中運行，所以它不能訪問瀏覽器環境下的DOM對象，也不能訪問node.js下的操做系統API等。
• wxml：是微信提供的一種新的基於XML的語法格式，做爲微信小程序的展現層，提供整個頁面的結構。
• wxss：是一套用於修飾微信組件的樣式語言。wxss具備大部分的css特性，可是仍存在一些其餘的不足。

微信小程序運行在三端：iOS、Android 和 用於調試的開發者工具

在 iOS 上，小程序邏輯層的 javascript 代碼運行在 JavaScriptCore 中，視圖層是由 WKWebView 來渲染的，環境有 iOS八、iOS九、iOS10；

在 Android 上，
    舊版本，小程序邏輯層的 javascript 代碼運行中 X5 JSCore 中，視圖層是由 X5 基於 Mobile Chrome 57 內核來渲染的；

    新版本，小程序邏輯層的 javascript 代碼運行在 V8 中，視圖層是由自研 XWeb 引擎基於 Mobile Chrome 67 內核來渲染的；
    
在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中，mwjs是合併browser和node的運行時，使用前端技術來開發跨平臺的應用，微信小程序開發工具就是使用其開發的。

注意：三端環境各不相同，雖然提供了相似的實現，可是仍是存在一些不一樣，JavaScript 語法和 API 支持不一致，咱們能夠經過開啓ES6自動轉換來規避一些問題。

具體的js支持狀況，咱們能夠參考官方文檔。
JavaScript 支持狀況

2、MINA框架解析

微信小程序的底層框架咱們又稱爲是MINA框架。

以上是官方提供的一張圖。微信小程序的運行環境包含渲染層和邏輯層。渲染層負責頁面的渲染工做，由wxml和wxss來負責呈現，邏輯層負責整個小程序js腳本運行。

渲染層和邏輯層是不一樣的線程在執行，渲染層 使用webView來渲染，邏輯層由jsCore線程來執行。微信小程序由多個頁面組成，每個頁面都是一個webView線程。渲染層線程和邏輯層線程之間的通訊須要藉助於微信客戶端Native來完成。同時邏輯層發送網絡請求也須要咱們的Native來提供支持。

看了官網提供的圖，咱們再來看另外一個圖。

整個小程序只有一個App service。而且常駐內存。APP Service將數據綁定到咱們的視圖層，觸發視圖的更新，視圖中經過事件監聽來回調咱們邏輯層的方法，在邏輯層去處理咱們的邏輯，更新數據。視圖層和邏輯層經過系統層Native中的JsBridge來實現通訊。系統層提供了訪問微信原生能力的能力，同時也爲網絡請求等提供服務。

App Service由兩部分組成，一部分是Manager負責邏輯的執行，另外一部分是API，對不一樣的平臺微信爲咱們作了一層處理，使得咱們能夠經過同一個API接口來實現。

3、微信小程序的啓動分類

小程序啓動會有兩種狀況，一種是「冷啓動」，一種是「熱啓動」。

• 熱啓動：假如用戶已經打開過某小程序，而後在必定時間內再次打開該小程序，此時無需從新啓動，只需將後臺態的小程序切換到前臺，這個過程就是熱啓動；
• 冷啓動：用戶首次打開或小程序被微信主動銷燬後再次打開的狀況，此時小程序須要從新加載啓動，即冷啓動。

小程序沒有重啓的概念。

只有當小程序進入後臺必定時間，或者系統資源佔用太高，纔會被真正的銷燬。

4、微信小程序的啓動機制

一、首先從CDN加載咱們的小程序包，而後加載運行，只有當頁面放入WebView後才能顯示出來。
二、下次咱們運行的時候，（冷啓動）會再次向CDN發送請求，去判斷是否有更新信息，而後異步下載最新的代碼包。
   咱們下次啓動的時候才能使用最新的代碼。若是沒有更新，則直接使用本地緩衝的代碼包

5、微信小程序的生命週期

應用的生命週期

當咱們第一次啓動小程序的時候，首先初始化小程序執行環境，而後會從本地緩衝或者是CDN下載代碼包進行加載，當咱們的小程序初始化完成以後，會觸發APP實例的onLaunch方法，全局只調用一次。
當咱們切換小程序到後臺的時候調用onHide，當切回前臺的時候調用的是onShow方法。當小程序發生腳本錯誤，或者 API 調用失敗時，會觸發 onError 並帶上錯誤信息。

頁面的生命週期

• onLoad 頁面第一次加載的時候調用，只調用一次，此時咱們能夠拿到一些頁面的打開參數。
• onShow 頁面顯示或者從後臺切回前臺的時候調用的，該方法可能會調用屢次，好比咱們頁面的跳轉和返回，都會調用onShow。
• onHide 頁面隱藏或者切到後臺會調用，也是會調用屢次。
• onReady 頁面渲染完成以後調用，一個頁面只調用一次。
• onUnload 頁面銷燬的時候調用，好比咱們點擊返回鍵，那麼當前頁面會銷燬執行onUnload。

咱們結合頁面跳轉來分析一下頁面生命週期的調用順序～

假如咱們有index和logs頁面。index爲首頁，index有一按鈕能夠跳轉到logs

一、第一次進入，先調用app實例的onLaunch和onShow。
二、調用index頁面的onLoad、onShow、onReady
三、點擊按鈕：調用index的onHide，而後調用logs的onLoad、onShow、onReady
四、點擊左上角的返回，先調用logs的onUnload,而後調用index的onShow
五、點擊按鈕：調用index的onHide，而後調用logs的onLoad、onShow、onReady

上面是官網提供的一個圖，咱們能夠分析一下～

一、小程序執行須要兩個線程，一個是UI線程負責視圖層，一個是AppService線程，負責邏輯處理。
二、AppService線程建立好以後會依次調用onLoad和onShow方法，咱們能夠在這裏作一些數據請求操做
三、UI線程建立好以後會進行初始化工做，當初始化ok以後，會告訴AppService線程，此時AppService發送數據，提供給UI線程進行頁面數據填充。而後頁面進行初次渲染，渲染好以後告訴AppService線程，此時onReady回調開始觸發。
四、期間AppService線程能夠處理一些事件觸發，從而更新data數據，從新觸發視圖的渲染。

針對路由變化，頁面生命週期的調用

總之頁面出棧，會調用onUnload去銷燬咱們的頁面，若是不出棧，調用onHide。

如何能好的掌握頁面路由變化咱們頁面生命週期怎麼變化，咱們還須要知道路由變化的機制。

• tabbar頁面的切換，咱們能夠參考官方文檔。頁面切換

注意

navigateTo, redirectTo 只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 能夠打開任意頁面。
頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
調用頁面路由帶的參數能夠在目標頁面的onLoad中獲取。