微信JSSDK-前端-自定义分享

微信开发之JSSDK

• 官方文档

详细步骤

---

查看官方文档可见主要步骤为
- 步骤一：绑定域名

通过 微信公众平台 登录，在公众号设置中找到功能设置，配置相应的JS接口安全域名。只有在该安全域名下的链接才能调用微信开放的JS接口

如需要调用JSSDK的链接为http://abc.what.com/index/index.html，
则应该配置的JS安全域名为abc.what.com

• 步骤二：引入JS文件（前端）

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

• 步骤三：通过config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

JSSDK中config的信息可以通过ajax 获取

前端完整代码：

const url = window.location.href.split('#')[0];
// 页面一旦分享，微信客户端会在你的链接末尾加入其它参数 -> 二次分享
if (url.indexOf("?") !== -1) {
    window.location.href = (window.location.href.split('#')[0]).split('?')[0];
}
// 分享信息
const shareData = {
    title: document.title,
    desc: 'Hello world',
    link: window.location.href,
    imgUrl: '',
    success: function(res) {
    },
    error: function(res) {
    }
};
// php接口
const requestUrl ='http://xxx.xxx.com/Wxsdk/getSignPackage?url=' + url;
// 获取签名
$.ajax({
    type: 'GET',
    dataType: 'json',
    url: requestUrl,
    success: function(res) {
        // 这里的时间戳和随机字符串必须和生成签名是用的一致
        wx.config({
            debug: false, // 调试模式
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature,// 必填，签名，见附录1
            // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
            ]
        });
        wx.ready(function(){
            wx.onMenuShareAppMessage(shareData);
            wx.onMenuShareTimeline(shareData);
            wx.onMenuShareQQ(shareData);
            wx.onMenuShareWeibo(shareData);
            wx.onMenuShareQZone(shareData);
        });
    },
    error: function(res) {
    }
});