评论

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

hey,同学。这里是kbone~

什么是kbone

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

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

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

基本结构

首先,我们来看下一个基本的 kbone 项目的目录结构(这里的 todo 是基于 Vue 的示例,kbone 也有 ReactPreactOmi 等版本,详情可移步 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 自提。

最后

如果你想了解更多 kbone 相关的使用及详情,可移步 kbone github

如有疑问,可到 Kbone小主页 发帖沟通。

最后一次编辑于  04-22  
点赞 14
收藏
评论

36 个评论

  • 小满
    小满
    2019-10-31
    哼╯^╰
    2019-10-31
    赞同 3
    回复
  • 赵自煜
    赵自煜
    2019-11-08

    麻烦问一下:kbone对于mpvue的长处体现于哪些方面?说明有点少不能get到。

    2019-11-08
    赞同 2
    回复 3
    • 小程序技术专员-binnie
      小程序技术专员-binnie
      2019-11-08
      因为原理是提供底层适配器的方式,所以支持更为全面的 vue 特性(不会对 vue runtime 进行裁剪魔改,比如 v-html、ref、vue-router 等都可以直接用),提供更为接近 Web 端的开发体验。同时这种运作原理也可以轻易的扩展到 react、preact 等
      2019-11-08
      2
      回复
    • 星河
      星河
      2019-12-31
      你好,请问你修改代码保存代码编译速度快吗? 我的每次修改都要10几秒的编译时间
      2019-12-31
      回复
    • 小程序技术专员-binnie
      小程序技术专员-binnie
      02-28回复星河
      是正常的哦,可以对比一下web和小程序的时间
      02-28
      回复
  • Natsuki
    Natsuki
    2019-10-31

    6666,🚀刷起来

    2019-10-31
    赞同 2
    回复 1
    • 星河
      星河
      2019-12-31
      你好,请问你修改代码保存代码编译速度快吗? 我的每次修改都要10几秒的编译时间
      2019-12-31
      回复
  • if
    if
    03-04

    刚出来还需要踩坑啊。

    03-04
    赞同 1
    回复 5
    • 小程序技术专员-binnie
      小程序技术专员-binnie
      03-04
      已经出了一段时间了,有问题可以在kbone社区提问哈
      03-04
      回复
    • 落叶
      落叶
      03-14
      还不如用uni-app,现在才支持h5跟小程序同时而已,uni-app还可以安卓跟ios一起
      03-14
      回复
    • 就叫余生吧~不改了🍶
      就叫余生吧~不改了🍶
      03-24回复落叶
      你试试把原生vue项目 迭代到小程序~   现在给你一个已经上线的H5vue开发的 要你把他做成小程序~  你打算在uniAPP慢慢改?
      03-24
      回复
    • 就叫余生吧~不改了🍶
      就叫余生吧~不改了🍶
      03-24回复落叶
      看情况而定吧~
      03-24
      回复
    • 哈
      06-05回复就叫余生吧~不改了🍶
      当你使用了uniapp和kbone,你会发现uniapp有多美好,uniapp要把h5vue迭代到小程序比kbone至少目前简单多了。(不是杠精,个人开发后的看法
      06-05
      回复
  • 娇娇
    娇娇
    02-19
    kbone中可以使用onPullDownRefresh方法吗
    
    02-19
    赞同 1
    回复 1
  • Sailing
    Sailing
    2019-11-14

    请问里边有没有坑?

    2019-11-14
    赞同 1
    回复 5
  • Judy
    Judy
    07-23
    请问H5小游戏可以通过Kbone转换成微信游戏吗?
    07-23
    赞同
    回复
  • Kim
    Kim
    05-21

    flutter web 版怎么转呢

    05-21
    赞同
    回复
  • 梦
    04-30
    "D:\Program Files (x86)\nodejs\node.exe" "D:\Program Files (x86)\Yarn\bin\yarn.js" run serve
    yarn run v1.22.4
    $ vue-cli-service serve
     INFO  Starting development server...
    Starting type checking service...
    Using 1 worker with 2048MB memory limit
    98% after emitting CopyPlugin
    
    
     DONE  Compiled successfully in 4202ms                                                                                                                                                                   17:29:36
    
    
    ERROR in E:/localityProject/myApp/kbone/node_modules/@types/webpack-env/index.d.ts(283,13):
    283:13 Duplicate identifier 'require'.
        281 | interface NodeRequire extends NodeJS.Require {}
        282 | 
      > 283 | declare var require: NodeRequire;
            |             ^
        284 | 
        285 | /**
        286 |  * The resource query of the current module.
    ERROR in E:/localityProject/myApp/kbone/node_modules/@types/webpack-env/index.d.ts(341,13):
    341:13 Cannot redeclare block-scoped variable 'module'.
        339 | interface NodeModule extends NodeJS.Module {}
        340 | 
      > 341 | declare var module: NodeModule;
            |             ^
        342 | 
        343 | /**
        344 | * Declare process variable
    ERROR in E:/localityProject/myApp/kbone/node_modules/miniprogram-api-typings/types/wx/lib.wx.api.d.ts(16378,15):
    16378:15 Cannot redeclare block-scoped variable 'console'.
        16376 |     type WxStopRecordSuccessCallback = (res: GeneralCallbackResult) => void
        16377 | }
      > 16378 | declare const console: WechatMiniprogram.Console
              |               ^
        16379 | declare const wx: WechatMiniprogram.Wx
        16380 | declare function require(module: string): any
        16381 | declare let module: { exports: any }
    ERROR in E:/localityProject/myApp/kbone/node_modules/miniprogram-api-typings/types/wx/lib.wx.api.d.ts(16380,18):
    16380:18 Duplicate identifier 'require'.
        16378 | declare const console: WechatMiniprogram.Console
        16379 | declare const wx: WechatMiniprogram.Wx
      > 16380 | declare function require(module: string): any
              |                  ^
        16381 | declare let module: { exports: any }
        16382 | declare let exports: any
        16383 | 
    ERROR in E:/localityProject/myApp/kbone/node_modules/miniprogram-api-typings/types/wx/lib.wx.api.d.ts(16381,13):
    16381:13 Cannot redeclare block-scoped variable 'module'.
        16379 | declare const wx: WechatMiniprogram.Wx
        16380 | declare function require(module: string): any
      > 16381 | declare let module: { exports: any }
              |             ^
        16382 | declare let exports: any
        16383 | 
        16384 | /** [clearInterval(number intervalID)](https://developers.weixin.qq.com/miniprogram/dev/api/base/timer/clearInterval.html)
    ERROR in E:/localityProject/myApp/kbone/node_modules/typescript/lib/lib.dom.d.ts(19729,13):
    19729:13 Cannot redeclare block-scoped variable 'console'.
        19727 | declare var sessionStorage: Storage;
        19728 | declare var localStorage: Storage;
      > 19729 | declare var console: Console;
              |             ^
        19730 | /**
        19731 |  * Fires when the user aborts the download.
        19732 |  * @param ev The event.
    Version: typescript 3.8.3
    Time: 4162ms
    
    
      App running at:
      - Local:   http://localhost:8081/
      - Network: http://192.168.2.157:8081/
    
    
      Note that the development build is not optimized.
      To create a production build, run yarn build.
    
    
    
    
    Process finished with exit code 1
    
    这是什么错呀,大师给看一下,
    

    04-30
    赞同
    回复 1
  • CodeMe
    CodeMe
    04-29

    有没有讨论 交流群?

    04-29
    赞同
    回复

正在加载...

登录 后发表内容