目的：实现微信图文分享功能
文档：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
一、公众号配置
微信公众号管理后台：开发 -> 基本配置
1、获取: AppID 和 AppSecret
2、将后台申请微信token和签名的服务器的ip添加到IP白名单中。
3、公众号需要申请认证，才能获取分享的权限
4、h5发布的域名配置
将测试域名和正式域名添加到JS接口安全域名。
添加的域名根目录必须放入微信校验文件，才可以配置通过
二、H5工程中接入SDK
1、head中引入
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、判断微信环境
var obj = {
"isIos": false,
"isWeChat": false,
"audio": media
}
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/wxwork/i) == 'wxwork') {
//企业微信
obj.isWeChat = false;
} else if (ua.match(/MicroMessenger/i) == 'micromessenger') {
//微信
obj.isWeChat = true;
} else {
//其他环境
obj.isWeChat = false;
}
window["GAME_HTML_INFO"] = obj;
3、微信环境请求微信签名
const DEVELOP = {
/** 签名请求地址 */
ip: 'https://xxxxxxxx/edu-game-math-core/core/operate/getH5Ticket',
/** 分享图地址 */
imgUrl: 'https://xxxxxxxx/test/games/EduGamesSlicingH5/h5/share/001.png'
}
const RELEASE = {
/** 签名请求地址 */
ip: 'https://xxxxxxx/edu-game-math-core/core/operate/getH5Ticket',
/** 分享图地址 */
imgUrl: 'https://xxxxxxxx/games/EduGamesSlicingH5/h5/share/001.png'
}
/** 当前环境 */
const env = RELEASE;
发送get请求到我们自己的服务器，获取签名
function GET(url, reqData, callback) {
url += "?";
for (var item in reqData) {
url += item + "=" + reqData[item] + "&";
}
console.log(url);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 400) {
var response = xhr.responseText;
console.log(response)
if (response) {
var responseJson = JSON.parse(response);
callback(responseJson);
} else {
console.log("返回数据不存在")
callback(false);
}
} else {
console.log("请求失败")
callback(false);
}
}
};
xhr.open("GET", url, true);
xhr.send();
}
4、设置微信分享
GET(ip, { url: localUrl }, (ret) => {
var APPID = 'wx1111111111111111111111111111';
var title = '寻找对称轴';
var desc = '5分钟玩转轴对称图形，将抽象变为形象，原来数学如此有趣~';
var imgUrl = env.imgUrl;
var noncestr = ret.data.nonceStr;
var timestamp = ret.data.timestamp;
var link = ret.data.url;
var signature = ret.data.signature;
wx.config({
debug: false,
appId: APPID,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: [
'checkJsApi',
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wx.checkJsApi({
jsApiList: [
'checkJsApi',
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
],
success: function (res) {
console.log(JSON.stringify(res));
}
});
wx.ready(function () {
window["WECHAT_READY"] = true;
if (window["GAME_READY"] === true) {
playMusic();
}
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: title, // 分享标题
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function () {
// 设置成功
}
})
wx.onMenuShareTimeline({
title: title, // 分享标题
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
}
})
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
});
}
5、服务器需求
（1）向微信请求获取access_token（有效期7200秒）
请求地址及参数：
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=公众号AppID &secret=公众号密钥
调试连接：
注意事项：必须将请求的服务器ip添加到公众号后台管理的白名单才能请求成功。
（2）向微信请求获取jsapi_ticket（有效期7200秒）
请求地址及参数：
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
（3）签名
签名校验工具：
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
签名算法：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
（4）请求参数及返回值：
Req: {
url: location.href.split('#')[0]
}
Ret：{
data:{
nonceStr:string，
tmestamp:string,
url:string,
signature: string
}
}
6、注意事项：
(1)、服务器IP必须加入白名单
(2)、请求签名的地址必须和当前访问网页的地址完全一致
(3)、游戏地址的域名必须配置再js安全域名中
(4)、分享图的地址，域名必须配置再js安全域名中
(5)、appid前后端必须一致，AppSecret不允许放到前端代码中
7、电脑调试方法
（1）、安装微信开发者工具
（2）、打开公众号网页
（3）、输入需调试的地址即可
8、微信分享图配置
在web-mobile目录中添加share文件夹，将分享图放入其中，每次发布版本，分享图会上传到服务器中项目目录下。并在代码中配置分享地址。
测试地址：
imgUrl: 'https://xxxxxxxxxxx/test/games/EduGamesSlicingH5/h5/share/001.png'
正式地址：imgUrl: 'xxxxxxxxxxx/games/EduGamesSlicingH5/h5/share/001.png'
