首發於知曉雲 - 小程序開發快人一步
近日，微信官方開始推廣一個新的多端統一開發工具——Kbone。css
據官方介紹，Kbone 是一個致力於微信小程序和 Web 端同構的解決方案。具體來講，由於微信小程序的底層模型和 Web 端不一樣，因此若是咱們想直接把 Web 端的代碼挪到小程序環境內執行是不可能的。Kbone 的誕生就是爲了解決這個問題，它實現了一個適配器，在適配層裏模擬出了瀏覽器環境，讓 Web 端的代碼能夠不作什麼改動即可運行在小程序裏。html
由於 Kbone 是經過提供適配器的方式來實現同構，因此微信表示其優點有如下幾點：前端
-
大部分流行的前端框架都可以在 Kbone 上運行，好比 Vue、React、Preact 等。vue
-
支持更爲完整的前端框架特性，由於 Kbone 不會對框架底層進行刪改（好比 Vue 中的 v-html 指令、Vue-router 插件）。react
-
提供了經常使用的 dom/bom 接口，讓用戶代碼無需作太大改動即可從 Web 端遷移到小程序端。webpack
-
在小程序端運行時，仍然可使用小程序自己的特性（好比像 live-player 內置組件、分包功能）。ios
-
提供了一些 Dom 擴展接口，讓一些沒法完美兼容到小程序端的接口也有替代使用方案（好比 getComputedStyle 接口）。git
對於這個前端同構框架，知曉雲以前也略有耳聞。咱們比較關注的是官方宣傳的優勢——提供了經常使用的 DOM/BOM 接口，讓用戶代碼無需作太大改動即可從 Web 端遷移到小程序端。github
抱着拉出來溜溜的心態，咱們找了幾個 web 項目，使用 Kbone 框架遷移到小程序端。結果讓我大失所望。web
我總共試了三個項目，其中兩個跑了起來，一個直接放棄。項目一卡在了屬性選擇器和輪播圖上；項目二卡在 css-in-js 上；項目三是後端渲染的模版，這個直接沒法使用。過程當中主要遇到的問題就是樣式。過程細節就省略了，都是淚。下面是我這幾回嘗試總結下來的幾個要點與問題。
1、配置
這個按照官方文檔配置，問題不大。須要注意如下幾個問題：
-
若是在小程序中不想把所有內容都在一個頁面的渲染的話，webpack 須要配置多入口；
-
eval 相關的 devtool 不能用，例如 cheap-module-eval-source-map；
-
css 樣式必須抽離出 css 文件。
2、axios 在微信小程序中使用
使用對應的 adapt，問題不大。使用如下代碼解決：
import axios from 'axios'import mpAdapter from 'axios-miniprogram-adapter' axios.defaults.adapter = mpAdapter
3、DOM/BOM 接口的兼容性問題
官方提供了 DOM/BOM 的拓展接口，問題不大。這次遇到了如下兩個問題：
1. 兼容性。例如 Event 對象以瀏覽器提供接口並不徹底一致，使用如下代碼兼容（只是舉例說明，並未作徹底的兼容測試）：
// Eventconst RawEvent = Eventconst CustomEvent = function(...args) { if (typeof args[0] === 'string') { return new RawEvent({ name: args[0], target: null, }) } return new RawEvent(...args)}Event = CustomEvent
2. 某些接口須要本身實現，例如：
window.$$extend('element', { insertAdjacentHTML: () => {},})
4、樣式
遷移應用到小程序，最大的問題應該就是樣式。這個也是因爲微信小程序自身的限制。除非小程序自己支持，不然框架也是無能爲力的。主要有如下幾個問題：
-
不支持「屬性選擇器」以及其餘微信小程序不支持的選擇器；
-
小程序端某些組件的樣式問題，例如，input 組件在渲染成 view + 自定義組件，樣式需作特殊處理；
-
部分 css-in-js 框架不支持抽離 css 文件，沒法在小程序上使用。
5、頁面鑑權
因爲小程序端的頁面模版是前端渲染的，沒法經過後端對頁面鑑權，也沒法 redirect。
6、後端渲染
後端渲染沒法使用。我遷移的第三個應用，因爲 SEO 的須要，採用「後端渲染 + vue（非同構）」的技術棧。一樣，因爲小程序端的模版是前端渲染出來的，沒法遷移該項目。
7、調試
這個問題有點大。前面的問題，能夠經過改代碼或新項目經過技術選型避開。可是在開發的過程當中，沒有調試工具，這是個災難。目前惟一能用的只有 wxml 節點樹頁面。可是這個的問題也很大。絕大部分的元素都渲染成了 view，而且每一個節點都差很少。例以下圖，這一堆東西，看到就頭疼。
雖然舊項目遷移很不順利，可是使用 Kbone 開發新項目，相對來講，體驗好不少，也順利不少。咱們直接使用了官方的 cli 工具初始化項目，並開發了「知曉雲 SDK demo」應用（源碼）。界面以下圖：
開發過程當中遇到的阻礙，也是「樣式」和「調試工具」的問題。這裏跟你們介紹一下，Kbone 框架接入知曉雲後端雲服務 SDK 的步驟：
1. 安裝 SDK npm 包。
npm install minapp-sdk 或 yarn add minapp-sdk
2. package.josn 裏添加 alias。
{
…
「alias」: {
「baas」: 「minapp-sdk/lib/web」,
},
}
3. scripts/webpack.mp.config.js 裏添加 alias。
{ … resolve: { … alias: { baas: 「minapp-sdk/lib/index」, }, ... }, ...}
4. 在須要用的 sdk 的文件中引入 「baas」模塊。
import baas from ‘baas’
完成了以上幾步，便可在不一樣平臺中引入對應的 sdk。
結論：
從咱們目前的體驗來看，Kbone 能夠幫助開發者將 Web 端的代碼編譯到微信小程序端，這爲開發者節省了時間；但另外一方面，新的框架不但有學習成本，並且同構框架不免會遇到兼容性問題。
打個比方，項目維護的工做量並不是是簡單的 2 - 1 = 1，結果多是 1.一、1.2 或 1.3。在咱們看來，若是超過了 1.5 那幾乎沒有使用的必要了。因爲沒作完整的體驗，而且框架也在迭代開發中，這裏並不能下結論。
另外，因爲微信小程序自身的緣由，框架對樣式的支持也是有限制的，這還得靠開發者本身避開。
所以，咱們建議，Kbone 仍是適合從頭開始作的新項目，若是是遷移舊項目，必定要調研清楚以前的技術棧是否支持 Kbone。畢竟 Kbnoe 只是提供了一個「類 web 的 JS 執行環境」，而一個項目可否跑正常起來還有其餘的不少因素，前端的技術棧也是五花八門。
另外還有一個問題可能，若是使用了 Kbone，以前 Web 端使用的第三方組件頗有可能不能正常工做了。多是 JS 問題，也多是樣式問題。
關於 Kbone 框架就介紹到這裏啦，若是你須要獲取文中所說起的源碼，請在知曉雲公衆號後臺回覆「Kbone」。