微信小程序的web-view中添加按钮

需求设计
小程序的首页是一个web-view页面，我们需要在左上角加一个返回按钮，使得从首页进去的所有内页都能一键返回到最外层的一级页面。
在涉及内页较多的情况的我们不可能每一个页面都加返回按钮，所以考虑在小程序上加一个返回按钮 这样所有页面都可用，也不用再考虑有多少内页

关于web-view

web-view在小程序中是铺满整个屏幕的，不能设置宽高层级极高 不能通过z-index改变元素属性来浮在上面，页面中的其他元素都会被webview覆盖

那么想要在页面中加返回按钮是不是不可行了呢？

解决办法
我们可以使用cover-view

示例代码

<view class="duiba-container">
  <view>
    <web-view src="{{url}}">
      <cover-view class="duiba-back-btn" bindtap="handleBackTo">
        <cover-image src="//yun.duiba.com.cn/saas/images/zjzy-icons/back-btn.png"></cover-image>
      </cover-view>
    </web-view>
  </view>
</view>

⚠️⚠️⚠️注意：只有真机才能实现效果，微信开发者工具不适用
css

.duiba-back-btn {
  position: fixed;
  z-index: 999999;
  top:20rpx;
  left:0;
  width:100rpx;
  height:50rpx;
}

遇到的问题：

• 直接在cover-view上设置background-image无效
• 也不能设置单边的border
• cover-view使用问题具体可参考这里
  

暂没遇到兼容性问题，开发版、体验版、线上版都ok