Html5页面获取微信公众号的openid的方法
发布时间:2020-05-12 16:19:38 作者:夏天的鱼呀 我要评论
这篇文章主要介绍了Html5页面获取微信公众号的openid的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
1、H5页面是运行在微信浏览器的
2、需要与公众号关联(即需要openid)
3、判断需求是否需要弹窗告知用户授权操作
4、获取地址栏参数判断是否有'code',有的话直接传给后台换取openid,没有就跳转微信提供的获取code的链接
5、获取到的openid做本地存储,判断没有openid进行获取openid操作
6、这边的操作是不需要弹出授权框,且code不能重复使用,所以做了关注二维码弹窗且不能关闭弹窗操作
// 强制关注公众号,获取openid getCode = function () { if (sessionStorage.getItem("openid")&&sessionStorage.getItem("openid")!="undefined") { return false; } var code = getUrlParam('code') // 截取路径中的code,如果没有就去微信授权,如果已经获取到了就直接传code给后台获取openId var local = window.location.href; var APPID = 'xxx'; if (code == null || code === '') { window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=#wechat_redirect' } else { getOpenId(code) //把code传给后台获取用户信息 } } //把code传给后台,得到openid getOpenId = function (code) { $.ajax({ type: 'POST', dataType: 'json', url: 'xxx', data: { code: code }, success: function (res) { if (res.status == -1) { // 提示没有关注公众号 没有关注公众号跳转到关注公众号页面 console.log('您还未关注公众号喔'); //二维码弹窗 $('.openPopup').click(); return; } else { // 本地存储这个openid,并刷新页面 sessionStorage.setItem("openid", res.data.openid); location.reload(); } } }); } //获取地址栏的参数 getUrlParam= function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } //页面执行调用 getCode();
到此这篇关于Html5页面获取微信公众号的openid的方法的文章就介绍到这了,更多相关Html5获取公众号的openid内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 这篇文章主要介绍了Html5获取高德地图定位天气的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2019-12-26
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
这篇文章主要介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下2018-03-02- 这篇文章主要介绍了详解HTML5+通讯录获取指定多个人的信息 ,非常具有实用价值,需要的朋友可以参考下。2016-12-20
- 这篇文章主要介绍了Html5 Geolocation获取地理位置信息实例,具有一定的参考价值,有兴趣的同学可以了解一下。2016-12-09
- 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理位置信息并定位的方法,需要的朋友可以参考下2015-04-25
- 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程,并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下2014-10-15
- 用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下2014-08-22
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
通过调用canvas对象的getContext()方法来获取绘图环境,其只需要一个参数:绘图环境的类型,下面通过实例为大家详细介绍下2014-06-23html5小技巧之通过document.head获取head元素
html5中通过document.head获取head元素2014-06-04- 这篇文章主要介绍了使用html5代码来获取地理位置,具体实现代码如下并附有截图,需要的朋友可以参考下2014-03-31
最新评论