Html5頁(yè)面獲取微信公眾號(hào)的openid的方法

1、H5頁(yè)面是運(yùn)行在微信瀏覽器的
2、需要與公眾號(hào)關(guān)聯(lián)(即需要openid)
3、判斷需求是否需要彈窗告知用戶授權(quán)操作
4、獲取地址欄參數(shù)判斷是否有'code',有的話直接傳給后臺(tái)換取openid,沒(méi)有就跳轉(zhuǎn)微信提供的獲取code的鏈接
5、獲取到的openid做本地存儲(chǔ),判斷沒(méi)有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,如果沒(méi)有就去微信授權(quán),如果已經(jīng)獲取到了就直接傳code給后臺(tái)獲取openId var local = window.location.href; var APPID = 'xxx'; if (code == null || code === '') { window.location. + 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) { // 提示沒(méi)有關(guān)注公眾號(hào) 沒(méi)有關(guān)注公眾號(hào)跳轉(zhuǎn)到關(guān)注公眾號(hào)頁(yè)面 console.log('您還未關(guān)注公眾號(hào)喔'); //二維碼彈窗 $('.openPopup').click(); return; } else { // 本地存儲(chǔ)這個(gè)openid,并刷新頁(yè)面 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; } //頁(yè)面執(zhí)行調(diào)用 getCode();
到此這篇關(guān)于Html5頁(yè)面獲取微信公眾號(hào)的openid的方法的文章就介紹到這了,更多相關(guān)Html5獲取公眾號(hào)的openid內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了Html5獲取高德地圖定位天氣的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)2019-12-26
HTML5頁(yè)面直接調(diào)用百度地圖API獲取當(dāng)前位置直接導(dǎo)航目的地的實(shí)現(xiàn)代碼
這篇文章主要介紹了HTML5頁(yè)面直接調(diào)用百度地圖API獲取當(dāng)前位置直接導(dǎo)航目的地的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-02- 這篇文章主要介紹了詳解HTML5+通訊錄獲取指定多個(gè)人的信息 ,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-12-20
Html5 Geolocation獲取地理位置信息實(shí)例
這篇文章主要介紹了Html5 Geolocation獲取地理位置信息實(shí)例,具有一定的參考價(jià)值,有興趣的同學(xué)可以了解一下。2016-12-09HTML5實(shí)現(xiàn)獲取地理位置信息并定位功能
這篇文章主要介紹了HTML5實(shí)現(xiàn)獲取地理位置信息并定位功能,本文講解了原生HTML5、百度地圖、谷歌地圖等三種獲取理位置信息并定位的方法,需要的朋友可以參考下2015-04-25- 這篇文章主要為大家介紹了HTML5地理定位的方法,實(shí)例講述了html5獲取坐標(biāo)完整實(shí)現(xiàn)過(guò)程,并對(duì)比不同瀏覽器運(yùn)行效果給出參考結(jié)果,需要的朋友可以參考下2014-10-15
- 用html5的地理定位功能通過(guò)手機(jī)定位獲取當(dāng)前位置并在地圖上居中顯示出來(lái),下面是百度地圖API的使用過(guò)程,有需要的朋友可以參考下2014-08-22
HTML5通過(guò)調(diào)用canvas對(duì)象的getContext()方法來(lái)獲取繪圖環(huán)境
通過(guò)調(diào)用canvas對(duì)象的getContext()方法來(lái)獲取繪圖環(huán)境,其只需要一個(gè)參數(shù):繪圖環(huán)境的類型,下面通過(guò)實(shí)例為大家詳細(xì)介紹下2014-06-23html5小技巧之通過(guò)document.head獲取head元素
html5中通過(guò)document.head獲取head元素2014-06-04- 這篇文章主要介紹了使用html5代碼來(lái)獲取地理位置,具體實(shí)現(xiàn)代碼如下并附有截圖,需要的朋友可以參考下2014-03-31