小程序腾讯官网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