kbone 是什么？
kbone 是一個(gè)致力于微信小程序和 Web 端同構(gòu)的解決方案。
該框架于2020-02-26開(kāi)源，于2020-03-26公測(cè)。
微信開(kāi)放社區(qū)小程序是使用Kbone官方框架編寫(xiě)的小程序。
簡(jiǎn)介
微信小程序的底層模型和 Web 端不同，我們想直接把 Web 端的代碼挪到小程序環(huán)境內(nèi)執(zhí)行是不可能的。kbone 的誕生就是為了解決這個(gè)問(wèn)題，它實(shí)現(xiàn)了一個(gè)適配器，在適配層里模擬出了瀏覽器環(huán)境，讓 Web 端的代碼可以不做什么改動(dòng)便可運(yùn)行在小程序里。
簡(jiǎn)單來(lái)說(shuō)，使用這個(gè)框架寫(xiě)一份代碼，并進(jìn)行一些配置，就可以在運(yùn)行時(shí)渲染在web和小程序兩端。
優(yōu)勢(shì)
- 大部分流行的前端框架都能夠在 kbone 上運(yùn)行，比如 Vue、React、Preact 等。
- 支持更為完整的前端框架特性，因?yàn)?kbone 不會(huì)對(duì)框架底層進(jìn)行刪改（比如 Vue 中的 v-html 指令、Vue-router 插件）。
- 提供了常用的 dom/bom 接口，讓用戶代碼無(wú)需做太大改動(dòng)便可從 Web 端遷移到小程序端。
- 在小程序端運(yùn)行時(shí)，仍然可以使用小程序本身的特性（比如像 live-player 內(nèi)置組件、分包功能）。
- 提供了一些 Dom 擴(kuò)展接口，讓一些無(wú)法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。
- Webpack與Kbone是強(qiáng)耦合的，開(kāi)發(fā)需借助Webpack提供的基本依賴
快速上手
使用 kbone-cli 快速開(kāi)發(fā)
對(duì)于新項(xiàng)目，可以使用 kbone-cli 來(lái)創(chuàng)建項(xiàng)目，首先安裝 kbone-cli:
npm install -g kbone-cli
創(chuàng)建項(xiàng)目：
kbone init my-app
進(jìn)入項(xiàng)目，按照 README.md 的指引進(jìn)行開(kāi)發(fā)：
// 開(kāi)發(fā)小程序端
npm run mp
// 開(kāi)發(fā) Web 端
npm run web
// 構(gòu)建 Web 端
npm run build
使用模板快速開(kāi)發(fā)
除了使用 kbone-cli 外，也可以直接將現(xiàn)有模板 clone 下來(lái)，然后在模板基礎(chǔ)上進(jìn)行開(kāi)發(fā)改造：
項(xiàng)目 clone 下來(lái)后，按照項(xiàng)目中 README.md 的指引進(jìn)行開(kāi)發(fā)。
進(jìn)階使用
剛剛是用腳手架做了一個(gè)簡(jiǎn)單的運(yùn)行和效果的展示，事實(shí)上，我們?cè)陧?xiàng)目中更多的需要是更多復(fù)雜頁(yè)面的交互，或者借助 Kbone 快速實(shí)現(xiàn) Web 項(xiàng)目到微信小程序項(xiàng)目的轉(zhuǎn)換。那么應(yīng)該怎么做呢？接下來(lái)我們先簡(jiǎn)單了解一下它的原理，之后再做一個(gè)多頁(yè)開(kāi)發(fā)的嘗試。
原理
我們知道，小程序是雙線程的，并沒(méi)有Dom樹(shù)的概念，在小程序中渲染和邏輯則完全分離，邏輯層是一個(gè)純粹的JSCore，開(kāi)發(fā)者可以編寫(xiě) js 腳本，但是無(wú)法直接調(diào)用 dom/bom api，沒(méi)有任何瀏覽器相關(guān)的實(shí)現(xiàn)，渲染和邏輯的交互通過(guò)數(shù)據(jù)和事件來(lái)驅(qū)動(dòng)，開(kāi)發(fā)者可以不用在去關(guān)心渲染的細(xì)節(jié)。
目前業(yè)界流行的第三方跨端框架們，常規(guī)做法都是靜態(tài)編譯兼容，原理是把代碼語(yǔ)法分析一遍，然后將其中的模板部分翻譯成對(duì)應(yīng)的跨端需求的模板（微信小程序、支付寶小程序、H5、APP等）。
靜態(tài)編譯最大的局限性是無(wú)法保證轉(zhuǎn)換的完整性，因?yàn)閂ue模板和WXML模板的語(yǔ)法并不是直接對(duì)等的，Vue的特性設(shè)計(jì)也和小程序的設(shè)計(jì)無(wú)法劃等號(hào)，這自然就導(dǎo)致了部分Vue特性的丟失。比如像Vue中的v-html指令、ref獲取Dom節(jié)點(diǎn)、過(guò)濾器等就通通用不了。除了Vue自身的特性外，一些原本依賴Dom/Bom接口的Vue插件頁(yè)無(wú)法使用，例如Vue-Router。對(duì)比一下，就會(huì)發(fā)現(xiàn)，kbone適配器的方式的優(yōu)點(diǎn)就很容易顯現(xiàn)出來(lái)，它不會(huì)對(duì) vue runtime 進(jìn)行裁剪魔改，比如 v-html、ref、vue-router 等都可以直接用（后面會(huì)比較分析）
與其他同構(gòu)框架不同，kbone 是以適配器的方式來(lái)支持的。
適配器包含兩部分：
負(fù)責(zé)提供 dom/bom api 的 js 庫(kù)和負(fù)責(zé)渲染的自定義組件，也就是 kbone 中的 miniprogram-render 和 miniprogram-element，可以看到 kbone 最終生成的小程序代碼里會(huì)依賴這兩個(gè) npm 包。
除此之外還需要一個(gè) webpack 插件來(lái)根據(jù)原始的 Web 端源碼生成小程序代碼，因?yàn)樾〕绦虼a包和 Web 端的代碼不同，它有固定的結(jié)構(gòu)，而這個(gè)插件就是 mp-webpack-plugin。
簡(jiǎn)單總結(jié)一下，就是下面這個(gè)圖：
目錄
通過(guò)官方給我們的這個(gè)目錄結(jié)構(gòu)，我們可以很清晰的看到每個(gè)目錄下各個(gè)文件的作用。這里我就對(duì)其中的一些文件進(jìn)行解釋一下。
├─ build //配置目錄
│ ├─ miniprogram.config.js // mp-webpack-plugin 配置
│ ├─ webpack.base.config.js // Web 端構(gòu)建基礎(chǔ)配置
│ ├─ webpack.dev.config.js // Web 端構(gòu)建開(kāi)發(fā)環(huán)境配置
│ ├─ webpack.mp.config.js // 小程序端構(gòu)建配置
│ └─ webpack.prod.config.js // Web 端構(gòu)建生產(chǎn)環(huán)境配置
├─ dist //目標(biāo)代碼目錄
│ ├─ mp // 小程序端目標(biāo)代碼目錄，使用微信開(kāi)發(fā)者工具打開(kāi)，用于生產(chǎn)環(huán)境
│ └─ web // web 端編譯出的文件，用于生產(chǎn)環(huán)境
├─ src //源碼目錄
│ ├─ common // 通用組件
│ ├─ mp // 小程序端入口目錄
│ │ ├─ home // 小程序端 home 頁(yè)面
│ │ │ └─ main.mp.js // 小程序端入口文件
│ │ └─ other // 小程序端 other 頁(yè)面
│ │ └─ main.mp.js // 小程序端入口文件
│ ├─ detail // detail 頁(yè)面
│ ├─ home // home 頁(yè)面
│ ├─ list // list 頁(yè)面
│ ├─ router // vue-router 路由定義
│ ├─ store // vuex 相關(guān)目錄
│ ├─ App.vue // Web 端入口主視圖
│ └─ main.js // Web 端入口文件
└─ index.html // Web 端入口模板（輸出頁(yè)面）
miniprogram.config.js
這個(gè)文件是關(guān)于小程序端的一些配置，類似于原生的 json 配置
webpack.mp.config.js
小程序端構(gòu)建配置，也就是構(gòu)建小程序端代碼的 webpack 配置，多頁(yè)開(kāi)發(fā)中會(huì)用到其中的一部分配置。
src/mp & main.mp.js
mp 用來(lái)存放小程序端的入口文件，這里設(shè)置小程序的一些頁(yè)面，main.mp.js 相當(dāng)于一個(gè)掛載操作，把它看成 mpvue 里面的 main.js 比較好理解，設(shè)置頁(yè)面路由和掛載映射 Vue 里面的頁(yè)面。
demo13
項(xiàng)目結(jié)構(gòu)
入口
配置
多頁(yè)開(kāi)發(fā) -pro
Vue 的路由配置
src/router/index.js
頁(yè)面建立
src/各頁(yè)面
小程序端頁(yè)面建立/掛載
src/mp main.mp.js
