微信小程序使用button按钮分享
发布时间：2021-07-09 09:38 所属栏目：小程序开发教程
关于小程序的分享按钮
在做项目的过程中，有这么一需求，
用户A可以将当前的商品分享给别的用户B，
用户B点击查看时，可以直接定位到当前的商品。
经过一番学习，找到了 button 控件中的 open-type='share'
<button open-type='share'>分享</button>
小程序文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
步骤一、
先在界面上，放置 button 按钮，并绑定函数 "shareView" （建议用 catchtap 绑定 ，不用 bindtap 防止点击冒泡）
<button catchtap="shareView" open-type='share'>分享</button> |
步骤二、
定义点击之后的函数操作（函数名：shareView）
shareView:function(e)
{
return {
title: 'xx小程序',//分享内容(为空则为当前页面文本)
path: 'pages/index/index?id=123&age=18',//分享地址 路径，传递参数到指定页面。(为空则为当前页面路径)
imageUrl: '../../imgs/xx.png',//分享的封面图(为空则为当前页面)
success: function (res) {
console.log("转发成功:" + JSON.stringify(res));
},
fail: function (res) {
console.log("转发失败:" + JSON.stringify(res));
}
}
} |
步骤三、
一般自定义按钮和button组件的样式会有冲突， 下面代码就是更改button组件的样式的：
button::after {
border: none;
}
button {
background-color: #fff;
} |
