摘要：在實(shí)際開發(fā)中，無論是做端端還是微信公眾號等類型的項(xiàng)目的時候，或多或少都會涉及到微信相關(guān)的開發(fā)，最近公司項(xiàng)目要求實(shí)現(xiàn)微信網(wǎng)頁授權(quán)，并獲取微信用戶基本信息的功能及微信分享的功能，現(xiàn)在總算完成了，但開發(fā)過程中遇到好幾個坑。

在實(shí)際開發(fā)中，無論是做PC端、WebApp端還是微信公眾號等類型的項(xiàng)目的時候，或多或少都會涉及到微信相關(guān)的開發(fā)，最近公司項(xiàng)目要求實(shí)現(xiàn)微信網(wǎng)頁授權(quán)，并獲取微信用戶基本信息的功能及微信分享的功能，現(xiàn)在總算完成了，但開發(fā)過程中遇到好幾個坑。廢話不多說了，開始正題。

微信相關(guān)開發(fā)知識了解

怎么樣實(shí)現(xiàn)微信相關(guān)功能本地測試

微信網(wǎng)頁授權(quán)

微信分享

微信公眾號的appId，AppSecret

當(dāng)我們注冊一個微信公眾號后，便能夠得到一個appId(每個微信公眾號只有一個，一個微信公眾號唯一的標(biāo)識)和appSecret(可以進(jìn)行重置)，這兩個信息是進(jìn)行微信公眾號開發(fā)必不可少的，因?yàn)槲⑿殴娞栔袔缀跛泄δ艿拈_發(fā)都與這兩個信息相關(guān)。

微信公眾號中IP白名單

在開發(fā)微信公眾功能的時候，需要我們添加IP白名單，這樣以便能夠獲取到access_token，關(guān)于access_token的介紹請看這里https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

網(wǎng)頁授權(quán)域名以及JS接口安全域名

網(wǎng)頁授權(quán)域名:在我們的應(yīng)用中需要微信用戶進(jìn)行登錄、獲取微信用戶基本信息的時候，需要設(shè)置這個域名

JS接口安全域名:在我們的應(yīng)用中需要實(shí)現(xiàn)微信分享等功能，需要設(shè)置這個域名。

相對很多人都對這個問題比較感興趣，因?yàn)樵谶M(jìn)行涉及到微信公眾號中功能開發(fā)的時候，默認(rèn)情況下我們是不能進(jìn)行本地測試的，也就是說測試都需要將代碼進(jìn)行部署才測試，但這非常不利于我們的測試開發(fā)，其實(shí)進(jìn)行本地測試開發(fā)很簡單，只需要我們有一個域名就可以了，然后將我們本地的ip映射到這個域名上，就可以本地測試了。下面我就說說我是怎么做本地測試的.

因?yàn)橘徺I域名需要進(jìn)行備案操作之類的，比較麻煩，所以一般第三方平臺就可以讓我們得到一個域名。我是在natpp(ngrok)這個網(wǎng)站上注冊的https://natapp.cn/

我是花了五元錢購買了一個月的隧道，因?yàn)槊赓M(fèi)的不怎么靠譜，畢竟是免費(fèi)的，哈哈。

注意，我們不能直接使用這個隧道，因?yàn)檫@個隧道是三級域名，無法用于微信開發(fā)，需要綁定一個二級域名或自主域名

當(dāng)綁定完域名之后，在本地我們需要將本地ip進(jìn)行映射穿透操作。
windows下打開dos窗口，輸入 natapp -authtoken 你的隧道的authtoken

將你在上面設(shè)置的二級域名添加到上述說的網(wǎng)頁授權(quán)域名以及JS接口安全域名

接下來便可以進(jìn)行本地測試了.最后說一下，開發(fā)過程中下載微信開發(fā)工具進(jìn)行調(diào)試也是不錯的選擇，下載地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

微信網(wǎng)頁授權(quán)的目的主要是實(shí)現(xiàn)三方站點(diǎn)微信的登錄、獲取微信用戶信息等

先判斷當(dāng)前瀏覽器是不是微信內(nèi)置瀏覽器,微信網(wǎng)頁授權(quán)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 第一步：用戶同意授權(quán)，獲取code

2 第二步：通過code換取網(wǎng)頁授權(quán)access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用戶信息(需scope為 snsapi_userinfo)

5 附：檢驗(yàn)授權(quán)憑證（access_token）是否有效

微信API里面關(guān)于這些都介紹得比較清楚的，我就說說在這個過程中我所遇到的問題，以及解決辦法

在第一步獲取code的時候，因?yàn)檫@個code在五分鐘之內(nèi)只能夠使用一次，所以必須對這個code進(jìn)行緩存起來。否則會出現(xiàn)"errcode":40163,"errmsg":"code been used, hints: [ req_id: nOCEBa0466th12 ]"或{"errcode":40029,"errmsg":"invalid code"} 錯誤。

微信分享其實(shí)用得非常得多，我就簡單說下在vue-cli中怎么引入微信分享的sdk，以及怎么樣實(shí)現(xiàn)分享功能.

微信分享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";

微信分享中最重要的是獲取到簽名，才能夠?qū)崿F(xiàn)微信的分享

再根據(jù)當(dāng)前的url去獲取到所需要的參數(shù)來完成簽名的驗(yàn)證，參數(shù)主要用appId
、nonceStr、timestamp、signature，然后通過wx對象的config方法去進(jìn)行配置驗(yàn)證簽名

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


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

          //分享到QQ空間
          wx.onMenuShareQZone({
            title: _this.newDetailObj.title, // 分享標(biāo)題
            desc: _this.desc, // 分享描述
            link: window.location.href.split("#")[0], // 分享鏈接
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標(biāo)
            success: function (res) {
              // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
              logUtil.printLog("分享到QQ空間成功返回的信息為:",res);
            },
            cancel: function (res) {
              // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
              logUtil.printLog("取消分享到QQ空間返回的信息為:",res);
            }
          });
        });

在這個過程中出現(xiàn)的錯誤就是:config:invalid signature，這個錯誤就說明簽名不對，這時候需要靜下心來去想想，然后進(jìn)行排除，我最后發(fā)現(xiàn)原來是當(dāng)前的url的錯誤，看了網(wǎng)上很多都是url需要進(jìn)行編碼

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

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

一般出現(xiàn)這個問題，大部分都是url的問題哦。

今天就寫到這里，需要交流的小伙伴請加群:526450553