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给汉字加拼音收起展开组件的实现代码)
- html5 data属性
- html5新增特性(总结html5自定义属性有哪些)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- html5创作(HTML5录音实践总结Preact)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- h5实现弹出悬浮窗(Html5监听手机摇一摇事件的实现)
- html5音频处理(recorder.js 基于Html5录音功能的实现)
- html5+css3动画效果图(纯DOM+CSS3实现简单的小风车动画)
- html53d效果代码(HTML5 直播疯狂点赞动画实现代码 附源码)
- html5基本结构图(HTML5中的网络存储实现方式)
- html5表单实例(使用HTML5和CSS3表单验证功能)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- html5基础知识入门(萌新HTML5 入门指南二)
- Html5新增的标签
- html5淘汰的标签(浅谈HTML5新增和废弃的标签)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
热门推荐
- css怎样设置文字不换行(css是如何实现在页面文字不换行、自动换行、强制换行的方法)
- dedecms图集功能(DEDECMS给图集图片加上自动编号教程)
- 在windows安装docker详细步骤(Docker 部署 Prometheus的安装详细教程)
- mysql8使用技巧(一篇学会MySQL 8.0 ROLE管理)
- 服务器怎么做到实时备份(香港云服务器数据备份周期多久最好?)
- php面向对象运用场景(PHP面向对象类型约束用法分析)
- php数据错误处理函数(php中错误处理操作实例分析)
- python蓝牙knn算法(python使用KNN算法识别手写数字)
- javascript:void(0)的用法
- css浮动布局和盒子(css 盒模型 文档流 几种清除浮动的方法实例详解)