微信小程序右上角分享按钮如何根据用户登录状态确定是否允许分享

问题描述

微信小程序的分享功能，即在js文件中加入onShareAppMessage()方法即可点亮右上角的分享按钮。这满足一航情况下的使用。但如果分享的条件加上登录之后才能分享。这个方法就不好使了。

问题分析

点击分享后，小程序会优先使用onShareAppMessage()中return出来的对象为数据，当没找到对应的对象时，会使用默认的值。那如果判断出当前用户没有登录，该怎么取消当前的分享弹出框呢? 此时，我试过return值false,null,undefined,0都不行。

绕过强行弹框

先看看下面的的代码：

javascript 复制代码

Page({
		onShareAppMessage: function (t) {
		   var a = this, e = getApp().getUser(), path = "/pages/index/index", title, query_arr = [], query_str;
        let imageUrl = `${a.data.__siteroot}statics/images/share-home.jpg`;

        // 未登录提示框
        a.checkAndShowLoginModal();

        if (e.id) {
            getApp().page.onShareAppMessage(this);
            query_arr.push({ user_id: e.id });
        }
        
        title = a.data.store.name;
        
        // 组装参数
        query_str = getApp().helper.objectArrayToQueryString(query_arr);
        path += `?${query_str}`;

        const promise = new Promise(resolve => {
            setTimeout(() => {
                resolve(null);
            }, 2000);
        });
        // 已登录
        if (e.id) {
            return {
                path,
                title,
                imageUrl: imageUrl,
                scene: 0,
            };
        } else {
            return {
                promise
            };
        }
    },
})

以上代码当判断出用户未登录时，会弹出未登录提示，并避免了系统的分享框的弹出。

核心代码

利用onShareAppMessage() 的promise 机制，给resolve赋null或undefined值，注意，不是字符串。

javascript 复制代码

const promise = new Promise(resolve => {
    setTimeout(() => {
        resolve(null);
    }, 2000);
});
// 已登录
if (e.id) {
    return {
        path,
        title,
        imageUrl: imageUrl,
        scene: 0,
    };
} else {
    return {
        promise
    };
}

为什么成功绕过了

先来看看未登录时点分享按钮发生了什么，此时走的是带有promise的对象：

javascript 复制代码

// 未登录时
return {
   promise
}

shell 复制代码

onShareAppMessage error  TypeError: Cannot read property 'title' of null
	at VM7634 WASubContext.js:1

调试显示错误信息：无法在null中读取到title属性，导致分享弹框无正常显示，也就成功绕过了。

这不是官方提供的方法，是利用了分享接口接收resolve的特性使系统执行的弹窗失效了，腾讯未来会不会封堵或直接提供回调拦停弹框方法，我们拭目以待。