Kbone小程序多端框架学习

kbone官方文档
kbone专题课程


多端开发 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 上的,需要对各个页面做隔离。为了方便做后续操作,需要将创建根组件实例的逻辑封装成方法暴露给适配层,调用此方法时会返回根组件实例。

执行构建

  1. 构建小程序代码:
webpack --config webpack.mp.config.js
  1. 进入小程序代码目录,安装小程序依赖包:
cd miniprogram
npm install
  1. 使用小程序开发者工具直接打开此目录,并点击工具菜单下的构建 npm 按钮,之后便可预览构建好的小程序了。

PS:工具必须打开配置 使用 npm 模块ES6 转 ES5(或者 增强编译),确保 npm 包中的 kbone 核心模块能正常运行。

PS:在没有使用扩展库的模式下,如果遇到 miniprogram-renderminiprogram-element 找不到的报错,请先确保是否正常执行了 npm 构建生成了 miniprogram_npm 目录,如果都已正常生成,可尝试重启下工具。

例子

我们准备了若干 demo,可以点此查看。

你可能感兴趣的:(Kbone小程序多端框架学习)