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

2019-11-15,

有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有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
  } 
 },

  下面在简单看下微信小程序的button去边框代码

 wxml

<button class='niu'>123123</button>

css

niu::after{
  border:none;
}

总结

以上所述是小编给大家介绍的微信小程序按钮去除边框线分享页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持! 

您可能感兴趣的文章:

  • 微信小程序实现的自定义分享功能示例
  • 微信小程序实现分享朋友圈的图片功能示例
  • 微信小程序实现分享到朋友圈功能
  • 微信小程序项目总结之点赞 删除列表 分享功能
  • 微信小程序分享功能之按钮button 边框隐藏和点击隐藏
  • 微信小程序通过保存图片分享到朋友圈功能
  • 微信小程序之分享页面如何返回首页的示例
  • 微信小程序动态添加分享数据
  • 微信小程序生成分享海报方法(附带二维码生成)
  • 详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
  • 微信小程序分享功能onShareAppMessage(options)用法分析

《微信小程序按钮去除边框线分享页面功能.doc》

下载本文的Word格式文档,以方便收藏与打印。