使用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实现自定义对话框的代码
Jun 15 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
原生js实现购物车
Sep 23 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP基本语法总结
2014/09/06 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
wxpython实现图书管理系统
2018/03/12 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python多线程实现TCP服务端
2019/09/03 Python
详解Python3定时器任务代码
2019/09/23 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
军校本科大学生自我评价
2014/01/14 职场文书
药品采购员岗位职责
2014/02/08 职场文书
《问银河》教学反思
2014/02/19 职场文书
大学三年计划书范文
2014/04/30 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
故宫英文导游词
2015/01/31 职场文书
2016年猴年新春致辞
2015/08/01 职场文书