Kbone多端方案分析

時間 2019-12-08

標籤 kbone 多端方案分析简体版

原文原文鏈接

本文做者：IMWeb IMWeb團隊原文出處：IMWeb社區未經贊成，禁止轉載vue

這篇分析，可能微信的同窗來寫會更合適。這裏只是作了次體驗，記錄體驗中遇到的問題以及一些想法。react

簡介

kbone主要提供了編寫web端代碼，編譯到小程序端的能力。web端採用的框架是vue，而後提供一個適配層在小程序端適配web端代碼。詳細介紹參考：github.com/wechat-mini…webpack

原理

build階段

kbone提供了一個webpack插件，該插件在vueLoaderPlugin處理後繼續處理chunk，添加小程序端特定方法的封裝，以及window和document的注入，小程序端配置的注入。git

runtime階段

代碼運行時，咱們在web使用的dom和bom，kbone提供了miniprogram-render這個適配層來兼容，包括cookie，history，storage等，這些api的實現大多數都是基於事件機制。那麼在小程序端，代碼是如何接入適配層的？kbone實現了自定義組件wx-component，該組件的實如今miniprogram-render這個包，在web端，該組件呈現爲web component，小程序端就是一個自定義組件element。該組件進行節點渲染的邏輯參考https://github.com/wechat-miniprogram/kbone/blob/develop/packages/miniprogram-element/src/util/tool.js#L33github

對比其餘框架

這裏不作詳細對比，taro，mpvue，wepy等框架對比，網上不少文章能夠參考。相比較於這些多端框架，kbone的出發點不同，多是歷史緣由，kbone的多端嘗試採用了vue而不是react，而後提供適配層來支持dom和bom等，讓小程序端儘可能能使用web端的能力，目標也只是兩個端。其餘框架出發點是多端，按約定的開發模式編譯到各個端不一樣的代碼，各個端提供一個運行時來保證代碼的正確運行，這些多端框架的主要限制仍是框架自己。web

組件適配

上面提到的大多數組件都是經過wx-component來進行兼容，對於某些dom組件到小程序組件的直接映射，最近kbone也提供了支持vue-router

div -> viewvuex

input -> inputvue-cli

ttextarea -> textarea小程序

video -> video

若是咱們咱們在web端寫的某些dom標籤，小程序端不支持，kbone會直接將其轉爲view，好比小程序端的text標籤，測試發現wx-component尚未支持，使用span替換後，在小程序端表現爲view。

從web轉到小程序後，主要使用的仍是web端能力。有些小程序端標籤特有的屬性，kbone轉換後會丟失。好比image標籤，mode屬性在小程序端使用的，而且image必須設置高度才能在小程序端表現正常，web端設置寬度後，高度是能夠自適應的。

樣式兼容

處理特定組件表現兩端稍有點不同，另外一個問題就是樣式的覆蓋了。kbone轉換後，會內置一套h5-xxx的樣式，來適配他的自定義組件，可是編譯後這些樣式的優先級有點高，會覆蓋咱們業務裏的樣式，這個應該是他提供的webpack插件處理的問題。使用kbone開發時能夠注意下這個問題。

實戰體驗

把以前作的一個小程序活動頁採用kbone簡單實現了下，樣式直接複用以前小程序端的樣式，效果以下

小程序

體驗過程當中的幾個問題

上面分析過程當中大體也提到了，text組件採用span標籤編譯成view才能展現，image組件，在web端，採用<wx-component behavior="image" src="" />不生效，直接使用img標籤代替，不過mode等image組件特有屬性不會被編譯過來，圖片得設置高度，否則小程序端表現有點不正常，能夠見上圖。樣式覆蓋問題，見上圖課程塊的間隙。這裏只是一個簡單的活動頁，可能還有其餘坑還沒踩到，踩到的同窗能夠交流下。

開發體驗

如何接入kbone？對於已有的小程序項目，不建議直接接入。kbone編譯到小程序端會帶來vue-runtime，無形增長了包的體積，wxs文件在web端使用不了，以前封裝的小程序端的公共方法，須要從新實現一遍。包括現有小程序端狀態，如何與轉換後的狀態共享通訊的問題，都須要好好考慮。

若是是新項目，或者活動頁，咱們仍是能夠嘗試用kbone來嚐鮮的，畢竟kbone官方已經開始投入了，後面確定會推廣。除了上面提到的一些坑，咱們還須要考慮用戶體驗。採用kbone的方式，在web端，路由採用vue-router，編譯到小程序端後，會發現頁面間的跳轉和web端無異，由於咱們就只有一個頁面，跳路由只是視圖的切換，不會有小程序端切路由的原生效果了。若是咱們也想有小程序端原生效果呢？也能夠辦到的，在web端，webpack的entry加入多個打包路口，採用多頁的方式，而不是單頁路由，跳轉的時候採用location的api，該API在小程序端實現兼容了tabBar跳轉以及其餘頁面跳轉，webview跳轉也作了兼容。採用該方案進行路由後，可想而之，web端咱們應用的全局狀態，就不能採用相似vuex這樣的狀態管理工具了，可能會藉助storage或者其餘的方法，這個我暫時還沒想到。

那麼怎麼開始開發？官方已經提供了多個demo供咱們參考。不過這些demo並非開箱即用的，咱們須要在官方提供的webpack配置文件里加入一些開發配置，如devServer等，後面能夠基於官方配置整理一套開發配置出來，這件事kbone也在作了，kbone倉庫下有個vue-cli-plugin-kbone包，官方推出後，後面直接使用vue cli，開發體驗可能會更好。