多端统一开发工具——kbone

头像
RRRookieG
    阅读 6 分钟
    1

    本文简单介绍了小程序官方同构方案kbone的使用、原理、以及如何将一个vue项目通过该框架转换为小程序项目，并比较了目前市场上流行的几个第三方框架与kbone之间的比较，为技术选型提供了一定的参考意义。

    kbone 框架

    kbone 是一个致力于微信小程序和 Web 端同构的解决方案。
    该框架于2020-02-26开源，于2020-03-26公测。
    微信开放社区小程序是使用Kbone官方框架编写的小程序。

    简介

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

    简单来说，使用这个框架写一份代码，并进行一些配置，就可以在运行时渲染在web和小程序两端。

    优势

    • 大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等。
    • 支持更为完整的前端框架特性，因为 kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。
    • 提供了常用的 dom/bom 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
    • 在小程序端运行时，仍然可以使用小程序本身的特性（比如像 live-player 内置组件、分包功能）。
    • 提供了一些 Dom 扩展接口，让一些无法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。

    Webpack与Kbone是强耦合的，开发需借助Webpack提供的基本依赖

    简单使用

    为了可以让开发者可以更自由地进行项目的搭建，以下提供了三种方式。我们先看一下最便捷的脚手架的方式。

    使用 kbone-cli 快速开发

    开发准备
    npm install -g kbone-cli //安装脚手架
kbone init kbone-pro // 初始化项目

    如图：
    image.png
    image.png

    // 代码构建
npm run mp // 开发小程序端
npm run web // 开发 Web 端
npm run build // 构建 Web 端

    需要在小程序中运行kbone项目，执行npm run mp 会在dist目录下生成一个mp文件夹，使用开发者工具打开 dist/mp 目录即可。
    image.png
    需要打包web项目，执行npm run build，会在dist目录下生成一个web文件夹。
    image.png

    预览

    修改src下文件内容，web和mp热更新，看一下效果图。
    image.png
    image.png
    另外两种使用方式，官方也提供了指引。

    使用模板快速开发

    项目 clone 下来后，按照项目中 README.md 的指引进行开发。

    手动配置开发

    此方案基于 webpack 构建实现，如果你不想要使用官方提供的模板，想要更灵活地搭建自己的项目，又或者是想对已有的项目进行改造，则需要自己补充对应配置来实现 kbone 项目的构建。

    一般需要补充两个配置：

    点此可以查看具体配置方式和操作流程。

    例子

    官方为我们准备了若干 demo，可以点此查看。

    进阶使用

    刚刚是用脚手架做了一个简单的运行和效果的展示，事实上，我们在项目中更多的需要是更多复杂页面的交互，或者借助 Kbone 快速实现 Web 项目到微信小程序项目的转换。那么应该怎么做呢？接下来我们先简单了解一下它的原理，之后再做一个多页开发的尝试。

    原理

    我们知道，小程序是双线程的，并没有Dom树的概念，在小程序中渲染和逻辑则完全分离，逻辑层是一个纯粹的JSCore，开发者可以编写 js 脚本，但是无法直接调用 dom/bom api，没有任何浏览器相关的实现，渲染和逻辑的交互通过数据和事件来驱动，开发者可以不用在去关心渲染的细节。
    image.png

    目前业界流行的第三方跨端框架们，常规做法都是静态编译兼容，原理是把代码语法分析一遍，然后将其中的模板部分翻译成对应的跨端需求的模板（微信小程序、支付宝小程序、H5、APP等）。
    静态编译最大的局限性是无法保证转换的完整性，因为Vue模板和WXML模板的语法并不是直接对等的，Vue的特性设计也和小程序的设计无法划等号，这自然就导致了部分Vue特性的丢失。比如像Vue中的v-html指令、ref获取Dom节点、过滤器等就通通用不了。除了Vue自身的特性外，一些原本依赖Dom/Bom接口的Vue插件页无法使用，例如Vue-Router。对比一下，就会发现，kbone适配器的方式的优点就很容易显现出来，它不会对 vue runtime 进行裁剪魔改，比如 v-html、ref、vue-router 等都可以直接用（后面会比较分析）

    与其他同构框架不同，kbone 是以适配器的方式来支持的。
    image.png

    适配器包含两部分：

    负责提供 dom/bom api 的 js 库和负责渲染的自定义组件，也就是 kbone 中的 miniprogram-render 和 miniprogram-element，可以看到 kbone 最终生成的小程序代码里会依赖这两个 npm 包。
    除此之外还需要一个 webpack 插件来根据原始的 Web 端源码生成小程序代码，因为小程序代码包和 Web 端的代码不同，它有固定的结构，而这个插件就是 mp-webpack-plugin。

    简单总结一下，就是下面这个图：
    image.png

    目录

    通过官方给我们的这个目录结构，我们可以很清晰的看到每个目录下各个文件的作用。这里我就对其中的一些文件进行解释一下。

    ├─ build //配置目录
│  ├─ miniprogram.config.js  // mp-webpack-plugin 配置
│  ├─ webpack.base.config.js // Web 端构建基础配置
│  ├─ webpack.dev.config.js  // Web 端构建开发环境配置
│  ├─ webpack.mp.config.js   // 小程序端构建配置
│  └─ webpack.prod.config.js // Web 端构建生产环境配置
├─ dist //目标代码目录
│  ├─ mp                     // 小程序端目标代码目录，使用微信开发者工具打开，用于生产环境
│  └─ web                    // web 端编译出的文件，用于生产环境
├─ src //源码目录
│  ├─ common                 // 通用组件
│  ├─ mp                     // 小程序端入口目录
│  │  ├─ home                // 小程序端 home 页面
│  │  │  └─ main.mp.js       // 小程序端入口文件
│  │  └─ other               // 小程序端 other 页面
│  │     └─ main.mp.js       // 小程序端入口文件
│  ├─ detail                 // detail 页面
│  ├─ home                   // home 页面
│  ├─ list                   // list 页面
│  ├─ router                 // vue-router 路由定义
│  ├─ store                  // vuex 相关目录
│  ├─ App.vue                // Web 端入口主视图
│  └─ main.js                // Web 端入口文件
└─ index.html                // Web 端入口模板（输出页面）
    miniprogram.config.js

    这个文件是关于小程序端的一些配置，类似于原生的 json 配置

    webpack.mp.config.js

    小程序端构建配置，也就是构建小程序端代码的 webpack 配置，多页开发中会用到其中的一部分配置。

    src/mp & main.mp.js

    mp 用来存放小程序端的入口文件，这里设置小程序的一些页面，main.mp.js 相当于一个挂载操作，把它看成 mpvue 里面的 main.js 比较好理解，设置页面路由和挂载映射 Vue 里面的页面。

    demo13

    项目结构

    image.png

    入口

    image.png
    image.png

    配置

    多页开发 -pro

    Vue 的路由配置

    src/router/index.js

    页面建立

    src/各页面

    小程序端页面建立/挂载

    src/mp main.mp.js

    小程序入口
    miniprogram.config.js(按需配置)
    web 自定义组件（tabbar）

    kbone-ui

    如果你是用vue，那么你可以安装kbone ui
    kbone-ui 是一个能同时支持 小程序(kbone) 和 vue 框架开发的多端 UI 库。

    • 即可以基于 kbone 同时开发小程序和 H5，也可以单独使用开发 H5 应用。
    • 支持以 Vue 语法来支持 H5 端和小程序端运行
    • 对齐 微信weui 样式组件
    安装 kbone-ui 项目
    npm install kbone-ui
// 加载全部组件内容，并引入 weui 样式库：
import KboneUI from ‘kbone-ui’
import ‘kbone-ui/lib/weui/weui.css’

Vue.use(KboneUI)

// 或者按需引入：
import KButton from 'kbone-ui/lib/KButton.js'
import KView from 'kbone-ui/lib/KView.js'

Vue.use(KButton)
Vue.use(KView)

    点此查看kbone-ui 使用手册。

    比较分析

    image.png

    踩坑&遗留问题

    没有找到可以构建的NPM包

    image.png
    image.png
    开发者工具创建的项目，miniprogramRoot默认为 miniprogram，package.json在其外部，npm 构建无法正常工作。
    自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式
    与 “默认的构建 npm 方式” 不一样，此种方式需要开发者在 project.config.json 中指定 node_modules 的位置 和目标 miniprogram_npm 的位置，使开发者工具可以正确索引到 npm 依赖的位置。
    image.png

    "packNpmManually": true,
"packNpmRelationList": [
  {
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./miniprogram/"
  }
]

    或者简单点把这个mp文件夹复制出来。
    原因：
    寻找 npm 包的过程和 npm 的实现类似，从依赖 npm 包的文件所在目录开始逐层往外找，直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况，构建之前的结构：
    点此查看小程序npm包原理

    tabBar图片不支持相对路径

    转成 base64 或者使用网络地址

    不支持rpx

    rem适配

    文章中出现的链接集合

    demo列表https://github.com/Tencent/kbone/tree/master/examples

    image.png

    小程序
    RRRookieG
    50 声望3 粉丝
    « 上一篇
    小程序移植uni-app经验分享

    引用和评论

    推荐阅读
    头像
    【小程序制作之旅】完美支持 Markdown 看这一篇就够了，超详细教程

    白水赞 2阅读 543评论 1

    头像
    开发自定义Taro插件解决跨平台难题

    南玖赞 1阅读 2.4k

    头像
    通过duxapp提供的基础方法、UI组件、全局样式，快速编写项目

    ShaoGongBra阅读 3.5k

    头像
    如何通过即构小程序组件实现直播带货功能？

    ZEGO即构阅读 1.7k

    头像
    移动端、微信小程序兼容性问题汇总（持续更新……

    池月赞 1阅读 786

    头像
    Taro小程序开发性能优化实践

    京东云开发者阅读 410

    头像
    duxui：基于Taro，兼容React Native、小程序、H5的多端UI库

    ShaoGongBra阅读 381

    0 条评论
    得票最新