多端开发 Kbone
kbone 是什么？
kbone 是一个致力于微信小程序和 Web 端同构的解决方案。
微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。
因为 kbone 是通过提供适配器的方式来实现同构，所以它的优势很明显：
- 大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等。
- 支持更为完整的前端框架特性，因为 kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。
提供了常用的 dom/bom 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。 - 在小程序端运行时，仍然可以使用小程序本身的特性（比如像 live-player 内置组件、分包功能）。
- 提供了一些 Dom 扩展接口，让一些无法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）
快速上手
使用 kbone-cli 快速开发
对于新项目，可以使用 kbone-cli 来创建项目，首先安装 kbone-cli:
npm install -g kbone-cli
创建项目：
kbone init my-app
进入项目，按照 README.md 的指引进行开发：
// 开发小程序端
npm run mp
// 开发 Web 端
npm run web
// 构建 Web 端
npm run build
使用模板快速开发
除了使用 kbone-cli 外，也可以直接将现有模板 clone 下来，然后在模板基础上进行开发改造：
- Vue 项目模板(opens new window)
- React 项目模板(opens new window)
- Preact 项目模板(opens new window)
- Omi 项目模板(opens new window)
项目 clone 下来后，按照项目中 README.md 的指引进行开发。
kbone 项目搭建流程
此方案基于 webpack 构建实现，构建 web 端代码的流程无需做任何调整，此处只介绍如何将源码构建成小程序端代码。
编写 webpack 配置
新建一个 webpack.mp.config.js 文件，用于小程序端代码的构建，假设你要构建的小程序代码放到 ./miniprogram 目录中：
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')
const MpPlugin = require('mp-webpack-plugin') // 用于构建小程序代码的 webpack 插件
const isOptimize = true // 是否压缩业务代码，开发者工具可能无法完美支持业务代码使用到的 es 特性，建议自己做代码压缩
module.exports = {
mode: 'production',
entry: {
// js 入口
home: path.resolve(__dirname, '../src/home/main.mp.js'),
list: path.resolve(__dirname, '../src/list/main.mp.js'),
detail: path.resolve(__dirname, '../src/detail/main.mp.js'),
},
output: {
path: path.resolve(__dirname, './miniprogram/common'), // 放到小程序代码目录中的 common 目录下
filename: '[name].js', // 必需字段，不能修改
library: 'createApp', // 必需字段，不能修改
libraryExport: 'default', // 必需字段，不能修改
libraryTarget: 'window', // 必需字段，不能修改
},
target: 'web', // 必需字段，不能修改
optimization: {
runtimeChunk: false, // 必需字段，不能修改
splitChunks: { // 代码分割配置，不建议修改
chunks: 'all',
minSize: 1000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 100,
maxInitialRequests: 100,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
minimizer: isOptimize ? [
// 压缩CSS
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.(css|wxss)$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
minifySelectors: false, // 因为 wxss 编译器不支持 .some>:first-child 这样格式的代码，所以暂时禁掉这个
}],
},
canPrint: false
}),
// 压缩 js
new TerserPlugin({
test: /\.js(\?.*)?$/i,
parallel: true,
})
] : [],
},
module: {
rules: [
// loaders 配置。这里需要注意的是，部分在 wxss 不支持的样式需要剔除，比如 ie hack 代码，可以使用 postcss 的 stylehacks 插件剔除；对于资源文件来说，需要转成 base64 或者线上资源链接，下面是一个简单的示例：
// {
// test: /\.(png|jpg|jpeg|gif|svg|eot|woff|woff2|ttf)$/,
// use: [{
// loader: 'url-loader',
// options: {
// limit: 1024,
// name: '[name]_[hash:hex:6].[ext]',
// publicPath: 'https://test.miniprogram.com/res', // 对于资源文件直接使用线上的 cdn 地址
// emitFile: false,
// }
// }],
// },
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.isMiniprogram': process.env.isMiniprogram, // 注入环境变量，用于业务代码判断
}),
new MiniCssExtractPlugin({
filename: '[name].wxss',
}),
new VueLoaderPlugin(),
new MpPlugin({
// 插件配置，下面会详细介绍
}),
],
}
编写 webpack 插件配置
这里的 webpack 插件配置即上面提到的 MpPlugin 的配置，内容如下：
module.exports = {
// 页面 origin，默认是 https://miniprogram.default
origin: 'https://test.miniprogram.com',
// 入口页面路由，默认是 /
entry: '/',
// 页面路由，用于页面间跳转
router: {
// 路由可以是多个值，支持动态路由
home: [
'/(home|index)?',
'/test/(home|index)',
],
list: [
'/test/list/:id',
],
detail: [
'/test/detail/:id',
],
},
// 项目配置，会被合并到 project.config.json
projectConfig: {
appid: 'wx1234567890',
projectname: 'kbone-demo',
},
}
新增入口文件
此处小程序 webpack 配置所使用的入口文件和 web 端有一定区别，假设 web 端是这样的：
import Vue from 'vue'
import App from './App.vue'
// 注入到页面上的 id 为 app 的 dom 节点上
new Vue({
el: '#app',
render: h => h(App)
})
那么小程序端所用到的入口则需要调整成如下：
import Vue from 'vue'
import App from './App.vue'
// 需要将创建根组件实例的逻辑封装成方法
export default function createApp() {
// 在小程序中如果要注入到 id 为 app 的 dom 节点上，需要主动创建
const container = document.createElement('div')
container.id = 'app'
document.body.appendChild(container)
return new Vue({
el: '#app',
render: h => h(App)
})
// 此方法也支持返回一个 promise
// return new Promise((resolve, reject) => {
// resolve(new Vue({/* your options */}))
// })
}
这是因为小程序中各个页面的逻辑端是统一跑在 appService 上的，需要对各个页面做隔离。为了方便做后续操作，需要将创建根组件实例的逻辑封装成方法暴露给适配层，调用此方法时会返回根组件实例。
执行构建
- 构建小程序代码：
webpack --config webpack.mp.config.js
- 进入小程序代码目录，安装小程序依赖包：
cd miniprogram
npm install
- 使用小程序开发者工具直接打开此目录，并点击工具菜单下的构建 npm 按钮，之后便可预览构建好的小程序了。
PS：工具必须打开配置
使用 npm 模块和ES6 转 ES5（或者增强编译），确保 npm 包中的 kbone 核心模块能正常运行。
PS：在没有使用扩展库的模式下，如果遇到
miniprogram-render或miniprogram-element找不到的报错，请先确保是否正常执行了 npm 构建生成了 miniprogram_npm 目录，如果都已正常生成，可尝试重启下工具。
例子
我们准备了若干 demo，可以点此查看。
网友评论