多端開發(fā)kbone

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

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

簡(jiǎn)介

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

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

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

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

使用

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

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

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

npm install -g kbone-cli

創(chuàng)建項(xiàng)目：

kbone init my-app

進(jìn)入項(xiàng)目，按照 README.md 的指引進(jìn)行開發(fā)：

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

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

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

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

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

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

• Vue 項(xiàng)目模板
• React 項(xiàng)目模板
• kbone-ui 項(xiàng)目模板
• Preact 項(xiàng)目模板
• Omi 項(xiàng)目模板

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

手動(dòng)配置開發(fā)

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

一般需要補(bǔ)充兩個(gè)配置：

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

點(diǎn)此可以查看具體配置方式和操作流程。

kbone-ui

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

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

文檔

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

社區(qū)

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

選擇

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

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

案例