你所誤解的微信公衆號開發、以及微信公衆號網頁受權、接收url跳轉參數等問題

前言：有一星期沒跟新博客了，最近太忙、項目趕進度就沒把時間花在博客上；今天來講說所謂的微信公衆號開發和填坑記錄；

微信公衆號：運行在微信終端的應用 （對於開發者來講比較爽的你只需考慮兼容微信瀏覽器，由於它是在微信內置瀏覽器環境下運行的）

微信公衆號開發分爲兩部分：

　　1、傳統開發（先後端分離） 推薦  頁面量大的時候優勢就尤爲突出了

　　1. 微信首頁 （即首頁菜單、跳轉連接、掃二維碼、消息推送回復等功能） 不要慌  這些百分之90%都是後臺來配置的，他們調用下微信公衆平臺提供的接口就ok了；爲何是後臺配置呢由於交互方式是 web用戶 --> 微信服務器 --> 後臺服務器；

　　2. H5部分  就是經過菜單跳轉其餘的頁面皆爲H5的  （說白了 開發微信公衆號前端主要負責的就是H5部分（就是和日常時開發移動端如出一轍沒區別））

　　2、node.js/H5  或者  php/h5 的話  那就很差意思了  以上所有都是本身搞

這裏介紹的是第一種開發模式： 所謂的微信公衆號開發前端就是負責移動端而已  沒什麼不一樣的

　　我的以爲新項目開發選好技術棧（框架、ui框架、適配、css預編譯等）重中之重，能節省不少的開發時間，

　　小提示：我的以爲移動端適配來講選用 px2rem 是最爽的適配，沒有之一; 對於傳統適配  怎麼轉換之類通通說白白， 插件本身會幫你轉換，那叫一個爽；不懂得小夥伴能夠去百度百度或者留言

　　遇到的坑以下：  （主要說和微信相關的，移動端常見的坑這裏就很少說了；若開發中遇到了能夠留言）

　　坑一、獲取用戶信息（openid、UnionID、暱稱、頭像、性別、所在城市、語言和關注時間等等）

　　　　其中除UnionID外  其餘的主要經過網頁受權都可獲取 （網頁受權具體操做將由下面的坑解釋）

　　　　開發的時候獲取用戶信息什麼都獲取到了，但就差一個UnionID 怎麼試都獲取不了，緣由在於微信公衆號必定要到微信公衆開發平臺綁定開放才能獲取到UnionID  這個坑由於沒想到這個方向因此坑了蠻久的時間

　　坑二、經過網頁受權獲取 code  再經過 code 獲取用戶openid、UnionID

　　　　web網頁端要獲取這兩個信息只能經過 code 獲取，後臺獲取的話就不一樣

　　　　獲取code 就要經過web網頁受權了 ： 具體流程是  在web頁面經過調用 微信提供的接口 發起受權；微信在把code已回調連接的形式返回給你，這時你解析url的參數就能拿到code 再傳給後臺

　　　　部分代碼以下：

　　　 一、不攜帶參數的狀況

mounted () {
    // 獲取路勁參數  靜默受權不提示用戶 scope=snsapi_base  非靜默scope=snsapi_userinfo 詢問操做  http 即官方提供的回調連接
    // AppId 爲微信公衆號的 id   httpUrl 爲微信所配置的網頁受權回調   網頁受權回調域名即發佈服務器後的項目  配置/查看步驟  最下面的接觸權限 --> 網頁受權獲取用戶信息 -->  點擊修改  跳轉到頁面最下面便可看到網頁受權域名設置
   let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
   window.location.href = http
  },

         二、攜帶參數即從別的地方跳轉要攜帶參數在頁面顯示　（主要思路是解析出要的參數在網頁受權時傳給微信，微信會和code一塊兒在傳回給你）

mounted () {
    // 獲取路勁參數  靜默受權不提示用戶 scope=snsapi_base   詢問操做 scope=snsapi_userinfo
    this.getUrlParams(decodeURI(window.location.href))
  },
  methods: {
    // 切割處理參數
    getUrlParams (url) {
      let webpageUrl = window.webpageUrl
      let params = {}
      let arr = {}
      if (url.split('?')) {
        arr = url.split('?')
      }
      if (arr.length <= 1) {
        // 微信公衆號首頁進入
        let httpUrl = encodeURIComponent(webpageUrl)
        let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
        window.location.href = http
      } else {
        // 掃描pc端二維碼進入攜帶參數的狀況
        arr = arr[1].split('&')
        for (let i = 0, l = arr.length; i < l; i++) {
          let a = arr[i].split('=')
          params[a[0]] = a[1]
        }
        // 有參數
        if (params && params.cityId) {
          webpageUrl += '?'
          Object.keys(params).forEach(function (key) {
            webpageUrl += `${key}=` + `${params[key]}&`
          })
          webpageUrl = webpageUrl.substring(0, webpageUrl.length - 1)
        }
        // 經過PC端掃碼跳過來的狀況下保存城市和小區信息
        let httpUrl = encodeURIComponent(webpageUrl)
        let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
        window.location.href = http
      }
    }
  }

　　經過上述回調最終微信端會回調上面httpUrl 頁面  code 一參數形式傳過來  只需解析出 code 保存下來就行

mounted () {
　　 // 切割 url 封裝參數
    let params = {}
      let arr = url.split('?')
      if (arr.length <= 1) {
        return params
      }
      arr.forEach(ls => {
        ls = ls.split('&')
        if (ls.length > 1) {
          for (let i = 0, l = ls.length; i < l; i++) {
            let a = ls[i].split('=')
            params[a[0]] = a[1]
          }
        }
      })
      console.log(params) // 參數對象 params.code 就是該用戶的code 在傳給後臺 獲取用戶其餘信息就好了
}

　　坑三、初次靜默受權返回的code 去獲取用戶的 UnionID 會獲取不到，  改成非靜默受權  即詢問用戶是否登陸    便可獲取用戶一切信息

　　坑四、關閉H5頁面回到公衆號首頁 若你開啓了eslint則會報錯  WeixinJSBridgeReady undefind  由於這個方法只在微信瀏覽器中有   這時加上 eslint-disable-line 避免語法檢查就行  項目在微信瀏覽器中沒問題

methods: {
  // 返回首頁
  goBack () {
    if (typeof WeixinJSBridge === 'undefined') {
      if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
      } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
      }
    } else {
      WeixinJSBridge.call('closeWindow') // eslint-disable-line
    }
  },
  onBridgeReady () {
    WeixinJSBridge.call('hideOptionMenu') // eslint-disable-line
  }
}

結語： 有問題歡迎留言