当前位置: 首页 > news >正文

kbone,十分钟让 Vue 项目同时支持小程序

什么是kbone

微信小程序开发过程中,许多开发者会遇到 小程序 与 Web 端一起的需求,由于 小程序 与 Web 端的运行环境不同,开发者往往需要维护两套类似的代码,这对开发者来说比较耗费力气,并且会出现不同步的情况。

为了解决上述问题,微信小程序推出了同构解决方案 kbone 来解决此问题。

那么, kbone 要怎么使用呢?这里我们将通过一个 todo 的例子来跟大家讲解。

基本结构

首先,我们来看下一个基本的 kbone 项目的目录结构(这里的 todo 是基于 Vue 的示例, kbone 也有 React , Preact , Omi 等版本,详情可移步 kbone github )。

因为 kbone 是为了解决 小程序 与 Web 端的问题,所以每个目录下的配置都会有两份(小程序 与 Web 端各一份)

入口

不管是 小程序 端还是 Web 端,都需要入口文件。在 src/index 目录下, main.js 为 Web 端用主入口, main.mp.js 则为 小程序 端用主入口。

当然,Web 端会比 小程序 多一个入口页面,即 index.html (位于根目录下)。

下面两段代码分别是 小程序端 入口与 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 组件转化为小程序代码。

构建代码

接着,我们需要构建代码,让代码可以运行到各自的运行环境中去。构建完成后,生产代码会位于 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 自提。

相关文章:

  • Vue 3 对 Web 应用性能的改进
  • 35 道咱们必须要清楚的 React 面试题
  • Tab切换以及缓存页面处理的几种方式
  • 11月5日发布 9个项目助你在2020年成为前端大师!
  • async/await 原理及执行顺序分析
  • 微信授权就是这个原理,Spring Cloud OAuth2 授权码模式
  • 10 个常问的 JS 面试题
  • rem使用配置
  • 使用 netlify 部署你的前端应用
  • 腾讯CDC团队:前端异常监控解决方案
  • 403- JavaScript 工具函数大全(新)
  • vue学习之深入响应式原理
  • 使用proxy实现一个双向绑定
  • 最全的 Vue 性能优化指南,经典收藏
  • web前端开发不可不知的十个小妙招,让工作更有效率,快收藏吧
  • -------------------- 第二讲-------- 第一节------在此给出链表的基本操作
  • [deviceone开发]-do_Webview的基本示例
  • “Material Design”设计规范在 ComponentOne For WinForm 的全新尝试!
  • 2017 年终总结 —— 在路上
  • JavaScript 一些 DOM 的知识点
  • Linux快速配置 VIM 实现语法高亮 补全 缩进等功能
  • nodejs实现webservice问题总结
  • React16时代,该用什么姿势写 React ?
  • 从tcpdump抓包看TCP/IP协议
  • 从零开始的webpack生活-0x009:FilesLoader装载文件
  • 翻译--Thinking in React
  • 个人博客开发系列:评论功能之GitHub账号OAuth授权
  • 聊聊directory traversal attack
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 小程序开发之路(一)
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • ​LeetCode解法汇总518. 零钱兑换 II
  • #我与Java虚拟机的故事#连载03:面试过的百度,滴滴,快手都问了这些问题
  • %3cscript放入php,跟bWAPP学WEB安全(PHP代码)--XSS跨站脚本攻击
  • (02)Hive SQL编译成MapReduce任务的过程
  • (floyd+补集) poj 3275
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (转)LINQ之路
  • .\OBJ\test1.axf: Error: L6230W: Ignoring --entry command. Cannot find argumen 'Reset_Handler'
  • .NET Micro Framework初体验(二)
  • .NET Standard、.NET Framework 、.NET Core三者的关系与区别?
  • .net开发引用程序集提示没有强名称的解决办法
  • .pyc文件还原.py文件_Python什么情况下会生成pyc文件?
  • //解决validator验证插件多个name相同只验证第一的问题
  • @converter 只能用mysql吗_python-MySQLConverter对象没有mysql-connector属性’...
  • @require_PUTNameError: name ‘require_PUT‘ is not defined 解决方法
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题
  • [20171101]rman to destination.txt
  • [c++] 单例模式 + cyberrt TimingWheel 单例分析
  • [codeforces]Recover the String
  • [HDU5685]Problem A
  • [IE编程] 打开/关闭IE8的光标浏览模式(Caret Browsing)
  • [IOI2007 D1T1]Miners 矿工配餐
  • [java进阶]——方法引用改写Lambda表达式