浅谈Kbone框架

Kbone是腾讯开发的解决微信小程序和Web端同构的框架。简单来说就是只写一套代码，编译结果可以在web端和小程序上运行。

Web端的编译打包结果会自动启动在本地端口，小程序端的内容则需要手动将结果在开发者工具中打开。

一、Kbone特点

1.支持多种前端框架，如：vue、react、preact等，并且能够保持该框架的完整；
2.页面渲染的内容需要用js中的document方法来渲染，提供常用的DOM/BOM接口；
3.小程序端开发仍可使用小程序本身特性；
4.更专注于微信和小程序的开发；
5.Webpack与Kbone是强耦合的，开发需借助Webpack提供的基本依赖

二、如何新建一个Kbone项目？

1.安装脚手架并初始化项目
npm i –g kbone-cli
kbone init project

2.切换目录
cd project

3.项目运行
npm run mp（小程序端）
npm run web（web端）

三、如何现有的项目转换成Kbone项目？

页面编写的代码需要放在js文件中，在kbone项目中，要把入口文件暴露在creatApp()方法中，打包时需要将creatApp()方法挂载在window。具体操作如下：

1.安装webpack脚手架
npm i webpack webpack-cli

2.创建webpack.config.js
配置 entry、output、target、modul、plugins等选项

3.安装插件
npm i mini-css-exctract-plugin
npm i mp-webpack-plugin

4.创建confing.js文件（配置小程序基本信息）
配置entry、router、redirect、app等选项

5.运行
npm run mp（小程序端）
npm run web（web端）

四、与其他框架的差异

Taro和Remax框架 两者都是在编译期完成页面所有内容，而kbone是在运行时渲染小程序内容。
Taro框架 支持多个平台，如：web、h5、微信小程序、百度小程序、支付宝小程序，而Kbone专注于微信和小程序开发。
Remax框架 Remax对react框架进行了强绑定，不支持除react之外的web框架。

五、Kbone实现原理

Kbone是在小程序运行时增加DOM相关接口从而实现渲染，通过lerna来管理多个仓库，通过lerna将相关工具分为了kbone-cli、miniprogram-element，mp-webpack-plugin，reduce-loader等。

kbone-cli：命令行工具，初始化一些参数；

miniprogram-element：用于将html内容转换成小程序的内置组件；

mp-webpack-plugin：处理小程序的基本骨架；

reduce-loader：一个webpack loader处理一些无用代码。

如果需要使用小程序原生跳转的话，需要使用多个webpack entry进行打包，跳转时使用小程序相关API进行页面跳转，否则页面还是使用客户端的方式进行跳转。