热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

H5页面微信自动登录,和微信页面自定义分享样式

#1、首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配

#1、首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名、JS接口安全域名、网页授权域名。
备注:登录后可在“开发者中心”查看对应的接口权限。
公众号设置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("分享功能初始化失败");
}
})
}


版权声明:本文为chen_ai_tao原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/chen_ai_tao/article/details/123105699
推荐阅读
  • PHP 编程疑难解析与知识点汇总
    本文详细解答了 PHP 编程中的常见问题,并提供了丰富的代码示例和解决方案,帮助开发者更好地理解和应用 PHP 知识。 ... [详细]
  • 本文详细介绍了如何使用PHP检测AJAX请求,通过分析预定义服务器变量来判断请求是否来自XMLHttpRequest。此方法简单实用,适用于各种Web开发场景。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 深入理解 SQL 视图、存储过程与事务
    本文详细介绍了SQL中的视图、存储过程和事务的概念及应用。视图为用户提供了一种灵活的数据查询方式,存储过程则封装了复杂的SQL逻辑,而事务确保了数据库操作的完整性和一致性。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • c# – UWP:BrightnessOverride StartOverride逻辑 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 本文详细介绍如何使用 Python 集成微信支付的三种主要方式:Native 支付、APP 支付和 JSAPI 支付。每种方式适用于不同的应用场景,如 PC 网站、移动端应用和公众号内支付等。 ... [详细]
  • 本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化,实时交互成为了提升用户体验的关键要素之一。通过本指南,开发者可以学习到最新的技术和最佳实践。 ... [详细]
  • YB02 防水车载GPS追踪器
    YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
author-avatar
wyyxit
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有