手把手带你入门微信小程序新框架Kbone的使用

Kbone 框架

前些天在微信上收到了微信开发者公众号的文章推送《揭开微信小程序Kbone的神秘面纱》,心想:微信小程序有新框架了?抱着学习的态度点进去看了一眼,看过之后觉得这框架也太宠开发者了吧,不愧是微信团队出品。

原来这个框架早在去年就已经发布了,看完只恨自己没有早点知道消息开始学习这个框架。我写本文的目的也是为了跟个风,想要让更多的人能够知道这个框架,感受它的便利,希望好学的你可以停下脚步看看~

Kbone 是什么?

看到这里我也不多说了,简单介绍一下 Kbone 是什么。用官方高大上的话来说:

Kbone 是一个致力于微信小程序和 Web 端同构的解决方案,在适配层里模拟出浏览器环境,让 Web 端的代码可以不做什么改动便可运行在小程序里。

用简单粗暴一点的话来说,Kbone 这个框架可以让你只需要写一份代码,就能够在两端运行,只需要进行一些配置,轻松跑小程序和 Web 两个端。

Kbone 初探 --- todoList

吹了这么多,也该上手写代码了。刚开始入门 Kbone,我们从一个简单的 todoList 开始,当然,官方也提供了一系列的demo,我也参考了官方给的 demo。Talk is cheap,let's see the code ~

预览

正式开始之前我们先看看效果图,感受一下 Kbone 框架一份代码跑两端的神奇

开发准备

安装脚手架/初始化项目

npm install -g kbone-cli
kbone init to-do-list

代码构建

npm run build

(具体的页面介绍后面会讲到)

Coding

来到 src/home/index.vue,项目的首页入口放在这里(至于为什么是这里,后面同样会介绍到)
在这里直接写业务代码就可以了,为了不使文章显得臃肿,有兴趣的可以看我的源码。

项目运行

  • 小程序端:npm run mp
  • Web端: npm run web

通过两个命令把项目运行起来你就会发现 Kbone 的神奇之处,通过一份代码(这里我是基于 Vue)你就可以拥有两端的效果,再也不用担心同时维护两份代码了。

Kbone 进阶 --- 多页开发

刚才做了一个比较简单的 todoList,对 Kbone 进行了一个简单的了解,到这里正式进入重点,接下来我们就来详细的讲讲它的使用和多页开发。

Kbone 目录了解

├─ build
│ ├─ miniprogram.config.js // mp-webpack-plugin 配置
│ ├─ webpack.base.config.js // Web 端构建基础配置
│ ├─ webpack.dev.config.js // Web 端构建开发环境配置
│ ├─ webpack.mp.config.js // 小程序端构建配置
│ └─ webpack.prod.config.js // Web 端构建生产环境配置
├─ dist
│ ├─ mp      // 小程序端目标代码目录,使用微信开发者工具打开,用于生产环境
│ └─ web     // web 端编译出的文件,用于生产环境
├─ src
│ ├─ common     // 通用组件
│ ├─ mp      // 小程序端入口目录
│ │ ├─ home    // 小程序端 home 页面
│ │ │ └─ main.mp.js  // 小程序端入口文件
│ │ └─ other    // 小程序端 other 页面
│ │  └─ main.mp.js  // 小程序端入口文件
│ ├─ detail     // detail 页面
│ ├─ home     // home 页面
│ ├─ list     // list 页面
│ ├─ router     // vue-router 路由定义
│ ├─ store     // vuex 相关目录
│ ├─ App.vue    // Web 端入口主视图
│ └─ main.js    // Web 端入口文件
└─ index.html    // Web 端入口模板

通过官方给我们的这个目录结构,我们可以很清晰的看到每个目录下各个文件的作用。这里我就对其中的一些文件进行解释一下。

miniprogram.config.js

这个文件是关于小程序端的一些配置,类似于原生的 json 配置

webpack.mp.config.js

小程序端构建配置,也就是构建小程序端代码的 webpack 配置,多页开发中会用到其中的一部分配置。

src/mp & main.mp.js

mp 用来存放小程序端的入口文件,这里设置小程序的一些页面,main.mp.js 相当于一个挂载操作,把它看成 mpvue 里面的 main.js 比较好理解,设置页面路由和挂载映射 Vue 里面的页面。

(其他的比较好理解,我就不一一赘述了)

Kbone 多页开发

因为作者之前写了一个微信小程序的高仿项目,有兴趣的可以去看看:

👉《京东优选小程序快车等你上车~》

看了官方给的多页开发的 demo之后,就想把自己做的小程序项目简单的用 Kbone 做几个页面尝尝鲜,于是花了点时间动了动手,先看看两端跑起来是什么效果:

从图片上来看 Web 端和小程序端还是有细微的差别,不过只是在于样式上,毕竟想做到完全一样还是比较困难的。话不多说,接下来我们就来解构分页开发。

Vue 路由配置

Vue 的路由配置比较简单,直接在 src/router/index.js 下配置就好了,比较简单,不多说。

import Vue from 'vue'
import Router from 'vue-router'

const Index = () => import('@/index/Index.vue')
const Explore = () => import('@/explore/Index.vue')
const Cart = () => import('@/cart/Index.vue')
const Me = () => import('@/me/Index.vue')

Vue.use(Router)

export default new Router({
 mode: 'history',
 routes: [
 {
  path: '/(home|index)?',
  name: 'Home',
  component: Index,
 },
 {
  path: '/index.html',
  name: 'HomeHtml',
  component: Index,
 },
 {
  path: '/explore',
  name: 'Explore',
  component: Explore,
 },
 {
  path: '/cart',
  name: 'Cart',
  component: Cart,
 },
 {
  path: '/me',
  name: 'Me',
  component: Me,
 }
 ],
})

页面建立

根据路由建立需要的四个页面:index、explore、cart、me 并给它们写上相应的代码。
我只写了 index 页面的代码,结构比较简单,为了看效果放的是假数据,有兴趣的参考一下看我的源码

小程序端页面建立/挂载

之前已经介绍过 src/mp 下存放的是小程序端的入口文件,也就是相当于小程序端页面的对于 Vue 页面的映射,每个文件夹下很简单,就一个 main.mp.js

import Vue from 'vue'
import Router from 'vue-router'
import { sync } from 'vuex-router-sync'
import App from '../../App.vue'
import store from '../../store'
import Index from '../../index/Index.vue'

Vue.use(Router)

const router = new Router({
 mode: 'history',
 routes: [{
 path: '/index',
 name: 'Index',
 component: Index,
 }],
})

export default function createApp() {
 const container = document.createElement('div')
 container.id = 'app'
 document.body.appendChild(container)

 Vue.config.productionTip = false

 sync(store, router)

 return new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
 })
}

(每个页面的配置都差不多,只是路由不一样,我选取了 index 页面的)
这其中引入了 Vue 的路由并配置了小程序端每个页面对应的 Vue 页面进行渲染,有一点 Vue 基础的还是比较好看懂的。

小程序入口

配置到了上一步,你可能觉得已经差不多了,因为在 Web 端已经可以通过路由看到效果了,然而在小程序端还看不到具体的效果甚至还在报错,这是因为少了关键的一步 --- 小程序页面入口文件的设置。

举个例子来说,上一步我们是给小程序的页面配好了钥匙,但是还没有把它拿过来去开相应的锁,现在我们就要拿它来开相应的的锁(小程序入口配置) --- webpack.mp.config.js

entry: {
 // js 入口
 index: path.resolve(__dirname, '../src/mp/index/main.mp.js'),
 explore: path.resolve(__dirname, '../src/mp/explore/main.mp.js'),
 cart: path.resolve(__dirname, '../src/mp/cart/main.mp.js'),
 me: path.resolve(__dirname, '../src/mp/me/main.mp.js'),
},

在这里配置一下小程序的入口就能在小程序看到首页(/index)的效果了

tabBar 配合

配置好了入口仅仅只能看到首页(/index)的效果,这就需要使用 tabBar 了。
之前在说页面的作用的时候,我特意提了一下 miniprogram.config.js 是关于小程序的一些配置,作用就是在这里。

简单提一嘴 miniprogram.config.js 里面待会儿需要用到的配置项:

  • entry:入口页面路由(一定要主页配置了tabBar之后的入口路由)
  • router:各个页面自己的路由,页面之间跳转用的
  • generate:输出小程序配置(tabBar配置在这里)
  • app:小程序窗口配置,相当于原生 app.json 中的 window 配置
  • pages:每个页面单独的配置,相当于原生中每个页面对应的 json 文件

开始配置(只列出我修改了的配置)

entry: '/index',
router: {
 index: ['/(home|index)?','/index.html'],
 explore: ['/explore'],
 cart: ['/cart'],
 me: ['/me'],
},
redirect: {
 notFound: 'index',
 accessDenied: 'index',
},
generate: {
 tabBar: {
  color: '#000000',
  selectedColor: '#DE554F',
  backgroundColor: '#ffffff',
  list: [{
   pageName: 'index',
   text: '优选',
   iconPath: path.resolve(__dirname, '../src/img/home.png'),
   selectedIconPath: path.resolve(__dirname, '../src/img/home-active.png'),
  }],
 },
},
pages: {
 explore: {
  extra: {
   navigationBarTextStyle: 'white'
  }
 }
},

由于这里每一项的配置都是同样的方法,所以我就只拿一项举例子。

Web 端完善

做到上一步的时候,小程序端的效果已经完全出来了,但是 Web 端运行起来没有 tabBar,这就需要自己做一个 tabBar 放在页面上了,这里把它抽出来作为一个组件放在需要的页面上。

我的页面结构大致是这样的:

<template>
 <div class="tabBar for-web">
 <div class="tabBar_border"></div>
 <div class="tabBar_item" v-for="(item, index) in list" :key="index" :data-path="item.pagePath" :data-index="index" @click="switchTab">
  <img :src="selected === index?item.selectedIconPath:item.iconPath">
  <span :class="selected === index ? 'selected' : ''">{{item.text}}</span>
 </div>
 </div>
</template>

接下来就是比较关键的一点,就是这个tabBar怎么让它隐藏起来不再小程序端显示。这里有三种方法:

  • vue-improve-loader(给容器加上check-reduce)
  • reduce-loader(引入的时候在路径前加上reduce-loader!)
  • 通过样式隐藏

前两种在构建的时候就会被自动干掉,这里我个人倾向的是第三种通过样式,给容器加一点样式。

.miniprogram-root {
 .for-web {
 display: none;
 }
}

做到这一步的时候分页开发加 tabBar 就已经实现了,剩下的就是往每个页面上添加自己的业务内容。

小结

总的来说使用 Kbone 进行多页开发的步骤就是:

  • 设置 Vue 路由
  • 建立对应页面并进行小程序页面挂载注册
  • 修改小程序入口并配置对应的路由(如果有需要可以继续配置 tabBar)

踩坑记录

开发中用到的图片等静态资源

在写 demo 的时候发现一个问题,自定义 tabBar 的图片和页面需要的图片文件构建的时候始终带不过去,查了一下官方提供的文档,目前暂不支持相对路径,静态资源可以考虑转成 base64 或者使用网络地址,这里用了一个比较笨的办法,把图片上传到微博然后保存在线地址。

关于样式

rpx 在 kbone 中好像不支持,尝试过 vue+kbone 对 web 端采用px适配,在构建小程序时希望能转成rpx,但可惜的是不会这样,去微信开放社区看了一下说要用 rem 做适配(要在 mp-webpack-plugin 这个插件的配置中的 global 字段内补充 rem 配置)

构建 npm 相关

开发者工具报错 Uncaught Error: module "pages/ home/miniprogram-render" is not defined
解决方案:开发者工具重新构建 npm
如果还是无法解决,删除打包出来的小程序文件,重新打包

swiper

swiper编译后在小程序中无法滚动,会直接并列平铺展示出来。根据文档的说法在前面加上了 wx- 的前缀貌似也没用,还需要进一步探索一下

(更多的踩坑记录可以看我的readme~)

最后一点

最后还是想说,这个框架对于开发者还是比较友好的,解决了长久以来微信小程序和 Web 两个端的代码问题,在实际中可以少写一份代码,极大的减轻了开发和维护的工作量,虽然目前还存在一些 bug,但是我相信开发团队一定会努力的完善它。如果你觉得有用的话也用起来吧~ (Kbone 官方技术文档👉文档)

附上github地址:
to-do-list
multipages

到此这篇关于手把手带你入门微信小程序新框架Kbone的使用的文章就介绍到这了,更多相关小程序新框架Kbone内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用kbone解决Vue项目同时支持小程序问题

    什么是kbone 微信小程序开发过程中,许多开发者会遇到 小程序 与 Web 端一起的需求,由于 小程序 与 Web 端的运行环境不同,开发者往往需要维护两套类似的代码,这对开发者来说比较耗费力气,并且会出现不同步的情况. 为了解决上述问题,微信小程序推出了同构解决方案 kbone 来解决此问题. 那么, kbone 要怎么使用呢?这里我们将通过一个 todo 的例子来跟大家讲解. 基本结构 首先,我们来看下一个基本的 kbone 项目的目录结构(这里的 todo 是基于 Vue 的示例, kb

  • 手把手带你入门微信小程序新框架Kbone的使用

    Kbone 框架 前些天在微信上收到了微信开发者公众号的文章推送<揭开微信小程序Kbone的神秘面纱>,心想:微信小程序有新框架了?抱着学习的态度点进去看了一眼,看过之后觉得这框架也太宠开发者了吧,不愧是微信团队出品. 原来这个框架早在去年就已经发布了,看完只恨自己没有早点知道消息开始学习这个框架.我写本文的目的也是为了跟个风,想要让更多的人能够知道这个框架,感受它的便利,希望好学的你可以停下脚步看看~ Kbone 是什么? 看到这里我也不多说了,简单介绍一下 Kbone 是什么.用官方高大上

  • 150行代码带你实现微信小程序中的数据侦听

    在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面通用的数据存储容器, 将它绑定到app对象后, 就能在每一个页面都自由的操纵这个对象. 然而在实践中, 由于这个对象及其属性不具备响应式条件, 它不能直接参与业务逻辑的编写, 能力仅仅局限于数据储存. 若是在VueJS项目中, 我们可能经常使用到 Vue.$watch 去侦听某个数据是否发生变化, 小程序却缺乏这种能力. 在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器(下简称VX): // 一个快

  • 一文带你了解微信小程序数据绑定、事件绑定以及事件传参、数据同步

    目录 数据绑定 基本原则 在data中定义数据 Mustache语法 Mustache语法的应用 绑定内容 绑定属性 运算(三元运算.算术运算等) 事件绑定 什么是事件? 常用事件 事件对象属性 target与currentTarget的区别 bindtap语法格式 在事件处理函数中为data赋值 事件传参 查看参数 bindinput语法格式 实现文本框与data之间的数据同步 总结 数据绑定 基本原则 在data中定义数据 在WXML中使用数据 在data中定义数据 在页面对应的.js 文件

  • 微信小程序第三方框架对比 之 wepy / mpvue / taro

    众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正; 小程序开发有哪些痛点

  • 微信小程序wepy框架学习和使用心得详解

    一.微信小程序wepy框架简介: 微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等; 目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性.相对更容易上手,提高开发效率; 二.WePY项目的创建与目录结构 WePY的安装或更新都通过npm进行,全局安装或更新WePY

  • 基于mpvue搭建微信小程序项目框架的教程详解

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发 前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用

  • 微信小程序 wepy框架与iview-weapp的用法详解

    最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看看(https://github.com/Tencent/weui-wxss),这里主要做view-weapp的介绍 小程序相关项目 1.wepy项目     https://github.com/Tencent/wepy 2.iview-weapp https://weapp.iviewui.co

  • 新手快速入门微信小程序组件库 iView Weapp

    介绍 iView Weapp提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库. 使用步骤 1:首先在github上面下载组件库代码 github 2:下载之后解压 可以看到解压的组件文件内容,选择 dist文件,将 dist 目录拷贝到自己的小程序项目中 3:开始写代码 写页面效果,写一个按钮 在json文件里面引入组件 { "usingComponents": { "i-button":

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • 微信小程序wepy框架笔记小结

    该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风 格上80%以上接近VUE 优势 组件化开发 小程序虽然有标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码与交互事件 仍需在页面处理.无法实现组件化的松耦合与复用的效果. wepy组件示例 // index.wpy <template> <view> <panel> <h1 slot="title"></h1> </panel>

随机推荐