h5页面强制关注微信公众号(Html5页面获取微信公众号的openid的方法)
类别:Web前端 浏览量:986
时间:2021-10-18 11:27:23 h5页面强制关注微信公众号
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页面传值表(html5的pushstate以及监听浏览器返回事件的实现)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- 如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)
- html5炫酷代码(HTML5超炫酷粒子效果的进度条的实现示例)
- html5开发图片(HTML5开发动态音频图的实现)
- html5 设置缓存(HTML5实现应用程序缓存Application Cache)
- html5怎么设置倾斜(HTML5 body设置自适应全屏)
- html5复制修改(HTML5实现无刷新修改URL的方法)
- html5中提供的绘图元素(使用Html5中的cavas画一面国旗)
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- html5最好用语义元素(HTML5语义化元素你真的用对了吗)
- HTML5 audio标签
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5所有特性(HTML5 FileReader对象的具体使用方法)
- html5input标签的默认属性(移动端HTML5 input常见问题小结)
- html5如何设置标签(HTML5中在title标题标签里设置小图标的方法)
- 小敏家 剧情离谱一锅乱炖,但他们俩绝对是这部剧的一大 亮点(剧情离谱一锅乱炖)
- 《倚天屠龙记》再遭翻拍,关晓彤主演赵敏,蒋劲夫演张无忌,你怎么看(倚天屠龙记再遭翻拍)
- 吴启华与曾舜晞两代张无忌同框,戏里经典的他却没活出原著的潇洒(吴启华与曾舜晞两代张无忌同框)
- 经常发这三种 朋友圈 的人,要迅速屏蔽(经常发这三种朋友圈)
- 有种尴尬叫朋友圈忘屏蔽,大学生上演社死现场,父母亲自下场吐槽(有种尴尬叫朋友圈忘屏蔽)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
热门推荐
- linux系统内核参数优化(Linux 系统优化的一些建议内核优化)
- 腾讯云查看ftp用户名密码(腾讯云服务器ftp连不上的解决办法)
- python如何将xls转成xlsx(Python这样操作能存储100多万行的xlsx文件)
- mysql自定义安装教程5.7(MySQL系列-源码编译安装v5.7.34)
- php运行环境的搭建方法(php集成开发环境详解)
- mysql权限管理详解(Mysql 用户权限管理实现)
- 如何启动wampserver数据库服务(wampserver更改默认站点目录www方法教程)
- php编写程序使用方法(php xhprof使用实例详解)
- 微信小程序怎么绕过人脸的(详解微信小程序官方人脸核身认证)
- mac更改mysql密码(Mac下mysql 8.0.22 找回密码的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9