微信小程序 webview 在webview上层弹窗

在微信小程序中，可以使用cover-view来在web-view上层显示弹窗。下面是两种实现方式的示例代码：

1. 使用position属性控制弹窗位置：

<web-view src="{{url}}">
  <cover-view class="btns">
    <cover-image class="btn" src="/resources/view/btn.png" bindtap="handleTo"></cover-image>
  </cover-view>
</web-view>

<style>
.btns {
  position: fixed;
  bottom: 80rpx;
  right: 30rpx;
  z-index: 99998;
}
.btns .btn {
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin-bottom: 20rpx;
  border-radius: 100%;
}
</style>

2. 使用wx:if属性控制弹窗显示：

<web-view src="{{url}}">
  <cover-view class="btns" wx:if="{{isShow}}">
    <cover-image class="btn" src="/resources/view/btn.png" bindtap="handleTo"></cover-image>
  </cover-view>
</web-view>

<script>
Page({
  data: {
    url: '',
    isShow: false,
  },
  onLoad: function() {
    // 从后台获取到url
    this.setData({ url: payload });
    setTimeout(() => {
      this.setData({ isShow: true });
    }, 300);
  },
  handleTo: function() {
    // 点击按钮的事件处理函数
  }
});
</script>

这两种方式都可以在web-view上层显示一个图标按钮弹窗。第一种方式使用了CSS的position属性来控制弹窗的位置，第二种方式使用了wx:if属性来控制弹窗的显示与隐藏。