1、,june,微信小程序同構(gòu)方案新思路,微信小程序同構(gòu)方案：,mpvue wepy taro kbone ,kbone 是什么？,kbone 也是一種同構(gòu)方案，只是實現(xiàn)思路和其他常見的方案不同，接下來就來介紹下它是如何誕生的。,支持我們使用熟悉的方式（比如 Vue、React）來同時完成小程序端和 Web 端的開發(fā),內(nèi)容大綱,Part 1 背景,背景：微信開放社區(qū),為了讓信息可以更方便有效地傳播、分享和使用，需要在現(xiàn)有 Web 端實現(xiàn)上打造小程序端社區(qū),現(xiàn)有 Web 端社區(qū),同構(gòu)到小程序需要考慮的因素,一套代碼多端運行，便于后續(xù)維護 復用已有代碼 盡可能支持已有的特性 保證性能,Part 2 方

2、案,社區(qū) Web 端實現(xiàn)：基于 Vue 框架,一款提供組件化的 JavaScript 框架,原理：,Vue 原理,社區(qū) Web 端代碼能否直接在小程序上執(zhí)行？,社區(qū)前端模型,瀏覽器提供的能力，在小程序中不存在，原因在于,小程序的運行模型,只是個 jsCore，所以沒有 Dom 接口,如何將 Vue 代碼轉(zhuǎn)成小程序代碼？,業(yè)界方案做法：將 Vue 模板靜態(tài)轉(zhuǎn)換成小程序 WXML 模板,業(yè)界方案原理,視圖層,WXML 是小程序提供的一套類 HTML 格式模板語言,業(yè)界方案原理,業(yè)界方案局限性,業(yè)界方案局限性,業(yè)界方案局限性,此路不通，得換一種思路來解決 Vue 特性支持的問題,新方案設計,Web

3、端模型,新方案模型,新方案原理,此方案要實現(xiàn)的即是適配器部分,1、如何創(chuàng)建仿造 Dom 樹？ 2、如何將仿造 Dom 樹渲染到頁面上？ 3、如何監(jiān)聽用戶事件？,這就是 kbone 的設計思路，接下來需要考慮如下問題：,1、如何創(chuàng)建仿造 Dom 樹？,創(chuàng)建仿造 Dom 樹,在邏輯層內(nèi)存中,2、如何將仿造 Dom 樹渲染到頁面上？,小程序渲染原理,內(nèi)置組件（如 view、video 等） 自定義組件,渲染到頁面上,小程序也沒提供動態(tài)創(chuàng)建節(jié)點的接口,靈光一閃：能否利用前面提到的自定義組件來渲染仿造 Dom 樹呢？,什么是自定義組件？,小程序渲染例子,自定義組件用法,頁面 WXML 模板,頁面 WXM

4、L 模板,自定義組件,簡化,替換,替換,自定義組件用法,自定義組件是一種將各種組件進行組裝而成的組件,其模板可以是這樣的：,也可以是這樣的：,任何組件均可以被組裝，包括自己,可以遞歸創(chuàng)建組件,還可以是這樣的：,自定義組件遞歸用法, 組件,封裝,頁面 WXML 模板,組件樹,自己引用自己,渲染到頁面,渲染到頁面,自定義組件,自定義組件,自定義組件,組件樹,將每一個 Dom 節(jié)點都映射到一個自定義組件實例上,如果創(chuàng)建的自定義組件過多會影響性能，這個后面會介紹如何優(yōu)化,渲染到頁面,渲染到頁面,組件樹,綁定,綁定,綁定,渲染到頁面,最終渲染的效果：,3、如何監(jiān)聽用戶事件？,事件監(jiān)聽,用戶在輸入框輸入內(nèi)

5、容：,代碼中監(jiān)聽到輸入事件后，發(fā)現(xiàn)評論內(nèi)容不符合要求，需要給個提示,事件監(jiān)聽,事件監(jiān)聽,Web 端可以監(jiān)聽到，小程序卻不行，怎么回事？,監(jiān)聽 input 事件,小程序有些事件無法冒泡，input 事件就是其中之一 對于可以冒泡的事件，因為自定義組件封裝的特性，也無法知道具體來自哪個節(jié)點,觸發(fā) input 事件,事件監(jiān)聽,監(jiān)聽 input 事件，觸發(fā)仿造 input 事件,仿造瀏覽器的事件系統(tǒng)，接管小程序事件,冒泡,監(jiān)聽仿造 input 事件,監(jiān)聽仿造 input 事件,事件監(jiān)聽,拋出更新事件,新增節(jié)點,事件監(jiān)聽,接收到更新事件，更新 children,細節(jié)1:如何將 Dom 樹傳給視圖層？,方

6、案一,完整 Dom 樹直接傳到根自定義組件,setData,子樹數(shù)據(jù)則通過 properties 層層透傳,方案一,問題1、每次更新都需要做整棵樹的 diff，存在性能損耗。 問題2、局部更新可能需要傳輸大量不變動的數(shù)據(jù)。,方案二,將每個節(jié)點作為根節(jié)點，拆出至多兩層的子樹,方案二,setData,setData,setData,setData,setData,setData,將各子樹傳遞給與根節(jié)點對應的自定義組件,方案二,優(yōu)勢1：局部更新只做局部 diff。 優(yōu)勢2：每個自定義組件只需要自己和子節(jié)點數(shù)據(jù)， 減少單次更新需要傳輸?shù)臄?shù)據(jù)量。,細節(jié)2:自定義組件創(chuàng)建過程開銷較大，創(chuàng)建過多實例影響性能

7、怎么辦？,減少實例創(chuàng)建,依照初始方案設計，一個 Dom 節(jié)點映射一個自定義組件實例,有沒有辦法讓多個 Dom 節(jié)點映射一個自定義組件實例？,減少實例創(chuàng)建,減少實例創(chuàng)建,只有1個節(jié)點，卻要創(chuàng)建1個自定義組件實例，太浪費！,單一葉子節(jié)點可以合并到上一棵子樹中,其他細節(jié),Dom 節(jié)點、Style、ClassList 等對象復用 Style、ClassList 等對象延遲創(chuàng)建 Dom 節(jié)點屬性值刪減 ,方案總結(jié),kbone,render（js 庫）,element（自定義組件）,仿造 Dom/Bom 接口 構(gòu)造仿造 Dom 樹,監(jiān)聽仿造 Dom 樹變化，渲染到頁面 監(jiān)聽用戶行為，觸發(fā)仿造 Dom 樹事

8、件,方案總結(jié),因為是最底層的地方實現(xiàn)適配，所以幾乎所有 vue 特性都可以直接使用：,Dom 操作 window.location window.history document.cookie ,渲染性能,Part 3 應用,應用到微信開發(fā)社區(qū),Markdown-it,Vue-router,Vuex,Vue SSR,用戶代碼,瀏覽器,webpack 構(gòu)建,微信開放社區(qū) Web 端,這一層小程序沒有,應用到微信開發(fā)社區(qū),Markdown-it,Vue-router,Vuex,Vue,用戶代碼,kbone,微信開放社區(qū)小程序,用 kbone 仿造瀏覽器環(huán)境,webpack 構(gòu)建 + mp-webp

9、ack-plugin 插件,實現(xiàn)得差不多時，產(chǎn)品來提需求了,應用優(yōu)化,希望小程序端的頁面頭部和 h5 端不同，不同端使用不同的交互設計,構(gòu)建時注入環(huán)境變量，根據(jù)不同環(huán)境執(zhí)行不同邏輯,應用優(yōu)化,還希望可以支持小程序端的分享,支持使用小程序內(nèi)置組件，實現(xiàn)小程序分享功能,小程序端完成，想用手機預覽一下看看,代碼體積太大，怎么辦？,體積優(yōu)化,壓縮混淆 代碼分割、公共代碼復用 tree shaking 使用分包 ,體積優(yōu)化,社區(qū) Web 端是一套基于響應式設計的代碼，包含很多在移動端用不到的東西。,提供一個 webpack loader，根據(jù)環(huán)境剔除不需要的代碼,效果展示,微信開放社區(qū)小程序渲染效果對比（左為 h5 端，右為小程序端）：,Part 4 結(jié)語,工具鏈開源,目前方案核心已穩(wěn)定，周邊工具和功能在逐步完善中，已有 50+ 小程序在接入