关于小程序的分享按钮
在做项目的过程中,有这么一需求,
用户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; }