一、openId是什麼？

openId是使用者在當前公眾號下的唯一標識（‘身份證'），就是說通過這個openId，就能區分在這個公眾號下具體是哪個使用者。

二、openId有什麼用？

假如使用者A在當前公眾號下購買了一件商品，使用者的下單資訊肯定要儲存到後臺資料庫，那根據什麼進行儲存呢？openId是使用者在當前公眾號下的唯一標識，通過openId和使用者的下單購買資訊進行鍵值對的資料繫結。那麼我要查詢該使用者購買過什麼商品，就能夠通過openId去查詢，並且資料是唯一的，不會和另外的使用者資料有衝突。

拓展：UnionID：一個商家或公司可能會有多個公眾號，假如使用者A同時都關注了這個公司下面的三個公眾號，那麼這個使用者就會有三個openId(一個公眾號就對應一個openID)。如果作為開發者的我們，要對這個使用者在這三個公眾號下消費的資料進行彙總，我怎麼獲取到這三份資料（同一使用者的）？答案是 UnionId，微信開發者文件：如果開發者擁有多個移動應用、網站應用和公眾帳號，可通過獲取使用者基本資訊中的unionid來區分使用者的唯一性，因為同一使用者，對同一個微信開放平臺下的不同應用（移動應用、網站應用和公眾帳號），unionid是相同的。就是說如果要獲取使用者在同一公司不同公眾號下的資料，後臺表結構不但要關聯openId,還要關聯UnionId。

三、怎麼獲取openId？

（一）登入微信公眾平臺後臺獲取公眾號的AppId，設定回撥地址。

回撥地址設定頁面嚮導：開發>介面許可權>網頁服務>網頁授權>修改。開發的專案需要放到已經解析好伺服器域名的伺服器下，同時把Mp***.text檔案放到伺服器根目錄下，此時你的伺服器必須能聯通外網也就是有公網IP,並且80埠是開啟的，可以使用阿里雲等伺服器，預設配置就可以了。

（二）根據開發需要，靜默授權還是非靜默授權

① 靜默授權：snsapi_base，沒有彈窗，只能獲取使用者的openId。

②非靜默授權：snsapi_userinfo，有彈框彈出需要使用者手動點選確認授權。可以獲取openId，使用者的頭像、暱稱等

（三）前端程式碼，配置的引數要一一對應，獲取code，並呼叫後臺介面，把code傳給後臺

redirect_uri，這個的意思是：授權完成後再重新回到當前頁面（又重新整理了一次頁面）

getUrlParam的方法，可以百度下，就是獲取頁面路徑的某個欄位所對應的引數。

如果配置引數一一對應，那麼此時已經通過回撥地址重新整理頁面後，你就會看到在位址列中的code了。

(四)前端擷取位址列中的code後通過調介面把code傳給後臺，後臺通過code獲取openId和使用者頭像暱稱等資訊並返回給前端

為什麼，前端不能一起把獲取code和獲取openId的操作一併做了，還要請求後臺，讓後臺獲取openId？

（五）後臺通過 code、AppSecret（公眾號平臺後臺取得）請求微信連結獲取openId

前端具體程式碼如下，可複製（記得把文中的 window.APPID改為自己公眾號的APPID）

<template>
  <div></div>
</template>
 
<script>
import GetUrlParam from '@/assets/js/util/getUrlParam.js'
export default {
  name: 'Index',data () {
    return {
    }
  },created () {
    this.getCode()
  },methods: {
    getCode () { // 非靜默授權，第一次有彈框
      const code = GetUrlParam('code') // 擷取路徑中的code，如果沒有就去微信授權，如果已經獲取到了就直接傳code給後臺獲取openId
      const local = window.location.href
      if (code == null || code === '') {
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + window.APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
      } else {
        this.getOpenId(code) //把code傳給後臺獲取使用者資訊
      }
    },getOpenId (code) { // 通過code獲取 openId等使用者資訊，/api/user/wechat/login 為後臺介面
      let _this = this
      this.$http.post('/api/user/wechat/login',{code: code}).then((res) => {
        let datas = res.data
        if (datas.code === 0 ) {
          console.log('成功')
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>
 
<style lang="less" scoped>
 
</style>

（六）通過openId做使用者的資料繫結或查詢等操作

前後端都獲取了openId後，就能通過openId做使用者資料的繫結和查詢了。

（七）補充說明

使用上述方法進行的微信授權，在手機端會有兩次空白頁跳轉，時間雖然很短暫，但有些產品經理會覺得這種體驗不好（實在很欠揍）。解決方法是：可以把跳轉到微信獲取code的這段連結拼接好直接複製到 微信公眾平臺 後臺管理系統選單列表裡面。這樣點選選單，在回撥頁通過擷取url中的code，就能直接獲取到code了，就避免了多次跳轉的情況。

（八）解決微信授權成功進入專案後，點選手機物理返回鍵或返回會出現空白頁或者報錯的情況，空白頁是因為授權頁就是空白頁。可以參考我的另一篇文章：

解決微信授權成功後點擊按返回鍵出現空白頁和報錯的問題
https://blog.csdn.net/qq_35430000/article/details/81505497

到此這篇關於微信h5靜默和非靜默授權獲取使用者openId的方法和步驟的文章就介紹到這了,更多相關微信h5靜默和非靜默授獲取openId內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！