关于uni-app的各种坑（Popup组件、background-image、层级、v-show）

一、关于官方维护的组件不起作用的问题，如：Popup 弹出层组件的maskClick属性不起作用的问题。

解决方法：

1. 直接源码
2. 重新下载某个组件，替换掉原来的

二、关于background-image在微信小程序不起作用的问题

解决方法：

1. 外面再包一层，里面改成<image />标签：<view> <image /> </view>
2. 使用require()

• HTML

:style="{ backgroundImage: 'url(' + imgUrl + ')',}"

• data

imgUrl: require('../static/xxx.jpg'),

3. 使用base64

• 将图片 在线 转换为base64，并复制下来
• 在url()里将刚才复制的base64码粘贴上去就可以了

三、关于使用canvas的层级无法设置，默认最高的问题

想在canvas上写个保存的按钮，在开发者工具上看没问题，但在真机上不显示。其实这是微信小程序的问题，因为canvas是微信的原生组件，所以设置 z-index 是不起作用的，要覆盖原生组件的层级，必须用相关的cover标签，而且是要显示的标签都要使用cover，不单是最外层标签使用：微信开发文档相关链接

<view>
    <canvas>xxxxxx</canvas>
    <cover-view>
    	<cover-image src="XX.png" class="save" />
    	<cover-view class="xx">保存</cover-view>
    </cover-view>
</view>

四、v-show不起作用，只能用v-if/v-else

array数组或者变量的更改并没有触发v-show这块dom的更新。
原因是：uniapp中针对数组底层都是差量更新，而微信小程序中使用hidden="{{array.length}}"针对数组差量更新并不会动态更新 详见 传送门