小編給大家分享一下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”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

文章名稱：Html5頁面如何獲取微信公眾號的openid
標題網址：http://m.jcarcd.cn/article/ggheoj.html