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中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 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防注入安全代码
2008/04/09 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP文件操作详解
2016/12/30 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
python使用mysql数据库示例代码
2017/05/21 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
毕业生求职简历中的自我评价
2013/10/18 职场文书
微观物理专业自荐信
2014/01/26 职场文书
yy生日主持词
2014/03/20 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书