热门标签 | 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
推荐阅读
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • SpringBoot uri统一权限管理的实现方法及步骤详解
    本文详细介绍了SpringBoot中实现uri统一权限管理的方法,包括表结构定义、自动统计URI并自动删除脏数据、程序启动加载等步骤。通过该方法可以提高系统的安全性,实现对系统任意接口的权限拦截验证。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 本文介绍了C#中生成随机数的三种方法,并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法,但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数,进一步突显了这个问题。文章指出,随机数生成在任何编程语言中都是必备的功能,但Random类生成的随机数并不可靠。最后,提出了需要寻找其他可靠的随机数生成方法的建议。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • 预备知识可参考我整理的博客Windows编程之线程:https:www.cnblogs.comZhuSenlinp16662075.htmlWindows编程之线程同步:https ... [详细]
  • 本文介绍了腾讯最近开源的BERT推理模型TurboTransformers,该模型在推理速度上比PyTorch快1~4倍。TurboTransformers采用了分层设计的思想,通过简化问题和加速开发,实现了快速推理能力。同时,文章还探讨了PyTorch在中间层延迟和深度神经网络中存在的问题,并提出了合并计算的解决方案。 ... [详细]
  • 本文介绍了一个适用于PHP应用快速接入TRX和TRC20数字资产的开发包,该开发包支持使用自有Tron区块链节点的应用场景,也支持基于Tron官方公共API服务的轻量级部署场景。提供的功能包括生成地址、验证地址、查询余额、交易转账、查询最新区块和查询交易信息等。详细信息可参考tron-php的Github地址:https://github.com/Fenguoz/tron-php。 ... [详细]
  • 本文介绍了RxJava在Android开发中的广泛应用以及其在事件总线(Event Bus)实现中的使用方法。RxJava是一种基于观察者模式的异步java库,可以提高开发效率、降低维护成本。通过RxJava,开发者可以实现事件的异步处理和链式操作。对于已经具备RxJava基础的开发者来说,本文将详细介绍如何利用RxJava实现事件总线,并提供了使用建议。 ... [详细]
  • 无详细内容MySQLmysqlmysqlDELIMITERmysqlCREATEFUNCTIONmyProc(costDECIMAL(10,2))-RETURNSDECIMAL(1 ... [详细]
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社区 版权所有