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 上；項目三是後端渲染的模版，這個直接無法使用。過程中主要遇到的問題就是樣式。過程細節就省略了，都是淚。下面是我這幾次嘗試總結下來的幾個要點與問題。

一、配置

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

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

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

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

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

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

• 兼容性。例如 Event 對象以瀏覽器提供接口並不完全一致，使用以下代碼兼容（只是舉例說明，並未做完全的兼容測試）：
  
• 某些接口需要自己實現，例如：
  

四、樣式

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

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

五、頁面鑑權

由於小程序端的頁面模版是前端渲染的，無法通過後端對頁面鑑權，也無法 redirect。

六、後端渲染

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

七、調試

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

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

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

1. 安裝 SDK npm 包。

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

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

4. 在需要用的 sdk 的文件中引入 「baas」模塊。

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

結論：

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

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

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

因此，我們建議，Kbone 還是適合從頭開始做的新項目，如果是遷移舊項目，一定要調研清楚之前的技術棧是否支持 Kbone。畢竟 Kbnoe 只是提供了一個「類 web 的 JS 執行環境」，而一個項目能否跑正常起來還有其他的很多因素，前端的技術棧也是五花八門。

另外還有一個問題可能，如果使用了 Kbone，之前 Web 端使用的第三方組件很有可能不能正常工作了。可能是 JS 問題，也可能是樣式問題。