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

追逐、

已于 2022-06-03 11:15:48 修改

阅读量4.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端技术小程序文章标签：小程序 javascript

于 2020-02-17 16:38:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_29722281/article/details/104360576

本文讲述了在微信小程序中，使用cover-view标签内嵌图片button在真机上无法显示的问题及其原因。问题源于cover-view的Bug，解决方案是使用cover-image作为图片覆盖在button上，或者利用已实现的cover-view同层显示功能。此外，文中还讨论了两种方法的差异，以及在使用网络图片时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题产生

开发微信小程序，需要在原生的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>