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 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 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中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python3基础之基本运算符概述
2014/08/13 Python
解析Python编程中的包结构
2015/10/25 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python3实现购物车功能
2018/04/18 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
使用python求解二次规划的问题
2020/02/29 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
优秀小学生家长评语
2014/01/30 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
结婚司仪主持词
2015/06/29 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Web应用开发TypeScript使用详解
2022/05/25 Javascript