手把手带你入门微信小程序新框架---Kbone

时间 2020-02-26

标签手把手入门微信程序框架 kbone 繁體版

原文原文链接

做者：Horace
ps：新人小白一枚，若有错误，欢迎指出~

Kbone 框架

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

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

Kbone 是什么？

看到这里我也很少说了，简单介绍一下 Kbone 是什么。用官方高大上的话来讲：vue

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

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

Kbone 初探 --- todoList

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

预览

正式开始以前咱们先看看效果图，感觉一下 Kbone 框架一份代码跑两端的神奇 github

开发准备

安装脚手架/初始化项目
npm install -g kbone-cli
kbone init to-do-list
代码构建
npm run build

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

Coding

来到 src/home/index.vue，项目的首页入口放在这里(至于为何是这里，后面一样会介绍到)
在这里直接写业务代码就能够了，为了避免使文章显得臃肿，有兴趣的能够看个人源码。vue-router

项目运行
小程序端：npm run mp
Web端: npm run web

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

Kbone 进阶 --- 多页开发

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

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 里面待会儿须要用到的配置项：
1. entry：入口页面路由(必定要主页配置了tabBar以后的入口路由)
2. router：各个页面本身的路由，页面之间跳转用的
3. generate：输出小程序配置(tabBar配置在这里)
4. app：小程序窗口配置，至关于原生 app.json 中的 window 配置
5. 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