kbone吃螃蟹tips

图片

1、base64打包进去的图片可以正常显示

2、稍大图片使用base64不太经济，建议以网络链接引入
src=“https://test.miniprogram.com/res/going_0bd161.png”

kbone-cli 生产的默认项目

生成的默认项目用的 kbone-ui是 0.5.2版本，需要手动升级到0.6.2；否则swiper组件会有问题。

关于跳转后小程序左上角返回键问题

只有页面栈>1的时候才会有返回键，就是你必须是从别的页面跳转过来的。

kbone支持多页，只需要在build目录下的miniprogram.config.js以及webpack.mp.config.js里配置router和entry等信息，就可以使用window.open进行不同页面跳转，小程序会相应的返回键。

单页内使用vue-router进行路由不会出现返回键，因为这只是vue的router组件内容的切换，对于小程序而言页面没有变化，而且切换的时候，也没有小程序页面从右往左划入的效果。

单页内使用window.open在web里可以跳转，但是小程序里是不行的。

官方的kbone-cli提供的是单页配置，多页配置可参考 https://github.com/Tencent/kbone/tree/develop/examples 里面的demo5和demo18

某些不适配的dom/bom

虽然此方案将完整的 vue runtime 包含进来了，但必然存在一些无法直接适配的接口，比如 getBoundingClientRect，一部分会通过 dom/bom 扩展 api 间接实现，一部分则完全无法支持。查看 dom/bom 扩展 api 文档。

web和小程序业务逻辑不一致的部分

可能存在部分逻辑在 web 端和小程序端需要使用不同的实现，该部分代码可以抽离成一个单独的模块或者插件，暴露接口给业务端代码使用。在模块内可以使用上述提到的 process.env.isMiniprogram 环境变量进行判断区分当前运行环境。比如上述提到的 actionSheet 实现就可以抽离成一个 vue 插件实现。

PS：注意这里使用 process.env.isMiniprogram 环境变量时尽量不要加其他动态条件，以方便 webpack 编译时剪除死代码，比如 if (false) { console.log(‘xxxx’) } 就属于死代码

无需在小程序展示的 dom 节点

可以使用另外一个 loader 对这些节点进行删减，在 webpack 配置中 vue loader 执行之前再添加一个 vue-improve-loader：

然后在 vue 文件中给要剔除的节点加上 check-reduce 属性：

因为 web 端代码构建和小程序端代码构建走不同的配置，所以 web 端代码会忽略这个