Kbone多端方案分析

本文由 IMWeb 首發於 IMWeb 社區網站 imweb.io。點擊閱讀原文查看 IMWeb 社區更多精彩文章。

這篇分析，可能微信的同窗來寫會更合適。這裏只是作了次體驗，記錄體驗中遇到的問題以及一些想法。

簡介

kbone主要提供了編寫 web端代碼，編譯到小程序端的能力。web端採用的框架是 vue，而後提供一個適配層在小程序端適配 web端代碼。詳細介紹參考：https://github.com/wechat-miniprogram/kbone/blob/develop/README.md

原理

build階段

kbone提供了一個 webpack插件，該插件在 vueLoaderPlugin處理後繼續處理 chunk，添加小程序端特定方法的封裝，以及 window和 document的注入，小程序端配置的注入。

runtime階段

代碼運行時，咱們在 web使用的 dom和 bom， kbone提供了 miniprogram-render這個適配層來兼容，包括 cookie， history， storage等，這些 api的實現大多數都是基於事件機制。那麼在小程序端，代碼是如何接入適配層的？kbone實現了自定義組件 wx-component，該組件的實如今 miniprogram-render這個包，在 web端，該組件呈現爲 web component，小程序端就是一個自定義組件 element。該組件進行節點渲染的邏輯參考https://github.com/wechat-miniprogram/kbone/blob/develop/packages/miniprogram-element/src/util/tool.js#L33

對比其餘框架

這裏不作詳細對比， taro， mpvue， wepy等框架對比，網上不少文章能夠參考。相比較於這些多端框架， kbone的出發點不同，多是歷史緣由， kbone的多端嘗試採用了 vue而不是 react，而後提供適配層來支持 dom和 bom等，讓小程序端儘可能能使用 web端的能力，目標也只是兩個端。其餘框架出發點是多端，按約定的開發模式編譯到各個端不一樣的代碼，各個端提供一個運行時來保證代碼的正確運行，這些多端框架的主要限制仍是框架自己。

組件適配

上面提到的大多數組件都是經過 wx-component來進行兼容，對於某些 dom組件到小程序組件的直接映射，最近 kbone也提供了支持

div->view

input->input

ttextarea->textarea

video->video

若是咱們咱們在 web端寫的某些 dom標籤，小程序端不支持， kbone會直接將其轉爲 view，好比小程序端的 text標籤，測試發現 wx-component尚未支持，使用 span替換後，在小程序端表現爲 view。

從 web轉到小程序後，主要使用的仍是 web端能力。有些小程序端標籤特有的屬性， kbone轉換後會丟失。好比 image標籤， mode屬性在小程序端使用的，而且image必須設置高度才能在小程序端表現正常， web端設置寬度後，高度是能夠自適應的。

樣式兼容

處理特定組件表現兩端稍有點不同，另外一個問題就是樣式的覆蓋了。kbone轉換後，會內置一套 h5-xxx的樣式，來適配他的自定義組件，可是編譯後這些樣式的優先級有點高，會覆 蓋咱們業務裏的樣式，這個應該是他提供的 webpack插件處理的問題。使用 kbone開發時能夠注意下這個問題。

實戰體驗

把以前作的一個小程序活動頁採用 kbone簡單實現了下，樣式直接複用以前小程序端的樣式，效果以下

H5

小程序

體驗過程當中的幾個問題

上面分析過程當中大體也提到了， text組件採用 span標籤編譯成 view才能展現，image組件，在 web端，採用 <wx-componentbehavior="image"src=""/>不生效，直接使用img標籤代替，不過 mode等 image組件特有屬性不會被編譯過來，圖片得設置高度，否則小程序端表現有點不正常，能夠見上圖。樣式覆蓋問題，見上圖課程塊的間隙。這裏只是一個簡單的活動頁，可能還有其餘坑還沒踩到，踩到的同窗能夠交流下。

開發體驗

如何接入 kbone？對於已有的小程序項目，不建議直接接入。kbone編譯到小程序端會帶來 vue-runtime，無形增長了包的體積， wxs文件在 web端使用不了，以前封裝的小程序端的公共方法，須要從新實現一遍。包括現有小程序端狀態，如何與轉換後的狀態共享通訊的問題，都須要好好考慮。

若是是新項目，或者活動頁，咱們仍是能夠嘗試用 kbone來嚐鮮的，畢竟 kbone官方已經開始投入了，後面確定會推廣。除了上面提到的一些坑，咱們還須要考慮用戶體驗。採用 kbone的方式，在 web端，路由採用 vue-router，編譯到小程序端後，會發現頁面間的跳轉和 web端無異，由於咱們就只有一個頁面，跳路由只是視圖的切換，不會有小程序端切路由的原生效果了。若是咱們也想有小程序端原生效果呢？也能夠辦到的，在 web端， webpack的 entry加入多個打包路口，採用多頁的方式，而不是單頁路由，跳轉的時候採用 location的 api，該 API在小程序端實現兼容了 tabBar跳轉以及其餘頁面跳轉， webview跳轉也作了兼容。採用該方案進行路由後，可想而之， web端咱們應用的全局狀態，就不能採用相似 vuex這樣的狀態管理工具了，可能會藉助 storage或者其餘的方法，這個我暫時還沒想到。

那麼怎麼開始開發？官方已經提供了多個 demo供咱們參考。不過這些 demo並非開箱即用的，咱們須要在官方提供的 webpack配置文件里加入一些開發配置，如 devServer等，後面能夠基於官方配置整理一套開發配置出來，這件事 kbone也在作了， kbone倉庫下有個 vue-cli-plugin-kbone包，官方推出後，後面直接使用 vue cli，開發體驗可能會更好。

總結

儘管 kbone目前還不夠完善，不太小程序團隊也持續在推動，有官方的支持，相信 kbone會發展起來。

能夠踩坑，值得一試！