使用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 中对象的继承〔转贴〕
Jan 22 Javascript
css配合jquery美化 select
Nov 29 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
javascript操作表格排序实例分析
May 06 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
Vue实现简单的跑马灯
May 25 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
高中生自我评语大全
2014/01/19 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
会计学专业求职信
2014/07/17 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
爱心募捐感谢信
2015/01/22 职场文书
简历中自我评价范文
2015/03/11 职场文书
婚宴领导致辞
2015/07/28 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
Python中的socket网络模块介绍
2022/07/23 Python