最近在用Cocos做一个H5活动宣传，涉及到微信授权分享和登录！
需求内容：一进入H5，立刻进行授权获取用户信息，并初始化微信分享
但是，but but but !!! 遇到了问题
之前使用的方法是，是用脚本进行登录和初始化微信JS-SDK；跑通后，感觉一切良好；
cocos creator h5游戏使用微信jssdk的正确姿势
可自行参考！如果还是不懂的，可以私信我！
但是有一个问题，那就是授权登录之后，又重新加载一次主页面；这是个致命的bug;
解决方案：
在逛cocos社区的时候，发现有人提出在index.html里面进行配置
这又给我一个新的灵感！直接在加载index.html中进行分享初始化和微信登录授权，这样就可以解决上面的问题；
于是，看代码；一下步骤是在打包后 修改index.html
备注：
记得inde.html里面的js内容一定要在cocos脚本之前引入；
包括wx.js里面涉及到的知识，不清楚的，可以查看官方的文档
以下内容，仅供参考
index.html
<!-- 接入网络请求库 flyio -->
<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
<!-- 接入微信分享 -->
<script src="jweixin-1.6.0.js"></script>
<!-- 微信相关业务逻辑代码 -->
<script src="wx.js"></script>
<!-- 下面是cocos的脚本文件，记得上面的内容一定要在cocos脚本之前引入 -->
wx.js
// 1、提取微信返回的url的code // ③
var getQueryString = function (name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
// 判断是否存在code 或是 state
var hasQueryString = function (name) {
return window.location.search.indexOf(name) === 1 ? true : false;
}
/**
* 初始化分享
* @param share
*/
var initShare = function (share) {
initJssdk(share);
}
// 微信授权
var wxAuthorize = function () {
let uri = getUri();
let appid = "xxxxxx";
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect`
window.location.href = url
}
// 微信登录
var wxLogin = function () {
let uri = getUri();
let code = localStorage.getItem('code')
return fly.get(`http://192.168.1.200:8080/wx/wxUser/login?code=${code}&url=${uri}`)
}
// 获取当前网页的地址并进行编码
var getUri = function () {
return encodeURIComponent(window.location.href.split('#')[0]);
}
//判断是否在微信中
var isWechat = function () {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
};
var initJssdk = function (share) {
var uri = window.location.href.split('#')[0];
fly.get(`http://192.168.1.200:8080//wx/share/getWxInfo?url=${uri}`).then(res => {
let result = res.data.data
wx.config({
debug: false,
appId: "xxxxxx",
timestamp: result.timestamp,
nonceStr: result.noncestr,
signature: result.signature,
jsApiList: [ //这里是需要用到的接口名称
'checkJsApi', //判断当前客户端版本是否支持指定JS接口
'updateTimelineShareData', //分享接口
'getLocation', //获取位置
'openLocation', //打开位置
'scanQRCode', //扫一扫接口
'chooseWXPay', //微信支付
'chooseImage', //拍照或从手机相册中选图接口
'previewImage', //预览图片接口
'uploadImage', //上传图片
'updateAppMessageShareData',
'onMenuShareQQ'
]
});
wx.ready(() => {
wx.updateTimelineShareData({
title: share.title, // 分享标题
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: share.imgUrl, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
console.log('分享配置完成');
}
});
wx.updateAppMessageShareData({
title: share.title, // 分享标题
desc: share.desc, // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: share.imgUrl, // 分享图标
type: share.type, // 分享类型,music、video或link，不填默认为link
dataUrl: share.dataUrl, // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户点击了分享后执行的回调函数
if (callback) {
// callback(res.data);
}
}
});
wx.onMenuShareQQ({
title: share.title, // 分享标题
desc: share.desc, // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: share.imgUrl, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
if (callback) {
}
}
});
wx.onMenuShareQZone({
title: share.title, // 分享标题
desc: share.desc, // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: share.imgUrl, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
if (callback) {
}
}
});
})
})
}
//在需要定位页面调用
var getlocation = function (callback) {
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function (res) {
wx.ready(function () {
wx.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
// console.log(res);
callback(res)
},
fail: function (res) {
console.log(res)
},
// complete:function(res){
// console.log(res)
// }
});
});
});
}
var openlocation = function (data, callback) { //打开位置
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function (res) {
wx.ready(function () {
wx.openLocation({ //根据传入的坐标打开地图
latitude: data.latitude,
longitude: data.longitude
});
});
});
}
var chooseImage = function (callback) { //选择图片
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
//console.log(data);
this.initJssdk(function (res) {
wx.ready(function () {
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success: function (rs) {
callback(rs)
}
})
});
});
}
//微信支付
var wxpay = function (data, callback) {
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function (res) {
wx.ready(function () {
wx.chooseWXPay({
timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: data.paysign, // 支付签名
success: function (res) {
// console.log(res);
callback(res)
},
fail: function (res) {
callback(res)
},
// complete:function(res){
// console.log(res)
// }
});
});
});
}
boot.js
'use strict';
var canvas = document.getElementById('GameCanvas');
window.onload = function () {
// TODO 进行微信分享
if (isWechat()) {
initShare({
title: '你的代码我的心',
desc: '爱生活，爱运动，爱自己！走过的路，走过的地方，都是属于我的风景。',
type: 'link',
imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201210%2F06%2F1020515jrbwmg5zb5mijbr.jpg&refer=http%3A%2F%2Ff.01ny.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628136197&t=ed20d7e0bcff6c6b4b4fda271a74c33c",
dataUrl: ''
});
// 获取code
let code = getQueryString("code");
let hasCode = hasQueryString("code"); // 是否存在code
let hasState = hasQueryString("state");// 是否存在state
// 获取用户信息
let userinfo = JSON.parse(localStorage.getItem('userinfo'))
if (userinfo) return loadGame();
let localCode = localStorage.getItem('code')
if (code && code !== localCode) {
// 授权成功
localStorage.setItem('code', code)
wxLogin().then(res => {
if (res.data.code === 200) {
localStorage.setItem('userinfo', JSON.stringify(res.data.data));
loadGame();
}
});
} else if (!hasCode && !hasState) {
// 微信登录授权
wxAuthorize();
} else {
// 授权失败 直接进入活动 如果code 不存在，但是state存在，这是说明授权失败
loadGame();
}
} else {
// 进入游戏
loadGame();
}
};
// 游戏主加载
var loadGame = function () {
if (window.__quick_compile_engine__) {
window.__quick_compile_engine__.load(onload);
}
else {
onload();
}
}