前言

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

??首先，我們需要知道微信小程序是什么？微信小程序內(nèi)核是什么？微信小程序的開發(fā)語言什么？這樣才能更好的開發(fā)微信小程序，以及解決遇到的問題。

一、微信小程序是什么

微信小程序是一個依托于微信，微信提供一個接口運行瀏覽器內(nèi)核上的一個程序。

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

二、微信小程序內(nèi)核是什么

微信小程序的編譯內(nèi)核環(huán)境根據(jù)不同平臺而不同。

• 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中
• 在 Android 上，小程序的 javascript 代碼是通過 X5 內(nèi)核來解析
• 在 開發(fā)工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內(nèi)核） 中

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 內(nèi)核

唯一一個屬于國人開發(fā)，大鵝廠自己的瀏覽器解析內(nèi)核

nwjs

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

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

三、微信小程序的開發(fā)語言是什么

1.微信小程序的開發(fā)

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

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

四、微信小程序

1.小程序與普通網(wǎng)頁開發(fā)的區(qū)別

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

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

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

<center>表1-1 小程序的運行環(huán)境</center>

運行環(huán)境邏輯層渲染層

iOS	JavaScriptCore	WKWebView
安卓	X5 JSCore	X5瀏覽器
小程序開發(fā)者工具	NWJS	Chrome WebView

2.WebView

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

流程：
打開一個 WebView 通常會經(jīng)歷以下幾個階段：

• 交互無反饋
• 到達新的頁面，頁面白屏
• 頁面基本框架出現(xiàn)，但是沒有數(shù)據(jù)；頁面處于 loading 狀態(tài)
• 出現(xiàn)所需的數(shù)據(jù)

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

?

?

WebView啟動過程

存在的問題：
在加載WebView頁面時，時常出現(xiàn)白屏現(xiàn)象：

?

加載WebView出現(xiàn)白屏

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

?

3.微信小程序

1）通信模型

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

?

?

渲染過程

?

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

• 邏輯層：創(chuàng)建一個單獨的線程去執(zhí)行 JavaScript，在這個環(huán)境下執(zhí)行的都是有關(guān)小程序業(yè)務(wù)邏輯的代碼
• 渲染層：界面渲染相關(guān)的任務(wù)全都在 WebView 線程里執(zhí)行，通過邏輯層代碼去控制渲染哪些界面。一個小程序存在多個界面，所以渲染層存在多個 WebView 線程.

2）雙線程下的界面渲染

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

?

界面渲染

?

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

• 1.在渲染層把 WXML 轉(zhuǎn)化成對應(yīng)的 JS 對象。
• 2.在邏輯層發(fā)生數(shù)據(jù)變更的時候，通過宿主環(huán)境提供的 setData 方法把數(shù)據(jù)從邏輯層傳遞到 Native，再轉(zhuǎn)發(fā)到渲染層。
• 3.經(jīng)過對比前后差異，把差異應(yīng)用在原來的 DOM 樹上，更新界面。

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

總結(jié)

以上是生活随笔為你收集整理的如何给APP开发属于自己的小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。