導(dǎo)語(yǔ) |?

本文是Kbone作者june在云加社區(qū)微信群中的分享整理總結(jié)而成(編輯：尾尾)。同時(shí)，june將出席11月16日的TWeb騰訊前端技術(shù)大會(huì)，歡迎現(xiàn)場(chǎng)交流。

大家好，我是來(lái)自騰訊微信小程序團(tuán)隊(duì)的前端開發(fā)工程師：june。小程序作為一種新興地鏈接用戶與服務(wù)的方式，相信大家都或多或少接觸過(guò)。對(duì)于開發(fā)者來(lái)說(shuō)，它是一種類似 Web 但又不同于 Web 的開發(fā)模式，它提供了一套自定義的 API 和文件組織方式，這無(wú)疑帶給開發(fā)者一定的學(xué)習(xí)成本和維護(hù)成本，所以我們也在嘗試能否提供一個(gè)方案來(lái)抹平這個(gè)差異。

接下來(lái)就進(jìn)入我今天要分享的話題：Kbone——微信小程序同構(gòu)方案新思路。本次分享包括四個(gè)部分：背景、方案、應(yīng)用和結(jié)語(yǔ)。

一、Kbone誕生背景

首先我們先進(jìn)入背景部分的介紹。之所以會(huì)有 Kbone 這個(gè)方案出現(xiàn)，源自于一個(gè)需求：微信開放社區(qū)當(dāng)時(shí)只有 Web 端，為了讓信息可以更方便地傳播、分享和使用，希望實(shí)現(xiàn)社區(qū)小程序版，交互體驗(yàn)盡量貼近于 Web 端。

注微信開放社區(qū)鏈接：

https://developers.weixin.qq.com/community/develop/mixflow

此次同構(gòu)到小程序端需要考慮幾個(gè)因素：多端代碼復(fù)用、盡可能支持已有的特性和性能要有保證。其實(shí)最主要的就是要在盡量不改動(dòng)現(xiàn)有代碼的情況下來(lái)完成小程序的開發(fā)。

二、具體方案實(shí)現(xiàn)

接下來(lái)就來(lái)探討下具體方案的實(shí)現(xiàn)。

社區(qū) Web 端是基于 Vue 實(shí)現(xiàn)的，使用了 Vue-router、Vuex 等插件。Vue 想必大家挺熟悉的了，它是市面上一款非常流行的 Web 框架，提供組件化等特性，其原理大致如下：

? ? ? ? ??Vue 模板可以認(rèn)為是一種附加了一些特殊語(yǔ)法的 HTML 片段，一般來(lái)說(shuō)一份 Vue 模板對(duì)應(yīng)一個(gè)組件，在構(gòu)建階段編譯成調(diào)用 Dom 接口的 JS 函數(shù)，調(diào)用此 JS 函數(shù)就會(huì)創(chuàng)建出組件對(duì)應(yīng)的 Dom 樹片段進(jìn)而渲染到瀏覽器上。小程序里是支持運(yùn)行 JS 的，但是這里用到的 Dom 接口和渲染到瀏覽器上的功能小程序不具備，所以無(wú)法直接將 Web 端社區(qū)代碼移植到小程序中。原因就在于小程序為了安全和性能而采用了雙線程的架構(gòu)，運(yùn)行用戶 JS 代碼的邏輯層是一個(gè)純粹的 JSCore，沒(méi)有任何瀏覽器相關(guān)的實(shí)現(xiàn)，這里得想辦法將 Web 端代碼轉(zhuǎn)成小程序代碼。

業(yè)界常見(jiàn)做法：將 Vue 模板直接轉(zhuǎn)成小程序的 WXML 模板

那么問(wèn)題來(lái)了，如何將 Vue 代碼轉(zhuǎn)成小程序代碼？這里先看下業(yè)界常見(jiàn)的做法：將 Vue 模板直接轉(zhuǎn)成小程序的 WXML 模板。

使用做法相當(dāng)于拋棄了瀏覽器中建 Dom 樹的過(guò)程，而是直接交由小程序來(lái)對(duì)模板進(jìn)行編譯創(chuàng)建出小程序的模板樹，進(jìn)而渲染到小程序頁(yè)面中。

一般來(lái)說(shuō)這個(gè)做法對(duì)于普通場(chǎng)景是夠用的，但是對(duì)于一些更復(fù)雜的場(chǎng)景就很不好處理了，比如社區(qū)中的一個(gè)簡(jiǎn)單例子：社區(qū)帖子詳情展示富文本內(nèi)容，點(diǎn)擊內(nèi)容中的圖片可預(yù)覽。

這主要是因?yàn)?Vue 模板和 WXML 模板的語(yǔ)法并不是直接對(duì)等的，Vue 的特性設(shè)計(jì)也和小程序的設(shè)計(jì)無(wú)法劃等號(hào)，這自然就導(dǎo)致了部分 Vue 特性的丟失。比如像 Vue 中的 v-html 指令、ref 獲取 Dom 節(jié)點(diǎn)、過(guò)濾器等就通通用不了。當(dāng)然不止是 Vue 自身的特性，一些原本依賴 Dom/Bom 接口的 Vue 插件也無(wú)法使用，比如 Vue-router 等，而這些正是社區(qū)高度依賴的，在不對(duì)社區(qū)代碼做大范圍改造的話是無(wú)法使用此方案的。

此路不通，那還有其他的方法么？

換個(gè)思路：做一個(gè)適配層

答案是有的，這里我們就得換一種思路來(lái)解決這個(gè)問(wèn)題。回到最初的點(diǎn)上，我們無(wú)法將 Web 端代碼移植到小程序中是因?yàn)樾〕绦驔](méi)有 Dom 接口，那么我們想辦法做出一個(gè)適配層，將這個(gè)差異給抹掉不就行了么？

有了想法就要實(shí)施，仿造出 Dom 接口并不難，事實(shí)上在 Nodejs 端就有人做過(guò)類似的事，比如 jsDom 這個(gè)庫(kù)的實(shí)現(xiàn)，讓我們可以在沒(méi)有真實(shí)瀏覽器環(huán)境下可以對(duì)一些依賴 Dom 接口的 Web 端代碼進(jìn)行測(cè)試。

仿造了 Dom 接口給 Vue 調(diào)用，進(jìn)而創(chuàng)建出了仿造 Dom 樹。根據(jù)前面提到的小程序架構(gòu)，用戶的 JS 代碼是執(zhí)行在邏輯層的，也就是說(shuō)我們創(chuàng)建出的 Dom 樹也是存在與邏輯層的內(nèi)存之中，接下來(lái)要解決的難題是如何將這棵 Dom 樹渲染到小程序頁(yè)面中。

這里需要先簡(jiǎn)單介紹一下小程序的渲染原理：小程序的雙線程架構(gòu)，邏輯層會(huì)執(zhí)行用戶的 JS 代碼進(jìn)而產(chǎn)生一組數(shù)據(jù)，這組數(shù)據(jù)會(huì)發(fā)往視圖層；視圖層接收到數(shù)據(jù)后，結(jié)合用戶的 WXML 模板創(chuàng)建出組件樹，之后小程序再將組件樹渲染出來(lái)。這里的組件樹和 Dom 樹很類似，只是它是由官方內(nèi)置組件或自定義組件拼接而成而不是 Dom 節(jié)點(diǎn)。這里我們能不能將仿造出來(lái)的 Dom 樹映射到小程序的組件樹上？

小程序組件樹是根據(jù) WXML 模板創(chuàng)建出來(lái)的，而仿造 Dom 樹結(jié)構(gòu)是不穩(wěn)定的，我們無(wú)法提前預(yù)知它會(huì)生成什么樣的結(jié)構(gòu)，也就無(wú)法提前準(zhǔn)備后可以描述任意 Dom 樹的 WXML 模板，除非直接將 Vue 模板轉(zhuǎn)換成 WXML 模板，但這樣又繞回前面的問(wèn)題上了。

小程序組件樹中的組件有兩種：內(nèi)置組件和自定義組件，內(nèi)置組件是由官方提供的如 video、map 這樣的組件，而自定義組件是一種支持由用戶利用現(xiàn)有組件自行組裝的組件，能否利用它來(lái)做些什么？

使用 Web 端概念來(lái)做個(gè)簡(jiǎn)單解釋，內(nèi)置組件就像是 div、span 這些 HTML 標(biāo)簽，而自定義組件就像是 Web 中的 Vue 組件。Vue 組件可以將 HTML 標(biāo)簽以及其他的 Vue 組件進(jìn)行組裝，自定義組件同理，主要用于功能模塊的抽象、封裝和復(fù)用。不過(guò)自定義組件有個(gè)很奇妙的特性，它支持自引用，也就是說(shuō)它可以自己引用自己來(lái)進(jìn)行組裝。

自定義組件可以自己引用自己，那么我們就可以利用這個(gè)特性來(lái)進(jìn)行遞歸創(chuàng)建組件，進(jìn)而創(chuàng)建出一棵組件樹：

比如上圖的例子，我們封裝了一個(gè) custom-dom 組件，這個(gè)組件里面也使用了 custom-dom 組件用于渲染子組件。那么只要我們執(zhí)行一下 setData，把 children 數(shù)據(jù)傳遞過(guò)去就可以創(chuàng)建出子組件，子組件本身也是 custom-dom 組件，它同樣可以執(zhí)行這個(gè)邏輯把各自的子組件創(chuàng)建出來(lái)，這樣就實(shí)現(xiàn)了組件的遞歸創(chuàng)建，只要我們擁有完整的 Dom 樹結(jié)構(gòu)，就可以創(chuàng)建出相對(duì)應(yīng)的一棵組件樹。

這里遞歸的終止條件是遇到特定節(jié)點(diǎn)、文本節(jié)點(diǎn)或者孩子節(jié)點(diǎn)為空。然后在創(chuàng)建出組件樹后，將 Dom 節(jié)點(diǎn)和自定義組件實(shí)例進(jìn)行綁定以便后續(xù)的 Dom 更新和操作即可。

如何監(jiān)聽(tīng)用戶操作？

接下來(lái)，如果用戶在界面上進(jìn)行了操作，觸發(fā)了一些事件的話，那么代碼中要如何監(jiān)聽(tīng)這些事件呢？小程序本身有自己的事件系統(tǒng)，它和 Web 端事件系統(tǒng)類似，但是出于以下幾個(gè)原因?qū)е挛覀儫o(wú)法直接使用小程序的事件系統(tǒng)：

小程序支持的事件表現(xiàn)和 Web 端不一致，比如 input 事件在小程序中不可冒泡。

小程序的捕獲冒泡是在 Webview 端，因此邏輯層在整個(gè)捕獲冒泡流程中各個(gè)節(jié)點(diǎn)接收到的事件不是同一個(gè)對(duì)象。

小程序事件對(duì)象和 Web 端事件對(duì)象結(jié)構(gòu)不一樣。

小程序事件的捕獲冒泡以及阻止冒泡等操作必須在 WXML 模板中聲明，無(wú)法使用接口實(shí)現(xiàn)。

小程序本身是基于 Web Component 特性來(lái)實(shí)現(xiàn)的組件體系，其事件來(lái)源只能判定來(lái)自于當(dāng)前 shadow tree 下的哪個(gè)節(jié)點(diǎn)，而不能跨 shadow tree 判斷。

綜上所述，最好的解決方法就是把事件系統(tǒng)也仿造一份，在仿造 Dom 樹上進(jìn)行捕獲冒泡。當(dāng)自定義組件監(jiān)聽(tīng)到用戶的操作后，就將事件發(fā)往仿造 Dom 樹，后續(xù)自定義組件監(jiān)聽(tīng)到的同一個(gè)事件的冒泡就直接忽略。而 Dom 樹接收到事件后，再進(jìn)行捕獲和冒泡，讓事件在各個(gè)節(jié)點(diǎn)觸發(fā)，這樣的話整套體系都可以按照 Web 端的方式進(jìn)行實(shí)現(xiàn)，對(duì)于用戶來(lái)說(shuō)，只管按照 Web 端的用法來(lái)進(jìn)行事件監(jiān)聽(tīng)即可。

重要細(xì)節(jié)一：如何將 Dom 樹傳遞給視圖層？

整套方案的大致思路便是如此，接下來(lái)介紹幾個(gè)實(shí)現(xiàn)過(guò)程中比較重要的細(xì)節(jié)，其一：如何將 Dom 樹傳遞給視圖層？

這其實(shí)就是自定義組件要如何做 setData 的問(wèn)題。我們一開始想到的方式是直接將整棵 Dom 樹傳遞給自定義組件，然后自定義組件在遞歸創(chuàng)建子組件時(shí)一步步透?jìng)飨氯ァ＿@個(gè)做法的好處是一勞永逸，只有在最頂層的自定義組件需要管理 Dom 樹和 setData，其他自定義組件只管接收數(shù)據(jù)進(jìn)行渲染即可，但是這樣也帶了問(wèn)題：每次更新需要做大范圍的 diff，因?yàn)?setData 是從根組件發(fā)起的；當(dāng)遇到一些局部更新時(shí)可能需要 setData 大量的數(shù)據(jù)，也就是會(huì)傳輸一些不必要的數(shù)據(jù)。

那么自然而然的，我們便想到讓每個(gè)自定義組件只 setData 當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)，每個(gè)自定義組件只考慮當(dāng)前綁定的 Dom 節(jié)點(diǎn)，然后創(chuàng)建出子節(jié)點(diǎn)，這樣雖然會(huì)增加 setData 的數(shù)量，但是帶來(lái)的好處便是可以做到最小范圍 diff，同時(shí)每次 setData 的數(shù)據(jù)量也可以降到最小。

細(xì)節(jié)其二：自定義組件實(shí)例的創(chuàng)建其實(shí)是會(huì)有比較大開銷的，有沒(méi)有辦法減少一些自定義組件實(shí)例的創(chuàng)建？

按照先前的構(gòu)想，一個(gè)自定義組件綁定一個(gè) Dom 節(jié)點(diǎn)，所以自定義組件實(shí)例數(shù)量等于 Dom 節(jié)點(diǎn)數(shù)量。

其中一個(gè)思路是對(duì) Dom 節(jié)點(diǎn)進(jìn)行刪減，這個(gè)實(shí)現(xiàn)比較簡(jiǎn)單，只要是不展示在頁(yè)面上的節(jié)點(diǎn)，直接從 Dom 樹上干掉就可以了，這樣自定義組件數(shù)量也會(huì)相應(yīng)減少。

另一個(gè)思路是調(diào)整映射關(guān)系，讓一個(gè)自定義組件綁定多個(gè) Dom 節(jié)點(diǎn)。我們可以對(duì) Dom 樹按照一定規(guī)則進(jìn)行裁剪，拆分成多棵子樹，然后每個(gè)自定義組件管理一棵子樹，這樣的話也可以減少大部分自定義組件的創(chuàng)建。

除此之外，我們可以考慮對(duì)葉子節(jié)點(diǎn)也進(jìn)行一些處理。我們使用自定義組件來(lái)渲染的初衷就是為了可以動(dòng)態(tài)遞歸創(chuàng)建出子節(jié)點(diǎn)，而當(dāng)一個(gè)節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)的情況下，我們就不需要使用自定義組件來(lái)渲染了，所以葉子節(jié)點(diǎn)可以合并到父級(jí)棵子樹中(如上圖的藍(lán)色節(jié)點(diǎn)合并到黃色節(jié)點(diǎn)所在的子樹中)，直接使用 view 內(nèi)置組件來(lái)渲染即可。

當(dāng)然還有其他的一些細(xì)節(jié)，比如 Dom 對(duì)象復(fù)用、對(duì)象延遲創(chuàng)建等等，這里就不一一展開說(shuō)明了，有興趣的朋友可以通過(guò)源碼來(lái)了解。

對(duì)于這個(gè)方案，性能也需要有一定的保證，我們隨機(jī)模擬了一些類似社區(qū)首頁(yè)的 Dom 樹，對(duì)其首次渲染耗時(shí)進(jìn)行測(cè)算，其對(duì)比如下：

可以看到在 500 節(jié)點(diǎn)內(nèi)的兩個(gè)方案本身性能差不多，不過(guò)因?yàn)樽远x組件實(shí)例創(chuàng)建的開銷，在千節(jié)點(diǎn)往上的情況下會(huì)落后于靜態(tài)模板方案，因?yàn)?Kbone 本身是通過(guò)犧牲性能來(lái)?yè)Q取更全面的 Web 端兼容，而通常一個(gè)小程序頁(yè)面的節(jié)點(diǎn)數(shù)在 100-500 這個(gè)區(qū)間浮動(dòng)，因此這個(gè)表現(xiàn)是符合預(yù)期的。

以上就是?Kbone 這個(gè)適配器方案的大致設(shè)計(jì)思路，我們將其歸納為兩個(gè)模塊：仿造接口和自定義組件。正因?yàn)檫@個(gè)方案是通過(guò)提供適配器的方式來(lái)仿造出 Web 環(huán)境，所以用戶代碼不需要做任何魔改，大部分特性都可以繼續(xù)使用不需要被刪減，比如 vue-router、window.location 操作等。

三、具體應(yīng)用效果

方案部分以及介紹完畢，接下來(lái)說(shuō)說(shuō)這個(gè)方案要如何應(yīng)用到我們一開始的背景——微信開放社區(qū)上。

前面有簡(jiǎn)單提到，原本 Web 端代碼是基于 Vue 來(lái)搭建的，其中還用到了諸多插件/庫(kù)，如 Vue-router、Vuex、Markdown-it 等，同時(shí)還支持了服務(wù)端渲染。但是不管 Web 端是怎么實(shí)現(xiàn)的，底層終究是調(diào)瀏覽器的那些接口，所以對(duì)于用戶層面的代碼我們不做任何調(diào)整，只是將瀏覽器那一層替換掉即可。

整個(gè)構(gòu)建流程是基于 Webpack 來(lái)實(shí)現(xiàn)的，使用 Kbone 構(gòu)建出小程序代碼也是基于 Webpack 來(lái)實(shí)現(xiàn)，只需要在原本 Web 端構(gòu)建流程上實(shí)現(xiàn)一個(gè) Webpack 插件，在構(gòu)建原本 Web 端代碼到小程序端時(shí)追加 Kbone 和一些小程序相關(guān)的代碼即可。

在整套方案應(yīng)用的過(guò)程中，肯定也會(huì)有些定制化的需求，比如希望小程序端頭部和 H5 端不同，不同端使用不同的交互設(shè)計(jì)：

我們可以構(gòu)建的時(shí)候就注入環(huán)境變量，在小程序端將 process.env.isMiniprogram 設(shè)為 true，這樣用戶代碼層面可以通過(guò)判斷這個(gè)變量來(lái)判斷不同環(huán)境，進(jìn)而執(zhí)行不同的邏輯。

除此之外，還希望使用小程序的一些特性，比如小程序端支持使用小程序的分享，那么除了上述的環(huán)境變量外，還需要用到小程序的 button 內(nèi)置組件來(lái)實(shí)現(xiàn)分享按鈕。在 Kbone 上可以使用一個(gè)特殊的標(biāo)簽 wx-button 來(lái)表示 button 內(nèi)置組件，在調(diào) Kbone 的仿造 Dom 接口時(shí)會(huì)將其 wx- 前綴的標(biāo)簽識(shí)別成內(nèi)置組件，進(jìn)而進(jìn)行特殊處理。

整個(gè)社區(qū)小程序的功能完善之后，便要思忖一下代碼體積的問(wèn)題，因?yàn)樾〕绦虮旧碛袀€(gè) 2M 限制。縮減代碼體積的方式大家應(yīng)該都了解了很多了，如：壓縮混淆、代碼分割和公共代碼復(fù)用、tree shaking、使用分包等等。

還有就是考慮到小程序端是直接復(fù)用 Web 端代碼，但是并不是所有 Web 端代碼都需要在小程序端做到，那么在處理模塊依賴時(shí)可以做點(diǎn)手腳。因?yàn)槎际褂玫?Webpack 構(gòu)建，所以可以編寫一個(gè) loader，在 import/require 的時(shí)候追加上，它可以根據(jù)前面注入的環(huán)境變量來(lái)判斷要不要將代碼進(jìn)行打包。

這樣就可以很方便地指定哪些代碼不要構(gòu)建到小程序端。

整體實(shí)現(xiàn)出來(lái)的效果如下，左邊是 H5 端，右邊是小程序端：

Web 端鏈接：

https://developers.weixin.qq.com/community/develop/mixflow

小程序碼：

四、總結(jié)

這一整套方案的實(shí)現(xiàn)和應(yīng)用大致如此，其原理并不算復(fù)雜，只是用了另一種思路來(lái)實(shí)現(xiàn)。目前這一套方案即名為 Kbone，現(xiàn)已整理并開源到 GitHub 上：https://github.com/wechat-miniprogram/Kbone。

考慮到這個(gè)方案本身是通過(guò)最底層的適配方式來(lái)完成同構(gòu)，那么除了 Vue 外，它其實(shí)也可以很輕松地移植到其他的 Web 框架上，比如 React、Preact、Omi 等，下面是一些基于這些框架的簡(jiǎn)單 demo：

在上述 GitHub 倉(cāng)庫(kù)內(nèi)也可以找到這些框架的 demo，盡管各個(gè) Web 框架的實(shí)現(xiàn)、語(yǔ)法都有所不同，但畢竟其本質(zhì)上是相同的，最終都會(huì)轉(zhuǎn)化為 Dom 接口調(diào)用來(lái)渲染頁(yè)面。

也正因如此，可以看到?Kbone 這套方案最大的優(yōu)勢(shì)：擴(kuò)展性強(qiáng)、對(duì)各個(gè)特性的支持全面、對(duì)代碼編寫的要求少以及自由度高、不需要魔改 Web 框架的底層實(shí)現(xiàn)，這樣對(duì)于代碼的維護(hù)、升級(jí)也都更為簡(jiǎn)單方便。

我的分享就到這里了，謝謝各位！

五、群內(nèi)QA

Q：目前支持到vue那個(gè)版本?Vue3.0支持嗎？

A：目前主要的測(cè)試用例都是 vue 2.x 版本，大部分特性都能完整使用。vue 3.x 版本的支持在規(guī)劃中，因?yàn)檫€沒(méi)有完整的測(cè)試還不清楚直接上 vue 3.x 版本會(huì)有哪些坑，不過(guò)理論上只要底層仍舊是調(diào)用那些基礎(chǔ)的 dom 接口，那就是支持的。

Q：小程序的插件支持嗎？

A：插件目前暫不支持。

Q：請(qǐng)問(wèn)wxs支持嗎？

A：wxs 目前暫不支持，使用 wxs 有很多情況下就是為了實(shí)現(xiàn)過(guò)濾器和一些簡(jiǎn)單的純函數(shù)句柄，這些 vue 本身就已經(jīng)支持了，就不是很有必要再使用 wxs 了，不然再反向兼容到 Web 端就會(huì)很困難。wxs 響應(yīng)動(dòng)畫? =》 wxs 響應(yīng)事件來(lái)實(shí)現(xiàn)動(dòng)畫

不過(guò) wxs 響應(yīng)動(dòng)畫這塊是一個(gè)性能優(yōu)化點(diǎn)，這個(gè)未來(lái)會(huì)考慮支持的。

Q：小程序原生對(duì)位置經(jīng)緯度的獲取好像不太精準(zhǔn)，有其他好的處理方案嗎？這個(gè)在我畢業(yè)設(shè)計(jì)的答辯中差點(diǎn)翻車。

A：增加了高精度定位的參數(shù)

Q：這塊的實(shí)現(xiàn)對(duì)小程序事件響應(yīng)的性能有影響嗎？「 綜上所述，最好的解決方法就是把事件系統(tǒng)也仿造一份，在仿造 Dom 樹上進(jìn)行捕獲冒泡。當(dāng)自定義組件監(jiān)聽(tīng)到用戶的操作后，就將事件發(fā)往仿造 Dom 樹，后續(xù)自定義組件監(jiān)聽(tīng)到的同一個(gè)事件的冒泡就直接忽略。而 Dom 樹接收到事件后，再進(jìn)行捕獲和冒泡，讓事件在各個(gè)節(jié)點(diǎn)觸發(fā)，這樣的話整套體系都可以按照 Web 端的方式進(jìn)行實(shí)現(xiàn)，對(duì)于用戶來(lái)說(shuō)，只管按照 Web 端的用法來(lái)進(jìn)行事件監(jiān)聽(tīng)即可。」

A：和原生的小程序事件相比會(huì)有一點(diǎn)損耗但影響不大，小程序事件本身也不是直接使用 Web 端的事件冒泡機(jī)制，而是在視圖層的組件樹上自己實(shí)現(xiàn)的一套事件系統(tǒng)進(jìn)行冒泡。kbone 的做法相當(dāng)于把最初的那一個(gè)事件接過(guò)邏輯層來(lái)自己做一遍 Dom 樹上的冒泡，后續(xù)小程序自己的冒泡事件就忽略掉。簡(jiǎn)單來(lái)說(shuō)，相當(dāng)于把冒泡這一套流程從視圖層拿到邏輯層來(lái)做。

Q：小程序開放接口或小程序獨(dú)有的API(例如：授權(quán)，文件操作等)，應(yīng)該如何處理？直接再vue中使用wx.***嗎？

A：是的，小程序環(huán)境的接口直接照常使用即可，比如 wx.xxx 等接口。但是如果要同構(gòu)兼容到 Web 端的話，可能需要判斷一下環(huán)境，通常我們可以在構(gòu)建時(shí)注入一個(gè) process.env.isMiniprogram，這樣在 Vue 代碼里就可以通過(guò)判斷環(huán)境來(lái)做兼容處理。后續(xù)這邊也會(huì)嘗試提供一些兼容兩個(gè)環(huán)境的 API，比如現(xiàn)有的 wx.setStorage 等就可以直接使用 localStorage 來(lái)代替，kbone 底層會(huì)將 localStorage 的實(shí)現(xiàn)轉(zhuǎn)成 wx.setStorage 等 API。

Q：? kbone有開發(fā)交流群或者客服群?jiǎn)?#xff1f;

A：這個(gè)先前也有人提過(guò)，在近期會(huì)提供開發(fā)交流群來(lái)方便開發(fā)者們交流。

近期文章：

飛冰對(duì)于活動(dòng)引擎的可借鑒之處

解析 Chameleon 小程序的運(yùn)行時(shí)性能問(wèn)題

總結(jié)

以上是生活随笔為你收集整理的小程序使用vant-dialog组件内容出不来_微信官方小程序同构新方案Kbone全解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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