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

npm run build

├─ 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 端入口模板

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)"color: #ff0000">页面建立

根据路由建立需要的四个页面：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)"color: #ff0000">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="/UploadFiles/2021-04-02/selected === index">

接下来就是比较关键的一点，就是这个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 官方技术文档"_blank" href="https://wechat-miniprogram.github.io/kbone/docs/#介绍">文档)
附上github地址： 

to-do-list 

multipages

                                
                                

                                    小程序,Kbone,小程序,Kbone框架 
                                

                                    标签：
                                        
小程序,Kbone,小程序,Kbone框架
                                     

                                
蝙蝠岛资源网 Design By www.hbtsch.com