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> <div></div> <div 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: