自定义qq分享、微信分享、企业微信分享

sunny327
4,979 阅读5分钟

最近在做自定义qq分享、微信分享及企业微信分享，需求是可以从企业微信中分享到企业微信好友、微信好友及微信朋友圈；从微信中也可以分享到企业微信、分享给qq好友及分享到qq空间；从qq分享到微信及微信朋友圈。

可以互相分享，且都是自定义的样式，图片、链接及描述，可以让用户一眼看到分享的是什么内容。

微信分享

首先做的就是微信分享。这里这个没什么可说的，参考微信js-sdk就可以，链接：developers.weixin.qq.com/doc/offiacc… 完全按照给的api进行配置就可以，一般不会出什么问题。需要后台做下返回参数，缓存access_token和jsapi_ticket。

qq分享

需要用到QQ分享的api，腾讯移动web开发平台文档：open.mobile.qq.com/api/compone…

  1. 引入http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js文件。
  2. 使用api:
/**
 * 定制接口
 * @param opts 定制内容
 */
setShareInfo({
    title:          '父爱，在你看不到的地方', // 分享标题
    summary:        '父爱如山，感觉不到只因身在此山中', // 分享内容
    pic:            'http://qzonestyle.gtimg.cn/aoi/sola/20150617094556_OvfOpoRKRB.png', // 分享图片
    url:            'http://qzs.qzone.qq.com/qzone/qzact/act/2015/father-day-m/index.html', // 分享链接
    // 微信权限验证配置信息，若不在微信传播，可忽略
    WXconfig: {
        swapTitleInWX: true, // 是否标题内容互换（仅朋友圈，因朋友圈内只显示标题）
        appId: appId, // 公众号的唯一标识
        timestamp: timestamp, // 生成签名的时间戳
        nonceStr: nonceStr, // 生成签名的随机串
        signature: signature // 签名
    }
});

注意：

  1. 由于手机QQ限制，分享URL必须与页面URL同一域名，否则设置不生效。这里需要特别注意，分享URL必须与页面URL同一域名，也就是说，分享最好是当前的页面的url，并且是在（一般是用公司的域名）的域名底下。
  2. 可根据当前页面的客户端环境，判断是否需要WX配置，减少不必要请求。
  3. 按照文档的设置好，域名也是对的，但是分享还是没有效果？？？解决: 看下你的域名是不是com，cn 等的常见域名，.xin好像是不识别。楼主自己碰到的，改成 **.com **的域名就好了（ps:因为这个问题被坑了一天）

问题：

我这里还有一个问题是微信分享和qq分享并存的问题，开始的时候我使用js判断是微信内置浏览器与qq内置浏览器：

 const ua = navigator.userAgent.toLowerCase();
  //微信浏览器
    if (ua.match(/MicroMessenger/i) === 'micromessenger') {
        alert('微信内置浏览器');
        wxShare(shareUrl);
        var obj = {
            ...shareInitData,
            link: window.location.origin + "/inviteShare/invited?id=" + id,
            fail: function (res) {
                // alert(JSON.stringify(res));
            }
        };
        shareInfo(obj);
    } 
    if (ua.match(/ qq/i) === ' qq' && ua.indexOf('mqqbrowser') < 0) {
    //qq内置浏览器
        /**
     * 定制接口
     * @param opts 定制内容
     */
    let QQShareUrl = window.location.origin + "/inviteShare/invited?id=" + id;

    setShareInfo({
        title: '学IT上博学谷，送你700元购课抵用券', // 分享标题
        summary: '博学谷，专属于IT人的在线学习平台，快来加入吧！', // 分享内容
        pic: 'https://file.xxxx.com/referral/pc-referral-logo.png', // 分享图片
        url: QQShareUrl, // 分享链接
        // 微信权限验证配置信息，若不在微信传播，可忽略
        WXconfig: {
            swapTitleInWX: true, // 是否标题内容互换（仅朋友圈，因朋友圈内只显示标题）
            appId: '', // 公众号的唯一标识
            timestamp: '', // 生成签名的时间戳
            nonceStr: '', // 生成签名的随机串
            signature: '' // 签名
        }
    });
    }

这样写不行，在微信内置浏览器中不弹出alert('微信内置浏览器')，不知道是不是判断不对的原因，后来为了上线就把if判断都去掉了，直接把微信分享和qq分享都执行了，居然可以了，

改正后的代码：

 const ua = navigator.userAgent.toLowerCase();

    console.log("commonInitShare", params);

    const { id } = params;

    let shareUrl = window.location.href.split("#")[0];

    console.log('shareUrl: ', shareUrl);
    wxShare(shareUrl);
    var obj = {
        ...shareInitData,
        link: window.location.origin + "/inviteShare/invited?id=" + id,
        fail: function (res) {
            // alert(JSON.stringify(res));
        }
    };
    shareInfo(obj);
    /**
     * 定制接口
     * @param opts 定制内容
     */
    let QQShareUrl = window.location.origin + "/inviteShare/invited?id=" + id;
    console.log('QQShareUrl: ', QQShareUrl);

    setShareInfo({
        title: '学IT上博学谷，送你700元购课抵用券', // 分享标题
        summary: '博学谷，专属于IT人的在线学习平台，快来加入吧！', // 分享内容
        pic: 'https://file.xxx.com/referral/pc-referral-logo.png', // 分享图片
        url: QQShareUrl, // 分享链接
        // 微信权限验证配置信息，若不在微信传播，可忽略
        WXconfig: {
            swapTitleInWX: true, // 是否标题内容互换（仅朋友圈，因朋友圈内只显示标题）
            appId: '', // 公众号的唯一标识
            timestamp: '', // 生成签名的时间戳
            nonceStr: '', // 生成签名的随机串
            signature: '' // 签名
        }
    });

以后再来找原因！！！！！！！

企业微信分享

企业微信开放平台文档：work.weixin.qq.com/api/doc/900… 企业微信分享与微信分享差不多，也需要给后台传页面链接，然后后台生成所需的参数：

export function qyWxShare(shareLink) {
    axios({
        url: appBaseUrl + "/user/share",   //后端提供接口，暂未提供
        method: "post",
        params: {
            url: shareLink
        }
    }).then(res => {
        if (res.status == 200) {
            var respanse = res.data;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: respanse.appid,
                timestamp: respanse.timestamp, // 必填，生成签名的时间戳
                nonceStr: respanse.nonceStr, // 必填，生成签名的随机串
                signature: respanse.signature, // 必填，签名
                jsApiList: [
                    "onMenuShareAppMessage",
                    "onMenuShareWechat",
                    "onMenuShareTimeline",
                    // "onMenuShareWeibo",
                    // "onMenuShareQZone"
                ] // 必填，需要使用的JS接口列表
            });
        }
    });
}
export function qyShareInfo(obj) {
    wx.ready(function () {
        // 2.1 获取“转发”按钮点击状态及自定义分享内容接口
        wx.onMenuShareAppMessage(obj);
        // 2.2 获取“微信”按钮点击状态及自定义分享内容接口
        wx.onMenuShareWechat(obj);

        // 2.3 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
        wx.onMenuShareTimeline(obj);
        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        // wx.onMenuShareWeibo(obj);
        // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
        // wx.onMenuShareQZone(obj);
    });
}

自定义分享代码：

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
    imgUrl: '', // 分享图标
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});
avatar
文章
阅读
粉丝