微信小程序官方開源框架 kbone

來源：https://github.com/Tencent/kbone

現在的微信小程序依然十分火熱，今天就和大家分享一下這個由官方出品的小程序框架——kbone。這個框架其實已經發布很久了，但是知道的人依然不多。

微信小程序開發過程中，許多開發者會遇到小程序與 Web 端一起的需求，但是微信小程序的底層模型和 Web 端不同，我們想直接把 Web 端的代碼挪到小程序環境內執行是不可能的。爲了解決這個問題，微信小程序推出了同構解決方案 kbone。

kbone 方案設計有如下幾個前提：

爲了更好的複用組件，儘可能完整的支持 Web 端的特性
在小程序端的渲染結果要儘可能接近 Web 端 h5 頁面

所以，與其他同構框架不同，kbone 是以適配器的方式來支持的。

適配器包含兩部分：負責提供 dom/bom api 的 js 庫和負責渲染的自定義組件，也就是 kbone 中的 miniprogram-render 和 miniprogram-element，可以看到 kbone 最終生成的小程序代碼裏會依賴這兩個 npm 包。除此之外還需要一個 webpack 插件來根據原始的 Web 端源碼生成小程序代碼，因爲小程序代碼包和 Web 端的代碼不同，它有固定的結構，而這個插件就是 mp-webpack-plugin。

miniprogram-render、miniprogram-element 和 mp-webpack-plugin 這三個包即是 kbone 的核心。

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

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

# 使用方式

爲了可以讓開發者可以更自由地進行項目的搭建，微信小程序提供了三種使用方式，這裏給大家介紹其中一種：

npm install -g kbone-cli

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

創建項目：

kbone init my-app

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

// 開發小程序端
npm run mp
// 開發 Web 端
npm run web
// 構建 Web 端
npm run build

剩餘兩種方式是使用模板快速開發和手動配置開發，感興趣的可以到 GitHub 上查看。

目前，kbone 已經在 GitHub 上已經標星 3.9K，384 個 Fork。

GitHub 地址：https://github.com/Tencent/kbone

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/939buQLh--zwuLew2P1ejA

猜你喜歡