提示：可直接看“总结”和“我的解决方案”。

新版本中官方方案：cover-view，cover-image

参考：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

cover-view内只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。也就是说若cover-view内嵌套了其它类型的view，则在真机上会被忽略！
如下：scroll-view在真机上是被忽略的。

如下：scroll-view在真机上是被忽略的。

<cover-view>
    <scroll-view>...</scroll-view>
<cover-view>

但是，我错了，在andriod真机上，可能还是不好使！！

官方给出的答案：让你的cover-view延迟渲染，即在canvas渲染完之后！（但是canvas是延后动态加载的情况怎么办？）

的确，能遮盖。

但是自定义组件延迟加载后仍然无效！最多第一次显示，但第二次就不显示了。于是找到官方这句：

15.bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示

也就是说：自定义组件中cover-view是无效的，不显示！

尝试background方案：背景图

即设置弹出层的background背景图片。可以采用base64方案。制作方法：

１、用图像制作工具制作一个1x1像素的图片，设置成你想要的背景色，保存为png格式；

２、最好用压缩工具压缩一下，保持最小，一般在50字节左右最好；

３、用在线转base64工具转一下，如：http://imgbase64.duoshitong.com/，生成类似如下内容：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=

４、放到background的url中：

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=) repeat;

结论：无效！

坑记录

1. 采用自定义组件弹层，slot内不能使用cover-view,cover-image；若自定义组件本身使用了cover-view，slot内容也不能使用view等组件。切记：cover-view内中只能嵌套cover-view和cover-image。如下：

   情况一：自定义组件本身使用cover-view

my-component.wxml

    <cover-view ..>
     <slot></slot>
    </cover-view

my-page.wxml

    <my-component ..>
     <view>view是无效的</view>
     <cover-view>文字内容不会显示</cover-view>
     <cover-image src='..' alt="图片也不会显示"></cover-image>
    </my-component>

情况二：自定义组件本身不使用cover-view

my-component

    <view ..>
     <slot></slot>
    </view

my-page.wxml

     <view>view有效，文字正常显示，但不能覆盖canvas</view>
     <cover-view>文字内容不会显示</cover-view>
     <cover-image src='..' alt="图片也不会显示"></cover-image>
    </my-component>

2. 采用自定义组件弹层，slot内容只能是纯文字才可以正常覆盖canvas等原生组件

my-component.wxml

<cover-view ..>
 <slot></slot>
</cover-view>

my-page.wxml

<my-component ..>
 这里只能是纯文字
</my-component>

3. 不使用自定义组件，cover-view在canvas之前渲染，不会覆盖canvas。

总结：

1. 不要使用hidden属性来控制弹层，采用wx:if动态渲染弹出层。

2. 使用cover-view制作自定义弹层组件时，slot内空只能是纯文字。

3. 使用view制作自定义弹层组件时，slot使用cover-view也是覆盖不了canvas的

4. 不使用自定义组件，可以使用cover-view延后canvas渲染的情况下，才能有效覆盖（这是唯一有效的覆盖）

我的解决方案：

1. 采用自定义组件，则在弹层时将下方的canvas隐藏；自定义组件中使不使用view包裹

2. 不使用自定义组件，采用wx:if控制cover-view弹层，正常覆盖canvas