Kbone 框架快速上手：把 Web 端代碼直接移植到小程序的工具是否好用？

做者：張澤栓
首發於知曉雲公衆號，閱讀原文

近日，微信官方開始推廣一個新的多端統一開發工具——Kbone。

據官方介紹，Kbone 是一個致力於微信小程序和 Web 端同構的解決方案。具體來講，由於微信小程序的底層模型和 Web 端不一樣，因此若是咱們想直接把 Web 端的代碼挪到小程序環境內執行是不可能的。Kbone 的誕生就是爲了解決這個問題，它實現了一個適配器，在適配層裏模擬出了瀏覽器環境，讓 Web 端的代碼能夠不作什麼改動即可運行在小程序裏。

由於 kbone 是經過提供適配器的方式來實現同構，因此微信表示其優點有如下幾點：

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

對於這個前端同構框架，知曉雲以前也略有耳聞。咱們比較關注的是官方宣傳的優勢——提供了經常使用的 DOM/BOM 接口，讓用戶代碼無需作太大改動即可從 Web 端遷移到小程序端。

抱着拉出來溜溜的心態，咱們找了幾個 web 項目，使用 Kbone 框架遷移到小程序端。結果讓我大失所望。

我總共試了三個項目，其中兩個跑了起來，一個直接放棄。項目一卡在了屬性選擇器和輪播圖上；項目二卡在 css-in-js 上；項目三是後端渲染的模版，這個直接沒法使用。過程當中主要遇到的問題就是樣式。過程細節就省略了，都是淚。下面是我這幾回嘗試總結下來的幾個要點與問題。

1、配置

這個按照官方文檔配置，問題不大。須要注意如下幾個問題：

• 若是在小程序中不想把所有內容都在一個頁面的渲染的話，webpack 須要配置多入口；
• eval 相關的 devtool 不能用，例如 cheap-module-eval-source-map；
• css 樣式必須抽離出 css 文件。

2、axios 在微信小程序中使用

使用對應的 adapt，問題不大。使用如下代碼解決：

3、DOM/BOM 接口的兼容性問題

官方提供了 DOM/BOM 的拓展接口，問題不大。這次遇到了如下兩個問題：

一、兼容性。例如 Event 對象以瀏覽器提供接口並不徹底一致，使用如下代碼兼容（只是舉例說明，並未作徹底的兼容測試）：

二、某些接口須要本身實現，例如：

4、樣式

遷移應用到小程序，最大的問題應該就是樣式。這個也是因爲微信小程序自身的限制。除非小程序自己支持，不然框架也是無能爲力的。主要有如下幾個問題：

• 不支持「屬性選擇器」以及其餘微信小程序不支持的選擇器；
• 小程序端某些組件的樣式問題，例如，input 組件在渲染成 view + 自定義組件，樣式需作特殊處理；
• 部分 css-in-js 框架不支持抽離 css 文件，沒法在小程序上使用。

5、頁面鑑權

因爲小程序端的頁面模版是前端渲染的，沒法經過後端對頁面鑑權，也沒法 redirect。

6、後端渲染

後端渲染沒法使用。我遷移的第三個應用，因爲 SEO 的須要，採用「後端渲染 + vue（非同構）」的技術棧。一樣，因爲小程序端的模版是前端渲染出來的，沒法遷移該項目。

7、調試

這個問題有點大。前面的問題，能夠經過改代碼或新項目經過技術選型避開。可是在開發的過程當中，沒有調試工具，這是個災難。目前惟一能用的只有 wxml 節點樹頁面。可是這個的問題也很大。絕大部分的元素都渲染成了 view，而且每一個節點都差很少。例以下圖，這一堆東西，看到就頭疼。

雖然舊項目遷移很不順利，可是使用 Kbone 開發新項目，相對來講，體驗好不少，也順利不少。咱們直接使用了官方的 cli 工具初始化項目，並開發了「知曉雲 SDK demo」應用（源碼）。界面以下圖：

開發過程當中遇到的阻礙，也是「樣式」和「調試工具」的問題。這裏跟你們介紹一下，Kbone 框架接入知曉雲後端雲服務 SDK 的步驟：
一、安裝 SDK npm 包。

npm install minapp-sdk 或 yarn add minapp-sdk
二、package.josn 裏添加 alias。

三、scripts/webpack.mp.config.js 裏添加 alias。

四、在須要用的 sdk 的文件中引入 「baas」模塊。

完成了以上幾步，便可在不一樣平臺中引入對應的 sdk。

結論：

從咱們目前的體驗來看，Kbone 能夠幫助開發者將 Web 端的代碼編譯到微信小程序端，這爲開發者節省了時間；但另外一方面，新的框架不但有學習成本，並且同構框架不免會遇到兼容性問題。

打個比方，項目維護的工做量並不是是簡單的 2 - 1 = 1，結果多是 1.一、1.2 或 1.3。在咱們看來，若是超過了 1.5 那幾乎沒有使用的必要了。因爲沒作完整的體驗，而且框架也在迭代開發中，這裏並不能下結論。

另外，因爲微信小程序自身的緣由，框架對樣式的支持也是有限制的，這還得靠開發者本身避開。

所以，咱們建議，Kbone 仍是適合從頭開始作的新項目，若是是遷移舊項目，必定要調研清楚以前的技術棧是否支持 Kbone。畢竟 Kbnoe 只是提供了一個「類 web 的 JS 執行環境」，而一個項目可否跑正常起來還有其餘的不少因素，前端的技術棧也是五花八門。

另外還有一個問題可能，若是使用了 Kbone，以前 Web 端使用的第三方組件頗有可能不能正常工做了。多是 JS 問題，也多是樣式問題。

---

關於 Kbone 框架就介紹到這裏啦，若是你須要獲取文中所說起的源碼，請在知曉雲公衆號後臺回覆「Kbone」。