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

如果页面有多个分享按钮（<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-对应的数据，来实现同一个页面，去分享多个。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！