首页 > 建站教程 > 小程序、公众号 >  微信小程序一个页面多个按钮分享进行区分正文

微信小程序一个页面多个按钮分享进行区分

如果页面有多个分享按钮(<button> 组件 open-type="share"),在onShareAppMessage中如何区分点击的是哪个分享按钮呢?其实onShareAppMessage的res可以获取分享按钮的data-属性,也可以获取id属性,所以可以有下面两种方式来区分:

一、使用id来区分
<view>
    <button open-type='share' id="1" data-id="1">1</button>
    <button open-type='share' id="2" data-id="2">2</button>
</view>
onShareAppMessage: function (res) {
    if (res.from === 'button') {
        // 来自页面内转发按钮
        if (res.target.id == 1) {
            return {
                title: '自定义1111转发标题',
                path: '/page/user?id=123'
            }
        }
        if (res.target.id == 2) {
            return {
                title: '自定义22222转发标题',
                path: '/page/user?id=123'
            }
        }
    } else {
        return {
            title: '自定义转发标题',
            path: '/page/user?id=123'
        }
    }
}
以上代码主要是通过button按钮组件的id来进行区分的,在javascript中的onShareAppMessage中的res.target.id加以区分,同一个页面,去分享多个。

二、使用data-id来区分,和普通按钮的data-数据获取一样:
<view>
    <button open-type='share' data-id="1">1</button>
    <button open-type='share' data-id="2">2</button>
</view>
onShareAppMessage: function (res) {
    if (res.from === 'button') {
        // 来自页面内转发按钮
        if (res.target.dataset.id == 1) {
            return {
                title: '自定义1111转发标题',
                path: '/page/user?id=123'
            }
        }
        if (res.target.dataset.id == 2) {
            return {
                title: '自定义22222转发标题',
                path: '/page/user?id=123'
            }
        }
    } else {
        return {
            title: '自定义转发标题',
            path: '/page/user?id=123'
        }
    }
}
以上代码主要是通过js的data-来区分的,在js中,通过res.target.dataset获取data-对应的数据,来实现同一个页面,去分享多个。