微信小程序系列0——微信小程序原理

前言

??工欲善其事,必先利其器。

??首先,我們需要知道微信小程序是什么?微信小程序內核是什么?微信小程序的開發語言什么?這樣才能更好的開發微信小程序,以及解決遇到的問題。

一、微信小程序是什么

微信小程序是一個依托于微信,微信提供一個接口運行瀏覽器內核上的一個程序。

??微信小程序是一個小程序可以有很多頁面,每個頁面承載不同的功能,頁面之間可以互相跳轉。小程序分為渲染層和邏輯層,渲染層中包含了多個 WebView,每個 WebView 對應到我們的小程序里就是一個頁面 Page,每一個頁面都獨立運行在一個頁面層級上。它也可以做得很豐富,就像native app一樣,可以調用原生的各種接口,像網絡狀態、羅盤,重力,撥打電話等

二、微信小程序內核是什么

微信小程序的編譯內核環境根據不同平臺而不同。

  • 在 iOS 上,小程序的 javascript 代碼是運行在 JavaScriptCore 中
  • 在 Android 上,小程序的 javascript 代碼是通過 X5 內核來解析
  • 在 開發工具上, 小程序的 javascript 代碼是運行在 nwjs(chrome內核) 中

JavaScriptCore

JavaScriptCores是開源的,下載地址:https://github.com/phoboslab/JavaScriptCore-iOS

OS X Mavericks 和 iOS 7 引入了 JavaScriptCore 庫,它把 WebKit 的 JavaScript 引擎用 Objective-C 封裝,提供了簡單,快速以及安全的方式接入世界上最流行的語言。不管你愛它還是恨它,JavaScript 的普遍存在使得程序員、工具以及融合到 OS X 和 iOS 里這樣超快的虛擬機中資源的使用都大幅增長。(參考iOS官方文檔:https://developer.apple.com/documentation/javascriptcore?language=objc)

X5 內核

唯一一個屬于國人開發,大鵝廠自己的瀏覽器解析內核

nwjs

原名:node-webkit 當然也是開源的:https://github.com/nwjs/nw.js/

nw.js 是基于 Chromium和 Node.js運行的, 以前也叫nodeWebkit。這就給了你使用HTML和JavaScript來制作桌面應用的可能。在應用里你可以直接調用Node.js的各種api以及現有的第三方包。因為Chromium和 Node.js的跨平臺,那么你的應用也是可以跨平臺的?,F在已經有很多知名的應用是基于NW.js實現,

三、微信小程序的開發語言是什么

1.微信小程序的開發

??微信小程序使用了前端技術棧 JavaScript/WXML/WXSS

  • JavaScript: 微信小程序的 JavaScript 運行環境即不是 Browser 也不是 Node.js。它運行在微信 App 的上下文中,不能操作 Browser context 下的 DOM,也不能通過 Node.js 相關接口訪問操作系統 API。所以,嚴格意義來講,微信小程序并不是 Html5,雖然開發過程和用到的技術棧和 Html5 是相通的。
  • WXML: 作為微信小程序的展示層,并不是使用 Html,而是自己發明的基于 XML 語法的描述。
  • WXSS: 用來修飾展示層的樣式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套樣式語言,用于描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應該怎么顯示?!?“我們的 WXSS 具有 CSS 大部分特性...我們對 CSS 進行了擴充以及修改。”基于 CSS2 還是 CSS3?大部分是哪些部分?是否支持 CSS3 里的動畫?不得而知。

四、微信小程序

1.小程序與普通網頁開發的區別

小程序的主要開發語言是 JavaScript ,所以通常小程序的開發會被用來同普通的網頁開發來做對比。兩者有很大的相似性,對于前端開發者而言,從網頁開發遷移到小程序的開發成本并不高,但是二者還是有些許區別的。

網頁開發渲染線程和腳本線程是互斥的,這也是為什么長時間的腳本運行可能會導致頁面失去響應,而在小程序中,二者是分開的,分別運行在不同的線程中。網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API,進行 DOM 選中和操作。而如上文所述,小程序的邏輯層和渲染層是分開的,邏輯層運行在 JSCore 中,并沒有一個完整瀏覽器對象,因而缺少相關的DOM API和BOM API。這一區別導致了前端開發非常熟悉的一些庫,例如 jQuery、 Zepto 等,在小程序中是無法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同,所以一些 NPM 的包在小程序中也是無法運行的

網頁開發者需要面對的環境是各式各樣的瀏覽器,PC 端需要面對 IE、Chrome、QQ瀏覽器等,在移動端需要面對Safari、Chrome以及 iOS、Android 系統中的各式 WebView 。而小程序開發過程中需要面對的是兩大操作系統 iOS 和 Android 的微信客戶端,以及用于輔助開發的小程序開發者工具,小程序中三大運行環境也是有所區別的.如表1-1所示。

<center>表1-1 小程序的運行環境</center>

運行環境 邏輯層 渲染層
iOS JavaScriptCore WKWebView
安卓 X5 JSCore X5瀏覽器
小程序開發者工具 NWJS Chrome WebView

2.WebView

WebView的運行流程和一些弊端。

流程:
打開一個 WebView 通常會經歷以下幾個階段:

  • 交互無反饋
  • 到達新的頁面,頁面白屏
  • 頁面基本框架出現,但是沒有數據;頁面處于 loading 狀態
  • 出現所需的數據

WebView 啟動過程大概分為以下幾個階段:


WebView啟動過程

存在的問題:
在加載WebView頁面時,時常出現白屏現象:

加載WebView出現白屏

除了白屏,影響 Web 體驗的問題還有缺少操作的反饋,主要表現在兩個方面:頁面切換的生硬和點擊的遲滯感。

3.微信小程序

1)通信模型

小程序的渲染層和邏輯層分別由2個線程管理:渲染層的界面使用了WebView 進行渲染;邏輯層采用JsCore線程運行JS腳本。一個小程序存在多個界面,所以渲染層存在多個WebView線程,這兩個線程的通信會經由微信客戶端(下文中也會采用Native來代指微信客戶端)做中轉,邏輯層發送網絡請求也經由Native轉發,小程序的通信模型如下圖所示。


渲染過程

這就是小程序雙線程模型的由來:

  • 邏輯層:創建一個單獨的線程去執行 JavaScript,在這個環境下執行的都是有關小程序業務邏輯的代碼
  • 渲染層:界面渲染相關的任務全都在 WebView 線程里執行,通過邏輯層代碼去控制渲染哪些界面。一個小程序存在多個界面,所以渲染層存在多個 WebView 線程.
2)雙線程下的界面渲染

小程序的邏輯層和渲染層是分開的兩個線程。在渲染層,宿主環境會把WXML轉化成對應的JS對象,在邏輯層發生數據變更的時候,我們需要通過宿主環境提供的setData方法把數據從邏輯層傳遞到渲染層,再經過對比前后差異,把差異應用在原來的Dom樹上,渲染出正確的UI界面,如下圖所示。

界面渲染

小程序的渲染的整體流程:

  • 1.在渲染層把 WXML 轉化成對應的 JS 對象。
  • 2.在邏輯層發生數據變更的時候,通過宿主環境提供的 setData 方法把數據從邏輯層傳遞到 Native,再轉發到渲染層。
  • 3.經過對比前后差異,把差異應用在原來的 DOM 樹上,更新界面。

總之,小程序通過雙線程的方式解決WebView存在的各種問題,讓小程序更加想Native的體驗。

參考:《小程序開發指南》

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,815評論 2 372

推薦閱讀更多精彩內容