微信小程式多端框架 kbone 開源
- 2020 年 3 月 9 日
- 筆記
適用場景
kbone 是一個致力於微信小程式和 Web 端同構的解決方案。
微信小程式的底層模型和 Web 端不同，我們想直接把 Web 端的程式碼挪到小程式環境內執行是不可能的。kbone 的誕生就是為了解決這個問題，它實現了一個適配器，在適配層里模擬出了瀏覽器環境，讓 Web 端的程式碼可以不做什麼改動便可運行在小程式里。這樣，我們就可以藉助 kbone 快速實現 Web 項目轉化為微信小程式項目。
方案實現
方案設計有如下幾個前提：
- 為了更好的復用組件，儘可能完整的支援 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 介面）。
不是所有的方案都是無懈可擊的，就像每個人都有優缺點，kbone 也不例外。
kbone 是使用一定的性能損耗來換取更為全面的 Web 端特性支援。
開源交流
我們期望通過 kbone 開源，能夠幫助更多有多端需求的項目解決實際問題，也希望更好的完善 kbone 本身，如果你對 kbone 感興趣，歡迎提出 Issue 和 PR ！關於Kbone你有什麼使用問題或建議，歡迎訪問Kbone社區主頁發帖交流（PC網頁端可發帖）
Github 開源地址：
https://github.com/Tencent/kbone
（點擊文末閱讀原文直接訪問）
請給 kbone 一個 Star !
歡迎提出你的 issue 和 PR！
中國鏡像地址：
https://git.code.tencent.com/Tencent_Open_Source/kbone
（登錄後才能訪問公開項目）
騰訊工蜂源碼系統為開源開發者提供完整、最新的騰訊開源項目中國鏡像
