当前位置: 首页 > 编程笔记 >

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

丌官寒
2023-03-14
本文向大家介绍微信小程序按钮去除边框线分享页面功能,包括了微信小程序按钮去除边框线分享页面功能的使用技巧和注意事项,需要的朋友参考一下

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

open-type="share"这个属性,使用imagehtml" target="_blank">标签肯定不行。我是这样做的:

<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></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 跳转到talkPage界面。 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:f

  • 本文向大家介绍微信小程序的分类页面制作,包括了微信小程序的分类页面制作的使用技巧和注意事项,需要的朋友参考一下 微信小程序实的分类页面制作 先上效果图。 这个界面布局难度不是很大,css基础好的,很快就实现了,分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据 这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据。 代码的实现 js

  • 本文向大家介绍详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能,包括了详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能的使用技巧和注意事项,需要的朋友参考一下 微信小程序在12月21日发布了新版本的开发工具,并在官网公布新增分享、模板消息、客服消息、扫一扫、带参数二维码功能。 有了分享功能,相信会给很多创业者带来了无限的可能性! 下面就来看看这些新功能到底怎么用

  • 本文向大家介绍微信小程序实现侧边分类栏,包括了微信小程序实现侧边分类栏的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现侧边分类栏的具体代码,供大家参考,具体内容如下 效果图 布局分析 分成三个盒子: 主盒子,左盒子,右盒子 –wxml– –js– –wxss– 更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。 关于vue.js组件的教程,请大家点击专题v

  • 本文向大家介绍微信小程序实现侧边栏分类,包括了微信小程序实现侧边栏分类的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序侧边栏分类展示的具体代码,供大家参考,具体内容如下 效果图 实现思路 把屏幕当成一个固定的盒子,然后把盒子分成两边,并让盒子的每一边都能够滚动。 源码 index.wxml index.wxss index.js 更多教程点击《Vue.js前端组件学习教程》

  • 本文向大家介绍java调用微信接口实现网页分享小功能,包括了java调用微信接口实现网页分享小功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了java调用微信接口实现网页分享小功能的具体代码,供大家参考,具体内容如下 // 获取access_token  *注意* 经过实际开发测试,微信分享不支持跨域请求,因此获取access_token的请求必须从服务器发起,否则无法获取到ac