Kbone基礎(chǔ) - [01] 簡介

Kbone 簡介

1妨猩、導(dǎo)語

小程序作為一種新興地鏈接用戶與服務(wù)的方式潜叛,相信大家都或多或少接觸過秽褒。對于開發(fā)者來說,它是一種類似 Web 但又不同于 Web 的開發(fā)模式威兜,它提供了一套自定義的 API 和文件組織方式销斟,這無疑帶給開發(fā)者一定的學(xué)習(xí)成本和維護(hù)成本,所以我們也在嘗試能否提供一個方案來抹平這個差異椒舵÷煊唬——引自Kbone作者june在云加社區(qū)微信群中的分享

隨著小程序的發(fā)展,Web 端和小程序同構(gòu)的呼聲也越來越大笔宿,為此微信官方提供了 Kbone 這一套方案犁钟。旨在讓開發(fā)者可以用最熟悉的方式來完成一個多端 APP 的開發(fā),降低開發(fā)門檻泼橘。

Kbone——微信小程序同構(gòu)方案新思路涝动。

微信小程序的底層模型和 Web 端不同,我們想直接把 Web 端的代碼挪到小程序環(huán)境內(nèi)執(zhí)行是不可能的炬灭。kbone 的誕生就是為了解決這個問題戚揭,它實現(xiàn)了一個適配器珍策,在適配層里模擬出了瀏覽器環(huán)境,讓 Web 端的代碼可以不做什么改動便可運行在小程序里。

2佛吓、Kbone的優(yōu)勢

因為 kbone 是通過提供適配器的方式來實現(xiàn)同構(gòu),所以它的優(yōu)勢很明顯:

  • 大部分流行的前端框架都能夠在 kbone 上運行像街,比如 Vue筹裕、React、Preact 等椎木。
  • 支持更為完整的前端框架特性违柏,因為 kbone 不會對框架底層進(jìn)行刪改(比如 Vue 中的 v-html 指令笨腥、Vue-router 插件)。
  • 提供了常用的 dom/bom 接口勇垛,讓用戶代碼無需做太大改動便可從 Web 端遷移到小程序端脖母。
  • 在小程序端運行時,仍然可以使用小程序本身的特性(比如像 live-player 內(nèi)置組件闲孤、分包功能)谆级。
  • 提供了一些 Dom 擴(kuò)展接口,讓一些無法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)讼积。

3肥照、Kbone 誕生背景

首先我們先進(jìn)入背景部分的介紹。之所以會有 Kbone 這個方案出現(xiàn)勤众,源自于一個需求:微信開放社區(qū)當(dāng)時只有 Web 端舆绎,為了讓信息可以更方便地傳播、分享和使用们颜,希望實現(xiàn)社區(qū)小程序版吕朵,交互體驗盡量貼近于 Web 端。

微信開放社區(qū)鏈接: https://developers.weixin.qq.com/community/develop/mixflow

此次同構(gòu)到小程序端需要考慮幾個因素:多端代碼復(fù)用窥突、盡可能支持已有的特性和性能要有保證努溃。其實最主要的就是要在盡量不改動現(xiàn)有代碼的情況下來完成小程序的開發(fā)。

4阻问、選擇

業(yè)內(nèi)其實已經(jīng)出現(xiàn)了很多關(guān)于同構(gòu)的解決方案了梧税,每個方案都有自己的優(yōu)劣,不存在能夠完美解決所有問題的方案称近。kbone 也一樣第队,它的優(yōu)勢在上面提到過,而它的不足也是它的實現(xiàn)原理帶來的刨秆。kbone 是使用一定的性能損耗來換取更為全面的 Web 端特性支持凳谦。

所以關(guān)于性能方面,如果你對小程序的性能特別苛刻坛善,建議直接使用原生小程序開發(fā)晾蜘;如果你的頁面節(jié)點數(shù)量特別多(通常在 1000 節(jié)點以上),同時還要保證在節(jié)點數(shù)無限上漲時仍然有穩(wěn)定的渲染性能的話眠屎,可以嘗試一下業(yè)內(nèi)采用靜態(tài)模板轉(zhuǎn)譯的方案剔交;其他情況就可以直接采用 kbone 了。

5改衩、微信開放社區(qū)方案實現(xiàn)與應(yīng)用效果

具體實現(xiàn)思路見 高級 > 微信開放社區(qū)方案實現(xiàn)與應(yīng)用效果岖常。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市葫督,隨后出現(xiàn)的幾起案子竭鞍,更是在濱河造成了極大的恐慌板惑,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件偎快,死亡現(xiàn)場離奇詭異冯乘,居然都是意外死亡,警方通過查閱死者的電腦和手機晒夹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門裆馒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人丐怯,你說我怎么就攤上這事喷好。” “怎么了读跷?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵梗搅,是天一觀的道長。 經(jīng)常有香客問我效览,道長无切,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任钦铺,我火速辦了婚禮订雾,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘矛洞。我一直安慰自己,他們只是感情好烫映,可當(dāng)我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布沼本。 她就那樣靜靜地躺著,像睡著了一般锭沟。 火紅的嫁衣襯著肌膚如雪抽兆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天族淮,我揣著相機與錄音辫红,去河邊找鬼。 笑死祝辣,一個胖子當(dāng)著我的面吹牛贴妻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蝙斜,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼名惩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了孕荠?” 一聲冷哼從身側(cè)響起娩鹉,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤攻谁,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后弯予,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體戚宦,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年锈嫩,在試婚紗的時候發(fā)現(xiàn)自己被綠了阁苞。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡祠挫,死狀恐怖那槽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情等舔,我是刑警寧澤骚灸,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站慌植,受9級特大地震影響甚牲,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蝶柿,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一丈钙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧交汤,春花似錦雏赦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至戒洼,卻和暖如春俏橘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背圈浇。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工寥掐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人磷蜀。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓召耘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蠕搜。 傳聞我的和親對象是個殘疾皇子怎茫,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,960評論 2 355