使用kbone解决Vue项目同时支持小程序问题


Posted in Javascript onNovember 08, 2019

什么是kbone

微信小程序开发过程中,许多开发者会遇到 小程序 与 Web 端一起的需求,由于 小程序 与 Web 端的运行环境不同,开发者往往需要维护两套类似的代码,这对开发者来说比较耗费力气,并且会出现不同步的情况。

为了解决上述问题,微信小程序推出了同构解决方案 kbone 来解决此问题。

那么, kbone 要怎么使用呢?这里我们将通过一个 todo 的例子来跟大家讲解。

基本结构

首先,我们来看下一个基本的 kbone 项目的目录结构(这里的 todo 是基于 Vue 的示例, kbone 也有 ReactPreactOmi 等版本,详情可移步 kbone github )。

因为 kbone 是为了解决 小程序 与 Web 端的问题,所以每个目录下的配置都会有两份(小程序 与 Web 端各一份)

使用kbone解决Vue项目同时支持小程序问题

入口

不管是 小程序 端还是 Web 端,都需要入口文件。在 src/index 目录下, main.js 为 Web 端用主入口, main.mp.js 则为 小程序 端用主入口。

当然,Web 端会比 小程序 多一个入口页面,即 index.html (位于根目录下)。 使用kbone解决Vue项目同时支持小程序问题

下面两段代码分别是 小程序端 入口与 Web 端入口的代码,可以看到 小程序端的入口代码封装在 createApp 函数里面(这里固定即可),内部会比 Web 端多一个创建 app 节点的操作,其他的基本就是一致的。

// 小程序端入口
import Vue from 'vue'
import todo from './todo.vue'

export default function createApp() {
 // 创建app节点用于绑定
 const container = document.createElement('div')
 container.id = 'app'
 document.body.appendChild(container)

 return new Vue({
 el: '#app',
 render: h => h(todo)
 })
}
// web端入口
import Vue from 'vue'
import todo from './todo.vue'

new Vue({
 el: '#app',
 render: h => h(todo)
})

todo.vue

在上面的入口图可以看到,源码目录中,除了入口文件分开之前,页面文件就是共用的了,这里直接使用 Vue 的写法即可,不用做特殊的适应。

配置

写完代码之后,我们要怎么跑项目呢?这时,配置就派上用场啦。

Web 端配置为正常的 Vue 配置,小程序端配置与 Web 端配置的唯一不同就是需要引入 mp-webpack-plugin 插件来将 Vue 组件转化为小程序代码。

使用kbone解决Vue项目同时支持小程序问题

构建代码

接着,我们需要构建代码,让代码可以运行到各自的运行环境中去。构建完成后,生产代码会位于 dist 目录中。

// 构建 web 端代码
// 目标代码在 dist/web
npm run build

// 构建小程序端代码
// 目标代码在 dist/mp
npm run mp

小程序端 的构建会比 Web 端的构建多一个步骤,就是 npm 构建。

进入 dist/mp 目录,执行 npm install 安装依赖,用开发者工具将 dist/mp 目录作为小程序项目导入之后,点击工具栏下的 构建 npm ,即可预览效果。

效果

最后,我们来看一下 todo 的效果。kbone 初体验,done~

todo 代码可到 kbone/demo13 自提。

使用kbone解决Vue项目同时支持小程序问题

最后

如果你想了解更多 kbone 相关的使用及详情,可移步 kbone github 。

总结

以上所述是小编给大家介绍的使用kbone解决Vue项目同时支持小程序问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
React key值的作用和使用详解
Aug 23 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
在VUE中实现文件下载并判断状态的方法
Nov 08 #Javascript
vue中在vuex的actions中请求数据实例
Nov 08 #Javascript
vue 组件内获取actions的response方式
Nov 08 #Javascript
在vue中使用vuex,修改state的值示例
Nov 08 #Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 #Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 #Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 #Javascript
You might like
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
小程序双头slider选择器的实现示例
2020/03/31 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python实现树形打印目录结构
2018/03/29 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
安全标准化实施方案
2014/02/20 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
2015年派出所工作总结
2015/04/24 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
Python源码解析之List
2021/05/21 Python