图片
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 端代码会忽略这个属性，而小程序端代码则会删减掉带这个属性的节点。以下便是会输出给 vue-loader 的代码，从构建层面上剔除掉不需要的节点。
PS：vue-improve-loader 必须在 vue-loader 之前执行，这样 vue-loader 才会接收到被删减后的代码。
小程序的某些节点不想在 web 里显示
比较优雅的解决方案是：vue-improve-loader 里增加逻辑来进行增减，类似上面的 check-reduce 这样的
// 判断节点属性
for (const attr of node.attrs) {
// 检查是否需要删减
if (attr.name === 'check-reduce') {
noCheckReduce = false;
return '';
}
// 检查是否需要替换 tagname
if (attr.name === 'check-replace-tagname') {
node.tagName = attr.value;
}
}
写 loader 的方式，可以再打包的时候就剔除结构。 如果不这么做的话，也可以通过 process.env.isMiniprogram 做逻辑判断，加变量然后 v-if。
要在打包的时候直接剔除结构得写 loader；
想使用小程序的内置组件
尽量用 html 标签代替。 一部分内置组件在 html 中没有标签可替代，那就需要使用 wx-component 标签或者使用 wx- 前缀，基本用法如下：
<!-- wx-component 标签用法 -->
<wx-component behavior="picker" mode="region" @change="onChange"
>选择城市</wx-component
>
<wx-component behavior="button" open-type="share" @click="onClickShare"
>分享</wx-component
>
<!-- wx- 前缀用法 -->
<wx-picker mode="region" @change="onChange">选择城市</wx-picker>
<wx-button open-type="share" @click="onClickShare">分享</wx-button>
如果使用 wx-component 标签表示要渲染小程序内置组件，然后 behavior 字段表示要渲染的组件名；其他组件属性传入和官方文档一致，事件则采用 vue 的绑定方式。
PS：button 标签不会被渲染成 button 内置组件，同理 form 标签也不会被渲染成 form 内置组件，如若需要使用 button 内置组件请使用 wx-component 或 wx- 前缀。
其他踩坑建议
1）如果需要使用第三方库，尽量选择使用轻量的库，以缩减构建出来的代码体积。
2）vue 组件命名尽量不要和小程序内置组件同名。
3）避免使用 id 选择器、属性选择器，尽量少用标签选择器和 * 选择器，尽可能使用 class 选择器代替。
4）为了确保模板解析不出问题，标签上布尔值属性建议使用 = 号赋值的写法。
虽然在 vue 中对于布尔 attribute (它们只要存在就意味着值为 true)但是在 kbone 里最好还是不要省略后面的=true.
项目实践
https://github.com/Susy123/groupbuy-tool
已上线小程序： 拼拼和团团