看了官方给的多页开发的 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 文件
开始配置(只列出我修改了的配置)