#1、首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名、JS接口安全域名、网页授权域名。
备注:登录后可在“开发者中心”查看对应的接口权限。
2、微信登录通过判断当前页面是否有登录人信息进行判定,首先当前页面无登录信息,引导用户同意授权,获取code。此方法需要传入回调地址(重定向地址),即回调地址携带code进行跳转。(回调可增加自定义携带参数)
此处代码使用的是回调当前页面。
$.ajax({
type:"post",
url:path+"/weChatAuthLogin/getAuthorizeUrl",
data:{
"weChatRedirectUri":url
},
dataType: "json",
success:function(result){
//跳转回调地址获取code
window.location.href = result.data;
},
error:function(){
console.log("微信登录code"+"传输错误");
}
})
3、通过获取的code请求后台获取token。
$.ajax({
type:"post",
url:path+"/weChatAuthLogin/weChatLogin",
data:{
"code":$code,
},
dataType: "json",
async:false,
success:function(result){
//成功后跳转需要跳转的页面,路径为后台处理过的回调地址
window.location.href= url;
},
error:function(){
console.log("微信登录code"+"传输错误");
}
})
4、请求后台接口获取微信自定义分享内容的配置。url为当前页面的地址。注入微信成功后,通过微信自带浏览器右上角三个点打开进行微信分享,出来的内容就是wx.ready方法里注入的内容。
function wxShare(url){
$.ajax({
type:"post",
url:path+"/weChatAuthLogin/getWeChatConfig",
data:{
"url":url
},
dataType:"json",
success:function(result){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: result.data.appId, // 必填,公众号的唯一标识
timestamp:result.data.timestamp, // 必填,生成签名的时间戳
nonceStr: result.data.noncestr, // 必填,生成签名的随机串
signature: result.data.signature,// 必填,签名
jsApiList: [
"updateAppMessageShareData", "updateTimelineShareData","onMenuShareTimeline","onMenuShareAppMessage"
] // 必填,需要使用的JS接口列表
});
wx.ready(function(){
wx.updateAppMessageShareData({
title: "", // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
}
});
wx.onMenuShareTimeline({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
});
wx.onMenuShareAppMessage({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
});
})
},
error:function(){
console.log("分享功能初始化失败");
}
})
}
5、配上完整判断代码,仅供参考。
//获取地址携带的参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
var $code = getQueryString("code");//获取用户授权的code
//唤醒登录 下方的url传入的回调地址是当前页面地址
if($("#loginUserId").val() == ""){//当前无登录人信息
if($code == "" || $code == undefined){//判断是否授权
$.ajax({
type:"post",
url:path+"/weChatAuthLogin/getAuthorizeUrl",
data:{
"weChatRedirectUri":url
},
dataType: "json",
success:function(result){
window.location.href = result.data;//重定向路径为后台处理过的回调地址
},
error:function(){
console.log("微信登录code"+"传输错误");
}
})
}else{
//已获取到用户的授权code ,通过code获取用户信息
$.ajax({
type:"post",
url:path+"/weChatAuthLogin/weChatLogin",
data:{
"code":$code,
},
dataType: "json",
async:false,
success:function(result){
window.location.href= url;//跳转当前页面
},
error:function(){
$("#isShow").show();
console.log("微信登录code"+"传输错误");
}
})
}
}else{
//当前页面用户已登录
//避免请求微信登录时,页面内容闪烁,默认页面内容全部隐藏,登录成功或者有登录信息进行显示
$(".isHide").show();
//微信分享注入自定义内容
wxShare(location.href);
}
//微信分享内容自定义 该url为当前页面的url,注入微信成功后,通过微信自带浏览器右上角三个点打开进行微信分享,出来的内容就是wx.ready方法里注入的内容。
function wxShare(url){
$.ajax({
type:"post",
url:path+"/weChatAuthLogin/getWeChatConfig",
data:{
"url":url
},
dataType:"json",
success:function(result){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: result.data.appId, // 必填,公众号的唯一标识
timestamp:result.data.timestamp, // 必填,生成签名的时间戳
nonceStr: result.data.noncestr, // 必填,生成签名的随机串
signature: result.data.signature,// 必填,签名
jsApiList: [
"updateAppMessageShareData", "updateTimelineShareData","onMenuShareTimeline","onMenuShareAppMessage"
] // 必填,需要使用的JS接口列表
});
wx.ready(function(){
wx.updateAppMessageShareData({
title: "", // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
}
});
wx.onMenuShareTimeline({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
});
wx.onMenuShareAppMessage({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
});
})
},
error:function(){
console.log("分享功能初始化失败");
}
})
}