????????????????小程序騰訊官網web同構的kbone

當你擁有一個用現代技術寫的web程序，要如何讓它快速的變成小程序的代碼，使得你可以通過小程序發布出去你的這個程序呢，這就要用到kbone，為什么是它呢，不是taro，remax之類的，是因為它是騰訊官方出品，俗話說得好，騰訊出品必屬精品。

01

怎么用？

首先我們肯定是事先寫好了一個webapp，或者即將寫一個webapp，然后再使用她的框架讓這個webapp可以編譯成小程序的代碼，這樣就可以讓代碼跑到小程序里。

首先可以到小程序的官方文檔里搜索?多端統一開發工具——kbone

因為 kbone 是通過提供適配器的方式來實現同構，所以它的優勢很明顯：

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

你的webapp如果是主流的框架開發的，應該都是支持的。

?npm install -g kbone-clikbone init my-app

她就會讓你選她支持的項目。我選個react，就和你從github下載的模板是一樣的

如果cli下載不了，就clone上面的項目

安裝好依賴，就可以開始showtime

運行web，可以展示出來一個她這個例子項目的web

* 其實就是個很簡單的計數器的webapp(react所寫的)然后點擊跳轉

地址欄變成了log.html,?

可是代碼里面沒有這個文件啊。這是因為

src目錄下的xxx.js 會被kbone打包成html文件。我們來證明一下跳轉改成

新增頁面

確實跳轉了。那我這個目錄如果放的就是html呢？

并將跳轉改成xx.html是不行的，因為kbone遷移的是spa，所以寫個html，她也不會生成一個相應的html。所以就沒有一個相應的html去跳轉

02

在kbone的web里調小程序API

因為最終還是要把kbone的web遷移到小程序，所以還是有不同于webapp的語法的東西會出現在你的webapp

首先把你的appid配置進去

然后運行mp

運行mp指令，可以動態轉成小程序代碼，去讓小程序ide讀取并調試，如果是build:mp 就是靜態的轉化，那你每次都要重新build：mp就DX下降，建議開發時用mp指令

用小程序IDE打開以上目錄

由于現在是在小程序里，所以會走上面的分支，使用了wxapi， 跳轉到log頁面，log的小程序頁面是前面log.js生成的

將頁面改動內容，小程序IDE會自動顯示出來

那么這個時候，和webapp相比，行為不同了，因為有個if嘛

能跳到最新的log頁面就說明已經可以直接調mp的api了。mp就是小程序的意思

我們再試試調別的api

也能夠正常返回，這就意味著不需要在你的webapp引入jssdk就可以調小程序api，做到小程序原生的一些功能

03

多頁程序

像前面的po.js log.js 為什么會生成html頁面呢？

因為kbone其實就是打包的，通過修改webpack，使得多頁程序的入口都可以根據你寫的js去自動生成mp的page，這樣你就可以完全在webapp寫代碼，kbone會幫你編譯成小程序代碼，你調試的工具還是在小程序IDE

Kbone有什么用，當你有一些webapp不想拿個服務器serve出來，就要用他編譯成小程序代碼，直接發布到小程序，那么你就不用買服務器了。她就是個將你web代碼轉換為小程序代碼的工具和方案，由于是騰訊出品，那么如果想轉換web代碼為小程序代碼，這個官方的方案應該不會那么的打臉，如果你想轉換到其他小程序，例如支付寶小程序，就要用到其他方案，我接下來開始寫這些有趣的方案

?Jing

總結

以上是生活随笔為你收集整理的delphi 调 web api_小程序web同构Kbone的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。