使用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 相关文章推荐
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 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代码
2011/11/27 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
javascript回调函数详解
2018/02/06 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python实现端口检测的方法
2018/07/24 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
医学生自我评价
2014/01/27 职场文书
房屋转让协议书
2014/10/18 职场文书
实习单位推荐信
2015/03/27 职场文书
Oracle笔记
2021/04/05 Oracle
python套接字socket通信
2022/04/01 Python
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android