微信小程序按钮去除边框线，分享页面

Posted 2020-10-22 chengg

有一个需求是分享当前页面，使用美工的分享按钮图片来分享，而小程序分享功能只有button有

open-type="share"这个属性，使用image标签肯定不行。我是这样做的：

<button open-type="share"  
style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" >
<image style="height:85rpx;width:215rpx;"  src=‘../../../image/share_btn.png‘></image>
</button>

加入css样式去除button边框

button::after{
border: none;
}

实际效果如下

这样按钮的边框就消失了，单纯的设置border:none和outline:none没用。

小程序的分享事件

 /**
   * 用户点击分享
   */
  onShareAppMessage: function () {
   return { 
     title: ‘分享‘,
      desc: ‘活动描述‘, 
      path: ‘/xxx/xxxx?id=‘ + this.data.id
    } 
  },