小編給大家分享一下Html5頁面如何獲取微信公眾號(hào)的openid，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)擁有十多年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作服務(wù)，對(duì)于網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、重慶APP開發(fā)、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、空間域名等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

1、H5頁面是運(yùn)行在微信瀏覽器的

2、需要與公眾號(hào)關(guān)聯(lián)（即需要openid）

3、判斷需求是否需要彈窗告知用戶授權(quán)操作

4、獲取地址欄參數(shù)判斷是否有'code',有的話直接傳給后臺(tái)換取openid,沒有就跳轉(zhuǎn)微信提供的獲取code的鏈接

5、獲取到的openid做本地存儲(chǔ)，判斷沒有openid進(jìn)行獲取openid操作

6、這邊的操作是不需要彈出授權(quán)框，且code不能重復(fù)使用，所以做了關(guān)注二維碼彈窗且不能關(guān)閉彈窗操作

// 強(qiáng)制關(guān)注公眾號(hào)，獲取openid
getCode = function () {
    if (sessionStorage.getItem("openid")&&sessionStorage.getItem("openid")!="undefined") {
        return false;
    }
    var code = getUrlParam('code') // 截取路徑中的code，如果沒有就去微信授權(quán)，如果已經(jīng)獲取到了就直接傳code給后臺(tái)獲取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傳給后臺(tái)獲取用戶信息
    }
}
//把code傳給后臺(tái),得到openid
getOpenId = function (code) {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'xxx',
        data: { code: code },
        success: function (res) {
            if (res.status == -1) {
                // 提示沒有關(guān)注公眾號(hào) 沒有關(guān)注公眾號(hào)跳轉(zhuǎn)到關(guān)注公眾號(hào)頁面
                console.log('您還未關(guān)注公眾號(hào)喔');
                //二維碼彈窗
                $('.openPopup').click();
                return;
            } else {
                // 本地存儲(chǔ)這個(gè)openid，并刷新頁面
                sessionStorage.setItem("openid", res.data.openid);
                location.reload();
            }
        }
    });
}
//獲取地址欄的參數(shù)
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;
}
//頁面執(zhí)行調(diào)用
getCode();

以上是“Html5頁面如何獲取微信公眾號(hào)的openid”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！