小程序采坑

全局样式选择器*被禁用

*{
  box-sizing: border-box;
}

上面的代码在编译的时候就会报错，因为小程序禁用了这类选择器。大胆猜测具体原因：这类作用范围比较广的选择器和自定义组件的样式隔离产生了冲突？？

那怎么去给小程序添加全局通用样式？看来只能自己把用到的标签都手动写一遍了，还好网上有现成的代码可以贴：

view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad{
  box-sizing: border-box;
}

自定义组件，bind:tap调用两次

封装基础组件时，例如button，下面的写法应当避免：

onTap(e) {
  if (!this.data.disabled && !this.data.loading) {
    this.triggerEvent('tap', e.detail)
  }
},

<button bindtap="onTap"></button>

这样封装出来的组件，会触发两次tap事件，一次是小程序自身触发的，一次是通过triggerEvent触发。

可以换一个非小程序内置的事件类型，比如click：

onTap(e) {
  if (!this.data.disabled && !this.data.loading) {
    this.triggerEvent('click', e.detail)
  }
},

阻止tap事件冒泡也可以解决：

<button catchtap="onTap"></button>