使用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 避免闭包引发的问题
Mar 17 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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
Look And Say 序列php实现代码
2011/05/22 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php 生成短网址原理及代码
2014/01/23 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
Python实现的栈(Stack)
2018/01/26 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python 读取DICOM头文件的实例
2018/05/07 Python
python3判断url链接是否为404的方法
2018/08/10 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
python迭代器常见用法实例分析
2019/11/22 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
商场促销活动总结
2014/07/10 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
白酒代理协议书范本
2014/10/26 职场文书
创先争优活动个人总结
2015/03/04 职场文书
Python字符串的转义字符
2022/04/07 Python