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

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

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

微信公眾號開發分為兩部分：

　　一、傳統開發（前后端分離） 推薦  頁面量大的時候優點就尤其突出了

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

　　2. H5部分  就是通過菜單跳轉其他的頁面皆為H5的  （說白了 開發微信公眾號前端主要負責的就是H5部分（就是和平常時開發移動端一模一樣沒區別））

　　二、node.js/H5  或者  php/h5 的話  那就不好意思了  以上全部都是自己搞

這里介紹的是第一種開發模式： 所謂的微信公眾號開發前端就是負責移動端而已  沒什么不同的

　　個人覺得新項目開發選好技術棧（框架、ui框架、適配、css預編譯等）重中之重，能節省很多的開發時間，

　　小提示：個人覺得移動端適配來說選用 px2rem 是最爽的適配，沒有之一; 對於傳統適配  怎么轉換之類統統說白白， 插件自己會幫你轉換，那叫一個爽；不懂得小伙伴可以去百度百度或者留言

　　遇到的坑如下：  （主要說和微信相關的，移動端常見的坑這里就不多說了；若開發中遇到了可以留言）

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

　　　　其中除UnionID外  其他的主要通過網頁授權均可獲取 （網頁授權具體操作將由下面的坑解釋）

　　　　開發的時候獲取用戶信息什么都獲取到了，但就差一個UnionID 怎么試都獲取不了，原因在於微信公眾號一定要到微信公眾開發平台綁定開放才能獲取到UnionID  這個坑因為沒想到這個方向所以坑了蠻久的時間

　　坑2、通過網頁授權獲取 code  再通過 code 獲取用戶openid、UnionID

　　　　web網頁端要獲取這兩個信息只能通過 code 獲取，后台獲取的話就不同

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

　　　　部分代碼如下：

　　　 1、不攜帶參數的情況

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
  },

         2、攜帶參數即從別的地方跳轉要攜帶參數在頁面顯示　（主要思路是解析出要的參數在網頁授權時傳給微信，微信會和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 在傳給后台 獲取用戶其他信息就行了
}

　　坑3、初次靜默授權返回的code 去獲取用戶的 UnionID 會獲取不到，  改為非靜默授權  即詢問用戶是否登錄    即可獲取用戶一切信息

　　坑4、關閉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
  }
}

結語： 有問題歡迎留言