微信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) {    }});