mpvue 小程序开发经验 (不定期更新)

1.公用的css.js过多，会被抽取压缩到vendor wxss/js中去, 导致文件体积过大，可能超出2048kb限制

2.自定义头部

胶囊问题大小适配：

wx.getMenuButtonBoundingClientRect()

api: https://developers.weixin.qq.com/miniprogram/dev/api/wx.getMenuButtonBoundingClientRect.html

获取右侧胶囊参数，对比写出左侧自定义样式

if (!wx.getStorageSync('capsule')) {  //从缓存中取，有则用，无则获取api并加入缓存

      this.capsule = wx.getMenuButtonBoundingClientRect()

      wx.setStorageSync('capsule', this.capsule)

} else {

      this.capsule = wx.getStorageSync('capsule')

}

<div class="left" :style="{'height': capsule.height + 'px', 'top': capsule.top + 'px'}" v-if="showButton">

        <b class="back" @click="goBack" v-if="showBack"></b>

        <i></i>

        <b class="home" @click="goHome" v-if="showHome"></b>

</div>

 

.3.为 tabBar 某一项的右上角添加文本（eg: tabBar购物车数量显示）

https://developers.weixin.qq.com/miniprogram/dev/api/wx.setTabBarBadge.html

 

wx.setTabBarBadge({

     index: 2,

    text: res.data.count+""

})

 

4.自动预览 Ctrl+Shift+p(无需扫码)