微信小程序cover-view标签中内嵌图片button不显示的问题

一、问题产生

开发微信小程序，需要在原生的map组件上覆盖一个按钮图片，用来进行分享（很常见的需求）。可是了解api得知，要覆盖地图组件，只能使用cover-view进行。并且官方文档说的很清楚，cover-view内部是可以镶嵌button的，并且分享功能只能通过button组件的open-type进行。写下如下代码：

<cover-view class="share-cover-view">
    <button class = "share-button" style="background-image:url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1)"></button>
 </cover-view>

.share-cover-view{
  position: absolute;
  top:100px;
  right: 30px;
  width: 100px;
  height: 100px;
  .share-button{
     width:100px;
    height: 100px;
  }
}

为了避免入坑，我还特别注意使用了网络图片(csdn的logo),然而尝试了N次，在开发者工具中可以正常显示，但是在真机上怎么试都出不来按钮。

wx.getSystemInfo接口获取信息如下。

SDKVersion: "2.10.1" version: "7.0.4" system: "iOS 10.0.1"

二、问题解决

尝试了各种方案，我去社区进行提问，发现是微信cover-view标签本身的Bug。将button按钮覆盖了。解决方案如下：

<button class="share-button">
    <cover-image src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1"></cover-image>
 </button>

使用button按钮作为根组件，再使用cover-image作为图片显示，覆盖在按钮之上。真机调试，一切ok。

另外，在社区开发者的告知下，得知map组件目前已经实现了同层，可以不必使用cover-view cover-image即可以实现覆盖在其之上。

 <view class ="cover-view-view">
    <button class = "share-button" style="background-image:url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1)"></button>
 </view>

.cover-view-view{
  position: absolute;
  top:100px;
  right: 30px;
  width: 100px;
  height: 100px;
  .share-button{
    width:100px;
    height: 100px;
  }
}

瞬间觉得自己好菜。这么简单的问题，主要是被map组件api的介绍给糊弄了

三、结语

小程序目前真的坑多啊。开发模式倒是很方便，就是坑多。