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之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 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 文件上传类代码
2011/08/06 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python中字典的基础知识归纳小结
2015/08/19 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
Python类装饰器实现方法详解
2018/12/21 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
企业治理工作自我评价
2013/09/26 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
劳模先进事迹材料
2014/12/24 职场文书
公司2015年终工作总结
2015/05/26 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js