VueJs單頁應用實現微信網頁受權及微信分享功能

在實際開發中，不管是作PC端、WebApp端仍是微信公衆號等類型的項目的時候，或多或少都會涉及到微信相關的開發，最近公司項目要求實現微信網頁受權，並獲取微信用戶基本信息的功能及微信分享的功能，如今總算完成了，但開發過程當中遇到好幾個坑。廢話很少說了，開始正題。

描述點

1. 微信相關開發知識瞭解
2. 怎麼樣實現微信相關功能本地測試
3. 微信網頁受權
4. 微信分享

微信相關開發知識瞭解

• 微信公衆號的appId，AppSecret

  • 當咱們註冊一個微信公衆號後，便可以獲得一個appId(每一個微信公衆號只有一個，一個微信公衆號惟一的標識)和appSecret(能夠進行重置)，這兩個信息是進行微信公衆號開發必不可少的，由於微信公衆號中幾乎全部功能的開發都與這兩個信息相關。

• 微信公衆號中IP白名單

  • 在開發微信公衆功能的時候，須要咱們添加IP白名單，這樣以便可以獲取到access_token，關於access_token的介紹請看這裏https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

• 網頁受權域名以及JS接口安全域名

  • 網頁受權域名:在咱們的應用中須要微信用戶進行登陸、獲取微信用戶基本信息的時候，須要設置這個域名
  • JS接口安全域名:在咱們的應用中須要實現微信分享等功能，須要設置這個域名。

怎麼樣實現微信相關功能本地測試

相對不少人都對這個問題比較感興趣，由於在進行涉及到微信公衆號中功能開發的時候，默認狀況下咱們是不能進行本地測試的，也就是說測試都須要將代碼進行部署才測試，但這很是不利於咱們的測試開發，其實進行本地測試開發很簡單，只須要咱們有一個域名就能夠了，而後將咱們本地的ip映射到這個域名上，就能夠本地測試了。下面我就說說我是怎麼作本地測試的.

由於購買域名須要進行備案操做之類的，比較麻煩，因此通常第三方平臺就可讓咱們獲得一個域名。我是在natpp(ngrok)這個網站上註冊的https://natapp.cn/

我是花了五元錢購買了一個月的隧道，由於免費的不怎麼靠譜，畢竟是免費的，哈哈。

注意，咱們不能直接使用這個隧道，由於這個隧道是三級域名，沒法用於微信開發，須要綁定一個二級域名或自主域名

當綁定完域名以後，在本地咱們須要將本地ip進行映射穿透操做。
windows下打開dos窗口，輸入 natapp -authtoken 你的隧道的authtoken

將你在上面設置的二級域名添加到上述說的網頁受權域名以及JS接口安全域名

接下來即可以進行本地測試了.最後說一下，開發過程當中下載微信開發工具進行調試也是不錯的選擇，下載地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

微信網頁受權

微信網頁受權的目的主要是實現三方站點微信的登陸、獲取微信用戶信息等

實現微信網頁受權獲取微信用戶的基本信息

• 先判斷當前瀏覽器是否是微信內置瀏覽器,微信網頁受權api： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

isweixin() {
          const ua = window.navigator.userAgent.toLowerCase();
          if(ua.match(/MicroMessenger/i) == 'micromessenger'){
              return true;
          } else {
              return false;
          }
      },

• 1 第一步：用戶贊成受權，獲取code
• 2 第二步：經過code換取網頁受權access_token
• 3 第三步：刷新access_token（若是須要）
• 4 第四步：拉取用戶信息(需scope爲 snsapi_userinfo)
• 5 附：檢驗受權憑證（access_token）是否有效

微信API裏面關於這些都介紹得比較清楚的，我就說說在這個過程當中我所遇到的問題，以及解決辦法

在第一步獲取code的時候，由於這個code在五分鐘以內只可以使用一次，因此必須對這個code進行緩存起來。不然會出現"errcode":40163,"errmsg":"code been used, hints: [ req_id: nOCEBa0466th12 ]"或{"errcode":40029,"errmsg":"invalid code"} 錯誤。

微信分享

微信分享其實用得很是得多，我就簡單說下在vue-cli中怎麼引入微信分享的sdk，以及怎麼樣實現分享功能.

微信分享APi: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

首先引入sdk:

npm install weixin-js-sdk --save-dev

而後經過require或者import引入

import wx from 'weixin-js-sdk';

微信分享中最重要的是獲取到簽名，纔可以實現微信的分享

再根據當前的url去獲取到所須要的參數來完成簽名的驗證，參數主要用appId
、nonceStr、timestamp、signature，而後經過wx對象的config方法去進行配置驗證簽名

wx.config({
          debug: false,
          appId: appId, // 和獲取Ticke的必須同樣------必填，公衆號的惟一標識
          timestamp:timestamp, // 必填，生成簽名的時間戳
          nonceStr: nonceStr, // 必填，生成簽名的隨機串
          signature: signature,// 必填，簽名，見附錄1
          //須要分享的列表項:發送給朋友，分享到朋友圈，分享到QQ，分享到QQ空間
          jsApiList: [
            'onMenuShareAppMessage','onMenuShareTimeline',
            'onMenuShareQQ','onMenuShareQZone'
          ]
        });


         //處理驗證失敗的信息
        wx.error(function (res) {
          logUtil.printLog('驗證失敗返回的信息:',res);
        });
        //處理驗證成功的信息
        wx.ready(function () {
        //              alert(window.location.href.split('#')[0]);
          //分享到朋友圈
          wx.onMenuShareTimeline({
            title: _this.newDetailObj.title, // 分享標題
            link: window.location.href.split('#')[0], // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標
            success: function (res) {
              // 用戶確認分享後執行的回調函數
              logUtil.printLog("分享到朋友圈成功返回的信息爲:",res);
              _this.showMsg("分享成功!")
            },
            cancel: function (res) {
              // 用戶取消分享後執行的回調函數
              logUtil.printLog("取消分享到朋友圈返回的信息爲:",res);
            }
          });
          //分享給朋友
          wx.onMenuShareAppMessage({
            title: _this.newDetailObj.title, // 分享標題
            desc: _this.desc, // 分享描述
            link: window.location.href.split('#')[0], // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標
            type: '', // 分享類型,music、video或link，不填默認爲link
            dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
            success: function (res) {
              // 用戶確認分享後執行的回調函數
              logUtil.printLog("分享給朋友成功返回的信息爲:",res);
            },
            cancel: function (res) {
              // 用戶取消分享後執行的回調函數
              logUtil.printLog("取消分享給朋友返回的信息爲:",res);
            }
          });
          //分享到QQ
          wx.onMenuShareQQ({
            title: _this.newDetailObj.title, // 分享標題
            desc: _this.desc, // 分享描述
            link: window.location.href.split('#')[0], // 分享連接
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標
            success: function (res) {
              // 用戶確認分享後執行的回調函數
              logUtil.printLog("分享到QQ好友成功返回的信息爲:",res);
            },
            cancel: function (res) {
              // 用戶取消分享後執行的回調函數
              logUtil.printLog("取消分享給QQ好友返回的信息爲:",res);
            }
          });

          //分享到QQ空間
          wx.onMenuShareQZone({
            title: _this.newDetailObj.title, // 分享標題
            desc: _this.desc, // 分享描述
            link: window.location.href.split('#')[0], // 分享連接
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標
            success: function (res) {
              // 用戶確認分享後執行的回調函數
              logUtil.printLog("分享到QQ空間成功返回的信息爲:",res);
            },
            cancel: function (res) {
              // 用戶取消分享後執行的回調函數
              logUtil.printLog("取消分享到QQ空間返回的信息爲:",res);
            }
          });
        });

在這個過程當中出現的錯誤就是:config:invalid signature，這個錯誤就說明簽名不對，這時候須要靜下心來去想一想，而後進行排除，我最後發現原來是當前的url的錯誤，看了網上不少都是url須要進行編碼

let url = encodeURIComponent(window.location.href.split('#')[0]);

就不錯了，最後來看看效果

通常出現這個問題，大部分都是url的問題哦。

今天就寫到這裏，須要交流的小夥伴請加羣:526450553