多端開發(fā)kbone

多端統(tǒng)一開發(fā)工具——kbone

kbone 是一個致力于微信小程序和 Web 端同構(gòu)的解決方案。

簡介

微信小程序的底層模型和 Web 端不同，我們想直接把 Web 端的代碼挪到小程序環(huán)境內(nèi)執(zhí)行是不可能的。kbone 的誕生就是為了解決這個問題，它實現(xiàn)了一個適配器，在適配層里模擬出了瀏覽器環(huán)境，讓 Web 端的代碼可以不做什么改動便可運行在小程序里。

這里有個簡單的代碼片段：https://developers.weixin.qq.com/s/R9Hm0Qm67Acd，可以使用開發(fā)者工具打開看看效果。

因為 kbone 是通過提供適配器的方式來實現(xiàn)同構(gòu)，所以它的優(yōu)勢很明顯：

• 大部分流行的前端框架都能夠在 kbone 上運行，比如 Vue、React、Preact 等。
• 支持更為完整的前端框架特性，因為 kbone 不會對框架底層進行刪改（比如 Vue 中的 v-html 指令、Vue-router 插件）。
• 提供了常用的 dom/bom 接口，讓用戶代碼無需做太大改動便可從 Web 端遷移到小程序端。
• 在小程序端運行時，仍然可以使用小程序本身的特性（比如像 live-player 內(nèi)置組件、分包功能）。
• 提供了一些 Dom 擴展接口，讓一些無法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。

使用

為了可以讓開發(fā)者可以更自由地進行項目的搭建，以下提供了三種方式，任選其一即可：

使用 kbone-cli 快速開發(fā)

對于新項目，可以使用 kbone-cli 來創(chuàng)建項目，首先安裝 kbone-cli:

npm install -g kbone-cli

創(chuàng)建項目：

kbone init my-app

進入項目，按照 README.md 的指引進行開發(fā)：

// 開發(fā)小程序端
npm run mp

// 開發(fā) Web 端
npm run web

// 構(gòu)建 Web 端
npm run build

PS：項目基于 webpack 構(gòu)建，關(guān)于 webpack 方面的配置可以點此查看，而關(guān)于小程序構(gòu)建相關(guān)的詳細(xì)配置細(xì)節(jié)可以參考此文檔。

使用模板快速開發(fā)

除了使用 kbone-cli 外，也可以直接將現(xiàn)有模板 clone 下來，然后在模板基礎(chǔ)上進行開發(fā)改造：

• Vue 項目模板
• React 項目模板
• kbone-ui 項目模板
• Preact 項目模板
• Omi 項目模板

項目 clone 下來后，按照項目中 README.md 的指引進行開發(fā)。

手動配置開發(fā)

此方案基于 webpack 構(gòu)建實現(xiàn)，如果你不想要使用官方提供的模板，想要更靈活地搭建自己的項目，又或者是想對已有的項目進行改造，則需要自己補充對應(yīng)配置來實現(xiàn) kbone 項目的構(gòu)建。

一般需要補充兩個配置：

• 構(gòu)建到小程序代碼的 webpack 配置
• 使用 webpack 構(gòu)建中使用到的特殊插件 mp-webpack-plugin 配置

點此可以查看具體配置方式和操作流程。

kbone-ui

kbone-ui 是一個能同時支持 小程序(kbone) 和 vue 框架開發(fā)的多端 UI 庫。

• 即可以基于 kbone 同時開發(fā)小程序和 H5，也可以單獨使用開發(fā) H5 應(yīng)用。
• 支持以 Vue 語法來支持 H5 端和小程序端運行
• 對齊 微信weui 樣式組件

文檔

更為詳細(xì)的說明和指引，可點擊查看文檔。

社區(qū)

此方案雖然將整個 Web 端框架包含進來并提供了適配層，但是也不是銀彈，無法滿足所有場景，具體限制可參考問題文檔。使用相關(guān)問題可在 Kbone社區(qū) 發(fā)帖。如果還遇到其他問題，可在 issue 中反饋。

選擇

業(yè)內(nèi)其實已經(jīng)出現(xiàn)了很多關(guān)于同構(gòu)的解決方案了，每個方案都有自己的優(yōu)劣，不存在能夠完美解決所有問題的方案。kbone 也一樣，它的優(yōu)勢在上面提到過，而它的不足也是它的實現(xiàn)原理帶來的。kbone 是使用一定的性能損耗來換取更為全面的 Web 端特性支持。

所以關(guān)于性能方面，如果你對小程序的性能特別苛刻，建議直接使用原生小程序開發(fā)；如果你的頁面節(jié)點數(shù)量特別多（通常在 1000 節(jié)點以上），同時還要保證在節(jié)點數(shù)無限上漲時仍然有穩(wěn)定的渲染性能的話，可以嘗試一下業(yè)內(nèi)采用靜態(tài)模板轉(zhuǎn)譯的方案；其他情況就可以直接采用 kbone 了。

案例