图片

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

2、稍大图片使用base64不太经济，建议以网络链接引入 src="test.miniprogram.com/res/going_0…"

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提供的是单页配置，多页配置可参考 github.com/Tencent/kbo… 里面的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.

kbone吃螃蟹tips

图片