小编给大家分享一下Html5页面如何获取微信公众号的openid，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联拥有十多年成都网站建设工作经验,为各大企业提供成都网站设计、网站制作服务，对于网页设计、PC网站建设（电脑版网站建设）、重庆APP开发、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、空间域名等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。
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/oauth3/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”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
