Html5页面获取微信公众号的openid的方法


Posted in HTML / CSS onMay 12, 2020

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 #HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 #HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 #HTML / CSS
HTML5 body设置自适应全屏
May 07 #HTML / CSS
iframe与window.onload如何使用详解
May 07 #HTML / CSS
HTML5录音实践总结(Preact)
May 07 #HTML / CSS
详解HTML5.2版本带来的修改
May 06 #HTML / CSS
You might like
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
基于Python的关键字监控及告警
2017/07/06 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python小进度条显示代码
2019/03/05 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python实现文件的备份流程详解
2019/06/18 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python实现一个优先级队列的方法
2020/07/31 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
《悯农》教学反思
2014/04/28 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
放飞理想主题班会
2015/08/14 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android