热门标签 | 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
推荐阅读
  • Gitlab接入公司内部单点登录的安装和配置教程
    本文介绍了如何将公司内部的Gitlab系统接入单点登录服务,并提供了安装和配置的详细教程。通过使用oauth2协议,将原有的各子系统的独立登录统一迁移至单点登录。文章包括Gitlab的安装环境、版本号、编辑配置文件的步骤,并解决了在迁移过程中可能遇到的问题。 ... [详细]
  • SpringBoot整合SpringSecurity+JWT实现单点登录
    SpringBoot整合SpringSecurity+JWT实现单点登录,Go语言社区,Golang程序员人脉社 ... [详细]
  • 本文介绍了Redis的基础数据结构string的应用场景,并以面试的形式进行问答讲解,帮助读者更好地理解和应用Redis。同时,描述了一位面试者的心理状态和面试官的行为。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • React项目中运用React技巧解决实际问题的总结
    本文总结了在React项目中如何运用React技巧解决一些实际问题,包括取消请求和页面卸载的关联,利用useEffect和AbortController等技术实现请求的取消。文章中的代码是简化后的例子,但思想是相通的。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 本文介绍了一个React Native新手在尝试将数据发布到服务器时遇到的问题,以及他的React Native代码和服务器端代码。他使用fetch方法将数据发送到服务器,但无法在服务器端读取/获取发布的数据。 ... [详细]
  • GPT-3发布,动动手指就能自动生成代码的神器来了!
    近日,OpenAI发布了最新的NLP模型GPT-3,该模型在GitHub趋势榜上名列前茅。GPT-3使用的数据集容量达到45TB,参数个数高达1750亿,训练好的模型需要700G的硬盘空间来存储。一位开发者根据GPT-3模型上线了一个名为debuid的网站,用户只需用英语描述需求,前端代码就能自动生成。这个神奇的功能让许多程序员感到惊讶。去年,OpenAI在与世界冠军OG战队的表演赛中展示了他们的强化学习模型,在限定条件下以2:0完胜人类冠军。 ... [详细]
  • 恶意软件分析的最佳编程语言及其应用
    本文介绍了学习恶意软件分析和逆向工程领域时最适合的编程语言,并重点讨论了Python的优点。Python是一种解释型、多用途的语言,具有可读性高、可快速开发、易于学习的特点。作者分享了在本地恶意软件分析中使用Python的经验,包括快速复制恶意软件组件以更好地理解其工作。此外,作者还提到了Python的跨平台优势,使得在不同操作系统上运行代码变得更加方便。 ... [详细]
  • 微信官方授权及获取OpenId的方法,服务器通过SpringBoot实现
    主要步骤:前端获取到code(wx.login),传入服务器服务器通过参数AppID和AppSecret访问官方接口,获取到OpenId ... [详细]
  • 本文介绍了JavaScript进化到TypeScript的历史和背景,解释了TypeScript相对于JavaScript的优势和特点。作者分享了自己对TypeScript的观察和认识,并提到了在项目开发中使用TypeScript的好处。最后,作者表示对TypeScript进行尝试和探索的态度。 ... [详细]
  • 本文介绍了NetCore WebAPI开发的探索过程,包括新建项目、运行接口获取数据、跨平台部署等。同时还提供了客户端访问代码示例,包括Post函数、服务器post地址、api参数等。详细讲解了部署模式选择、框架依赖和独立部署的区别,以及在Windows和Linux平台上的部署方法。 ... [详细]
  • 安装oracle软件1创建用户组、用户和目录bjdb节点下:[rootnode1]#groupadd-g200oinstall[rootnode1]#groupad ... [详细]
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社区 版权所有