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 相关文章推荐
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
HTML中的表格元素介绍
Feb 28 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP对象实例化单例方法
2017/01/19 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
利用python3随机生成中文字符的实现方法
2017/11/24 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python在非root权限下的安装方法
2018/01/23 Python
基于python生成器封装的协程类
2019/03/20 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python实现飞机大战小游戏
2019/11/08 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python3中编码获取网页的实例方法
2020/11/16 Python
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
幼儿园小班评语大全
2014/04/17 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
商务英语求职信范文
2015/03/19 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
如何正确理解python装饰器
2021/06/15 Python