開源最前線（ID：OpenSourceTop） 猿妹綜合整理
鏈接：騰訊開源、https://github.com/Tencent/kbone
昨天，騰訊開源在公眾號(hào)上推送了一篇《微信小程序多端框架 kbone 開源》的文章，鑒于小程序的火熱，今天就和大家分享一下這個(gè)由官方出品的小程序框架。這個(gè)框架在去年就已經(jīng)發(fā)布，微信小程序開發(fā)過(guò)程中，許多開發(fā)者會(huì)遇到小程序 與 Web 端一起的需求，但是微信小程序的底層模型和 Web 端不同，我們想直接把 Web 端的代碼挪到小程序環(huán)境內(nèi)執(zhí)行是不可能的。為了解決這個(gè)問(wèn)題，微信小程序推出了同構(gòu)解決方案 kbone。kbone 方案設(shè)計(jì)有如下幾個(gè)前提：所以，與其他同構(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。miniprogram-render、miniprogram-element 和 mp-webpack-plugin 這三個(gè)包即是 kbone 的核心。因?yàn)?kbone 是通過(guò)提供適配器的方式來(lái)實(shí)現(xiàn)同構(gòu)，所以它的優(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 接口）。
為了可以讓開發(fā)者可以更自由地進(jìn)行項(xiàng)目的搭建，微信小程序提供了三種使用方式，這里猿妹給大家介紹其中一種：npm install -g kbone-cli
使用 kbone-cli 快速開發(fā)，對(duì)于新項(xiàng)目，可以使用 kbone-cli 來(lái)創(chuàng)建項(xiàng)目，首先安裝 kbone-cli:kbone init my-app
進(jìn)入項(xiàng)目，按照 README.md 的指引進(jìn)行開發(fā)：// 開發(fā)小程序端
npm run mp
// 開發(fā) Web 端
npm run web
// 構(gòu)建 Web 端
npm run build
剩余兩種方式是使用模板快速開發(fā)和手動(dòng)配置開發(fā)，感興趣的可以到GitHub上查看。目前，kbone已經(jīng)在GitHub上已經(jīng)標(biāo)星1.5K，129個(gè)Fork。（GitHub地址：https://github.com/Tencent/kbone）
●編號(hào)928，輸入編號(hào)直達(dá)本文
●輸入m獲取文章目錄
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
