為什么要獲取openid
????openId是用戶在當(dāng)前公眾號(hào)下的唯一標(biāo)識(shí)（‘身份證’）耻讽。在微信中進(jìn)行微信分享、支付等操作時(shí)需要用戶的openid肩豁。H5要在微信中獲取到用戶openid箩艺，需要獲得微信授權(quán)眯分，授權(quán)分兩種方式：靜默授權(quán)和手動(dòng)授權(quán)
靜默授權(quán)：用戶使用過(guò)程中不知不覺(jué)獲取到openid误甚，不需要用戶手動(dòng)授權(quán)缚甩，但是會(huì)在原頁(yè)面進(jìn)行刷新
手動(dòng)授權(quán)：需要用戶點(diǎn)擊同意授權(quán)，能獲取到更多用戶信息
????（我本次使用的是靜默授權(quán)窑邦，所以詳細(xì)記錄一下靜默授權(quán)的方式）
獲取方法
1擅威、首先，要有一個(gè)公眾號(hào)冈钦，以及公眾號(hào)的appid郊丛，然后在公眾號(hào)后臺(tái)上設(shè)置你的網(wǎng)頁(yè)授權(quán)域名（注意不加http://和https://）
2、靜默授權(quán)瞧筛，在進(jìn)入網(wǎng)頁(yè)之后厉熟，訪問(wèn)微信提供的url，在其中設(shè)置授權(quán)方式以及回調(diào)頁(yè)面url驾窟，返回的頁(yè)面url中就會(huì)包含一個(gè)code參數(shù)
（注意：此處的url是轉(zhuǎn)碼過(guò)后的url）
url轉(zhuǎn)碼方法：
var url = this.urlencode(url_old);
// 編碼函數(shù)
? ? urlencode (str) {?
? ? ? str = (str + '').toString();?
? ? ? return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').?
? ? ? replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');?
? ? },
具體獲取code方法：
// 獲取code
? ? getBaseInfos(){
? ? ? var url_code = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+你的appid+"&redirect_uri="+當(dāng)前頁(yè)面url+"&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
? ? ? window.location.href = url_code;//打開(kāi)這個(gè)鏈接庆猫，你的url后面就會(huì)跟上code的參數(shù)
? ? }
如果配置參數(shù)全部正確认轨，那么此時(shí)通過(guò)回調(diào)地址刷新頁(yè)面后绅络，你就會(huì)看到在地址欄中的code了。
注意：要監(jiān)測(cè)當(dāng)前url中是否含有code參數(shù)，如果包含的話就繼續(xù)下一步操作恩急，否則頁(yè)面是一直重復(fù)刷新反復(fù)獲取code杉畜。且要注意code碼只能使用一次，使用過(guò)后就失效了衷恭。
3此叠、拿到code之后，需要把code傳給后端随珠，后端去請(qǐng)求微信獲取openid等參數(shù)灭袁，前端是獲取不到的，微信開(kāi)發(fā)文檔中是這么寫(xiě)的：
后端請(qǐng)求成功后窗看，得到的數(shù)據(jù)應(yīng)該是這樣的
4茸歧、這樣我們就能獲取到用戶的openid進(jìn)行開(kāi)發(fā)了
開(kāi)發(fā)建議：
判斷是否微信內(nèi)置瀏覽器，如果是微信內(nèi)置瀏覽器的話显沈，去獲取用戶的openid软瞎，否則在外面瀏覽器中打開(kāi)獲取不到code是會(huì)報(bào)錯(cuò)的。
1拉讯、判斷是否是微信瀏覽器
isWeiXin() {
? ? ? ? var ua = window.navigator.userAgent.toLowerCase();
? ? ? ? if (ua.match(/MicroMessenger/i) == 'micromessenger') {
? ? ? ? ? ? return true;
? ? ? ? } else {
? ? ? ? ? ? return false;
? ? ? ? }
}
2涤浇、根據(jù)以上函數(shù)判斷值進(jìn)行不同的操作
if(this.isWeiXin()){
? ? ? ? console.log(" 是來(lái)自微信內(nèi)置瀏覽器")
? ? ? ? if(url_s.indexOf("code") > 0 ){// 如果url字符串包含code字段
? ? ? ? ? this.code = cs.code;//則獲取code參數(shù)值并存入緩存
? ? ? ? ? localStorage.setItem("code", cs.token);
? ? ? ? ? ? this.getOpenId();//繼續(xù)下一步獲取openid
? ? ? ? }else{//否則，就先調(diào)取函數(shù)獲取code
? ? ? ? ? this.getBaseInfos();
? ? ? ? }
? ? }else{
? ? ? ? console.log("不是來(lái)自微信內(nèi)置瀏覽器")
? ? }
