介紹

最近在琢磨一些小程序開發和移動web開發，偶然間在Github上看到了這樣一個項目——kbone，一個致力於微信小程序和 Web 端同構的解決方案。微信小程序的底層模型和 Web 端不同，我們想直接把 Web 端的代碼挪到小程序環境內執行是不可能的。kbone 的誕生就是為了解決這個問題，它實現了一個適配器，在適配層里模擬出了瀏覽器環境，讓 Web 端的代碼可以不做什麼改動便可運行在小程序里。

Github和文檔

https://github.com/Tencent/kbone

https://wechat-miniprogram.github.io/kbone/docs/

kbone的優勢

因為 kbone 是通過提供適配器的方式來實現同構，所以它的優勢很明顯：

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

使用

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

使用 kbone-cli 快速開發

對於新項目，可以使用 kbone-cli 來創建項目，首先安裝 kbone-cli:

npm install -g kbone-cli

創建項目：

kbone init my-app

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

// 開發小程序端
npm run mp

// 開發 Web 端
npm run web

// 構建 Web 端
npm run build

使用模板快速開發

除了使用 kbone-cli 外，也可以直接將現有模板 clone 下來，然後在模板基礎上進行開發改造：

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

Omi是騰訊前端跨框架跨平台框架

手動配置開發

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

一般需要補充兩個配置：

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

詳細的配置可以查看官方文檔

kbone-ui

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

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

總結

Web和小程序同構的解決方案有很多，比如之前有介紹過的uni-app，京東的taro都是非常成熟的解決方案，但是任何方案都會有其優勢也都不能完全完美的解決所有問題，各有優劣，選擇一個比較適合自己項目的方案才是最好的！