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

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

原文地址:https://www.cnblogs.com/ChenGg/p/8392398.html

时间: 2024-10-10 03:23:17

微信小程序按钮去除边框线,分享页面的相关文章

微信小程序按钮去除边框

wxml: <button class='share' id='{{item.id}}' open-type="share"> <image src='/img/fx.png' class='img_1'></image> </button> wxss: /* 按钮 */ .share{ width: 100rpx; height:50rpx; background: #fff; position:relative; margin-top

微信小程序取消button边框线

先给button定义个class属性 <button class="an"> 按钮 </button> 然后再css上加上 .an::after { border: none; } 原文地址:https://www.cnblogs.com/junyi-bk/p/10600940.html

微信小程序按钮

微信小程序button组件样式 韦弦Zhy关注 22018.07.03 19:21:14字数 438阅读 108,988 button.png 上图下字.png 需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下: 默认状态 <button>确定</button> 此时,各项值均为默认值,效果如下:有边框以及圆角 默认状态.png 设置其css如下:背景颜色background-co

微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能

微信小程序在12月21日发布了新版本的开发工具,并在官网公布新增分享.模板消息.客服消息.扫一扫.带参数二维码功能. 有了分享功能,相信会给很多创业者带来了无限的可能性! 下面就来看看这些新功能到底怎么用吧! 1.分享 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一方面微信在尝试流量分发方式,但同时又不愿意开放最大的流量入口. 开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html?t=

微信小程序怎么用?线下商家最适合玩小程序

随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是摆在商家面前的一道难题. 公众号+小程序 在小程序诞生之前,很多企业纷纷将公众号作为O2O升级的重要渠道,但公众号的内容属性让它更侧重企业与用户建立线上的连接,而用完即走的小程序则被微信寄予连接更多的线下服务和场景,它将成为线下商业的最大入口,带来新零售的变革. 于是,微信将公众号与小程序连接在一起

在微信小程序中生成一张分享海报?

前言 因产品需求,需要在小程序中生成一张分享海报用于产品推广.特此记录一波产出过程~ 这次开发使用的是  uni-app 来产出小程序 Part.1  大致思路 按照设计图将所需元素全部画入 Canvas 画布,再利用 wx.canvasToTempFilePath(Object object, Object this)  API 将 Canvas 生成一张指定大小的图片,保存分享即可~ 此API具体用法和注意事项可去 https://developers.weixin.qq.com/minip

直击根源:微信小程序中web-view再次刷新后页面需要退两次

背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B页面带了参数返回之后,A页面会刷新,直接导致了,A页面返回上一个页面需要点击两次,其中点击一次时还是A页面. 解决方案 首先第一个想法就是,设置一下退回按钮直接跳到上一个页面去:经过资料查找,回退按钮是没有直接触发函数的,也就是说不能直接控制回退的功能. 在寻找资料时,发现可以间接的触发一个unlo

微信小程序(一),授权页面搭建

wxml代码如下: <!--pages/index2/index2.wxml--> <view class="index2Container"> <image class="avatar" src="/static/images/y.jpg"></image> <text class="username">hello 微信小程序</text> <vi

微信小程序button去除默认样式

button { font-size: 28rpx; background-color: #fff; border: none; padding: 0; margin: 0; line-height: 1; } input { outline: none; border: none; list-style: none; } button::after { border: none; } button为覆盖的样式 原文地址:https://www.cnblogs.com/jjmirai/p/959