使用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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
javascript数组组合成字符串的脚本
Jan 06 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
原生js实现吸顶效果
Mar 13 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
js实现轮播图特效
May 28 Javascript
在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强制下载PDF文件示例
2014/01/17 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python正则捕获操作示例
2017/08/19 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python 同时读取多个文件的例子
2019/07/16 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
教师职业道德事迹材料
2014/08/18 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
师德承诺书
2015/01/20 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js
SQL中的连接查询详解
2022/06/21 SQL Server
服务器SVN搭建图文安装过程
2022/06/21 Servers