小程序kbone开发---用kbone搭建一个demo环境

小程序kbone开发—用kbone搭建一个demo环境

微信小程序自诞生以来，渗透到我们生活的方方面面，以其便捷轻量的特点受到了用户的极大欢迎。但是作为开发者的我们，“当 Web 项目完成之后，产品也想搭一套一样的在小程序端。应该怎么办呢？

再搭一套同样的项目，估计想想都会很崩溃！并且同时维护两套类似的代码的话，这对于开发者来说也是是相当头疼的一件事情！

为了解决这个很不人性化的事情呢，微信小程序推出了 Kbone 来解决微信小程序的同构问题。Kbone是什么，以及做了什么，我们继续来一探究竟。

一、 基础知识

Kbone 是什么?
Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。

微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。Kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。这样，我们就可以借助 Kbone 快速实现 Web 项目转化为微信小程序项目。

Kbone 特点

(1) 大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等。

(2) 支持更为完整的前端框架特性，因为 kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。

(3) 提供了常用的 dom/bom 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。

(4) 在小程序端运行时，仍然可以使用小程序本身的特性（比如像 live-player 内置组件、分包功能）。

(5) 提供了一些 Dom 扩展接口，让一些无法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。

二、开发环境搭建
以下是我用用kbone搭建一个demo环境的小案例。

1.安装Nodejs

进入官网下安装windows下对应系统即可，nodejis中文网地址：http://nodejs.cn/download/

安装完成后，打开控制台，输入npm --version查看版本信息。

2.下载Kbone

下载网址：git clone https://github.com/Tencent/kbone.git
3.运行kbone示例程序

将kbone-develop/examples/demo13文件夹拖到VS Code中后
按下CTRL + SHIT + ~ 打开终端
VS Code下载地址：http://www.downza.cn/soft/276250.html

安装缺少的包，输入命令：npm install

输入命令：npm run mp构建小程序，可以看到在demos13文件夹下面生成了dist

进入dist/mp,输入npm install

4.导入dist/mp工程

下载微信开发者工具，导入生成的dist中程序，AppID使用测试号。

导入成功后，界面如下所示

点击工具选择构建npm，构建成功如下图所示：

此时关闭微信开发者工具，重新打开即可在工具预览界面中看到构建后的预览效果。

至此，我们就完成了小程序Kbone开发环境搭建啦！！！