乐趣区

关于小程序:多端统一开发工具kbone

本文简略介绍了小程序官网同构计划 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 // 初始化我的项目

如图:

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

须要在小程序中运行 kbone 我的项目,执行 npm run mp 会在 dist 目录下生成一个 mp 文件夹,应用开发者工具关上 dist/mp 目录即可。

须要打包 web 我的项目,执行 npm run build,会在 dist 目录下生成一个 web 文件夹。

预览

批改 src 下文件内容,web 和 mp 热更新,看一下效果图。


另外两种应用形式,官网也提供了指引。

应用模板疾速开发

  • Vue 我的项目模板
  • React 我的项目模板
  • kbone-ui 我的项目模板
  • Preact 我的项目模板
  • Omi 我的项目模板

我的项目 clone 下来后,依照我的项目中 README.md 的指引进行开发。

手动配置开发

此计划基于 webpack 构建实现,如果你不想要应用官网提供的模板,想要更灵便地搭建本人的我的项目,又或者是想对已有的我的项目进行革新,则须要本人补充对应配置来实现 kbone 我的项目的构建。

个别须要补充两个配置:

  • 构建到小程序代码的 webpack 配置
  • 应用 webpack 构建中应用到的非凡插件 mp-webpack-plugin 配置

点此能够查看具体配置形式和操作流程。

例子

官网为咱们筹备了若干 demo,能够点此查看。

进阶应用

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

原理

咱们晓得,小程序是双线程的,并没有 Dom 树的概念,在小程序中渲染和逻辑则齐全拆散,逻辑层是一个纯正的 JSCore,开发者能够编写 js 脚本,然而无奈间接调用 dom/bom api,没有任何浏览器相干的实现,渲染和逻辑的交互通过数据和事件来驱动,开发者能够不必在去关怀渲染的细节。

目前业界风行的第三方跨端框架们,惯例做法都是动态编译兼容,原理是把代码语法分析一遍,而后将其中的模板局部翻译成对应的跨端需要的模板(微信小程序、支付宝小程序、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 是以适配器的形式来反对的。

适配器蕴含两局部:

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

简略总结一下,就是上面这个图:

目录

通过官网给咱们的这个目录构造,咱们能够很清晰的看到每个目录下各个文件的作用。这里我就对其中的一些文件进行解释一下。

├─ 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

我的项目构造

入口


配置

多页开发 -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 使用手册。

比拟剖析

踩坑 & 遗留问题

没有找到能够构建的 NPM 包



开发者工具创立的我的项目,miniprogramRoot默认为 miniprogrampackage.json在其内部,npm 构建无奈失常工作。
自定义 node_modules 和 miniprogram_npm 地位的构建 npm 形式
与“默认的构建 npm 形式”不一样,此种形式须要开发者在 project.config.json 中指定 node_modules 的地位 和指标 miniprogram_npm 的地位,使开发者工具能够正确索引到 npm 依赖的地位。

"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

退出移动版