在日常開發(fā)中，我們總能在小程序的開發(fā)文檔里看到種種組件：

• 基礎(chǔ)組件：小程序框架層開發(fā)
• 自定義組件：開發(fā)者or小程序官方，基于基礎(chǔ)組件進(jìn)行二次開發(fā)
• 動(dòng)態(tài)庫(kù)組件：小程序官方開發(fā)的、以動(dòng)態(tài)庫(kù)形式發(fā)布的組件，其本質(zhì)依然是自定義、基礎(chǔ)組件

......

綜上：就像是蓋樓，框架開發(fā)的基礎(chǔ)組件，是小程序所有組件建筑的地基，我們今天要聊的正是它。

基礎(chǔ)組件實(shí)現(xiàn)

前置名詞解釋

NA：Native App的縮寫，是基于智能手機(jī)本地操作系統(tǒng)如iOS、Android、WP并使用原生程式編寫運(yùn)行的第三方應(yīng)用程序，一般開發(fā)語(yǔ)言為JAVA、C++、Objective-C、Swift
NA 組件：也稱原生組件，是Android、ios 等NA客戶端開發(fā)的控件
H5組件：是指HTML5語(yǔ)言編寫的web組件
webview：用來在NA代碼中展示web頁(yè)面，有點(diǎn)類似web中的iframe，ios、Android中分別采取WKWebView和WebView控件實(shí)現(xiàn)。

前置特性解釋

1. 小程序前端框架，會(huì)將開發(fā)者實(shí)現(xiàn)的小程序布局轉(zhuǎn)換成標(biāo)準(zhǔn) HTML 布局；
2. NA 組件與webview在兩個(gè)層級(jí)（如下圖1.1）
3. 在客戶端代碼中，后插入的NA組件，層級(jí)高于之前的NA組件

框架層的基礎(chǔ)組件，是基于H5組件和NA組件實(shí)現(xiàn)的。

比如小程序中的 canvas、map、animation-view、textarea、cover-view、cover-image、camera、video、live-player、input 這些都是原生組件。

相比于H5組件，NA組件不僅可以提供H5組件無(wú)法實(shí)現(xiàn)的一些功能，還能提升用戶體驗(yàn)上的流暢度，又因?yàn)闇p少了客戶端代碼與webview通信的流程，降低了通信開銷。

簡(jiǎn)單來說，NA組件功能全、速度快、開銷少；然而，命運(yùn)贈(zèng)送的禮物，早已在暗中標(biāo)好了價(jià)格——原生組件并不是十全十美，它付出了其他代價(jià)。

由于原生組件脫離在 webview 渲染流程外，因此在使用時(shí)有以下限制：

1. 原生組件的層級(jí)是最高的：頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少，都無(wú)法蓋在原生組件上；
2. 部分 CSS 樣式無(wú)法應(yīng)用于原生組件；
3. 原生組件無(wú)法在 scroll-view、swiper、picker-view、movable-view 中使用：因?yàn)槿绻_發(fā)者在可滾動(dòng)的DOM區(qū)域，插入原生組件作為其子節(jié)點(diǎn)，由于原生組件是直接插入到webview外部的層級(jí)，與DOM之間沒有關(guān)聯(lián)，所以不會(huì)跟隨移動(dòng)也不會(huì)被裁減

這也就解釋了，為什么你在使用一些原生組件時(shí)，會(huì)出現(xiàn)組件不隨著頁(yè)面滾動(dòng)或是層級(jí)永遠(yuǎn)最高的bug。

.......是不是有點(diǎn)難搞？

解決NA的限制

解決這個(gè)問題不是一蹴而就的，它也有自己的歷史進(jìn)程：

cover-image和cover-view，是局部解決方案：由于在客戶端中，后插入的原生組件層級(jí)高于前面的原生組件，所以把想覆蓋原生組件的內(nèi)容，用一個(gè)原生組件包裹后插入，從而hack解決。

但這樣做，就像是寫css的時(shí)候，寫了一堆!important，并不是一個(gè)優(yōu)雅的解決方案，后面提到的同層渲染才是終極大殺器。

同層渲染

為了解決原生組件的層級(jí)問題，同時(shí)盡可能保留 NA 組件的優(yōu)勢(shì)，小程序客戶端、前端及瀏覽內(nèi)核團(tuán)隊(duì)一起制定了一套解決方案：由于此方案的控件并非繪制在 NA 貼片層，而是繪制在 WebView 所渲染的頁(yè)面中，與其他 HTML 控件在同一層級(jí)，因此稱為「同層渲染」；在支持同層渲染后，原生組件與其它H5組件可以隨意疊加，層級(jí)的限制將不復(fù)存在。

Android 同層渲染原理

前置特性解釋

T7：T7內(nèi)核是百度手機(jī)瀏覽器基于Blink研發(fā)的瀏覽內(nèi)核
ZeusPlugin：T7瀏覽器內(nèi)核的一個(gè)插件機(jī)制，可用來解析或發(fā)送前端、客戶端指令，作為兩者通信的中樞
swanCore：小程序前端框架

小程序在 Android 端采用 T7 瀏覽內(nèi)核作為渲染層，內(nèi)核提供了 ZeusPlugin 指令系統(tǒng)。

1. 由 SwanCore 將開發(fā)者實(shí)現(xiàn)的小程序布局轉(zhuǎn)換成標(biāo)準(zhǔn) HTML 布局，并對(duì)同層渲染的組件增加標(biāo)識(shí)；
2. T7 瀏覽內(nèi)核渲染頁(yè)面時(shí)，識(shí)別到標(biāo)識(shí)，則認(rèn)為此組件為同層組件；
3. T7 瀏覽內(nèi)核根據(jù)需求為同層組件擴(kuò)展方法和屬性，供前端 SwanCore 調(diào)用；
4. 擴(kuò)展的能力部分由瀏覽內(nèi)核實(shí)現(xiàn)，也可通過小程序客戶端的能力實(shí)現(xiàn)，根據(jù)能力具體內(nèi)容而定。

ios 同層渲染原理

前置名詞

WKWebView：NA組件，用來在NA代碼中展示web頁(yè)面，它在內(nèi)部采用的是分層方式進(jìn)行渲染
Compositing Layer：NA合成層，內(nèi)核一般會(huì)將多個(gè)webview內(nèi)的 DOM 節(jié)點(diǎn)渲染到一個(gè) Compositing Layer 上，因此合成層與 DOM 節(jié)點(diǎn)之間不存在一對(duì)一的映射關(guān)系
WKChildScrollView：也是NA組件，但 WebKit 內(nèi)核已經(jīng)處理了它與其他 DOM 節(jié)點(diǎn)之間的層級(jí)關(guān)系，與 webview內(nèi)的DOM 節(jié)點(diǎn)存在映射關(guān)系

前置特性

當(dāng)把一個(gè)webview內(nèi)的 DOM 節(jié)點(diǎn)的 CSS 屬性設(shè)置為 overflow: scroll （低版本需同時(shí)設(shè)置 -webkit-overflow-scrolling: touch）之后，NA的WKWebView 會(huì)為其生成一個(gè)對(duì)應(yīng)的 WKChildScrollView

iOS 端同層渲染，也正是基于 WKChildScrollView 實(shí)現(xiàn)的，大致流程如下：

1. 小程序前端，在webview內(nèi)創(chuàng)建一個(gè) DOM 節(jié)點(diǎn)并設(shè)置其 CSS 屬性為 overflow: hidden 且 -webkit-overflow-scrolling: touch；
2. 前端通知客戶端查找到該 DOM 節(jié)點(diǎn)對(duì)應(yīng)的原生 WKChildScrollView 組件；
3. 將原生組件掛載到該 WKChildScrollView 節(jié)點(diǎn)上作為其子 View；
4. WebKit 內(nèi)核已經(jīng)處理了WKChildScrollView與對(duì)應(yīng)DOM 節(jié)點(diǎn)之間的層級(jí)關(guān)系。 

5. 

6.  通過上述流程，小程序的NA組件就被插入到 WKChildScrollView 了，也即是在 步驟1 創(chuàng)建的那個(gè) DOM 節(jié)點(diǎn)映射的原生 WKChildScrollView 節(jié)點(diǎn)。此時(shí)，修改這個(gè) DOM 節(jié)點(diǎn)的樣式屬性同樣也會(huì)應(yīng)用到原生組件上。因此，同層渲染的原生組件與普通的H5組件表現(xiàn)并無(wú)二致。

使用組件的注意事項(xiàng)

1）NA組件中支持同層渲染的情況（同時(shí)需要注意的是，同層渲染會(huì)存在失敗的情況，如果嘗試5次之后依舊失敗，依舊會(huì)采用NA組件的方式）

2）未支持同層渲染的NA組件或者較低版本，需要注意上文提到的原生組件的使用限制：

• 原生組件的層級(jí)是最高的，所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少，都無(wú)法蓋在原生組件上。后插入的原生組件可以覆蓋之前的原生組件；
• 原生組件無(wú)法在 scroll-view、swiper、picker-view、movable-view 中使用；
• 無(wú)法對(duì)原生組件設(shè)置 CSS 動(dòng)畫；
• 不能在父級(jí)節(jié)點(diǎn)使用 overflow: hidden 來裁剪原生組件的顯示區(qū)域

3）如需在NA組件中增加更高層級(jí)的組件，可考慮使用cover-image、cover-view

- END -