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

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

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

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

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

微信分享

微信公眾號(hào)的appId，AppSecret

當(dāng)我們注冊(cè)一個(gè)微信公眾號(hào)后，便能夠得到一個(gè)appId(每個(gè)微信公眾號(hào)只有一個(gè)，一個(gè)微信公眾號(hào)唯一的標(biāo)識(shí))和appSecret(可以進(jìn)行重置)，這兩個(gè)信息是進(jìn)行微信公眾號(hào)開(kāi)發(fā)必不可少的，因?yàn)槲⑿殴娞?hào)中幾乎所有功能的開(kāi)發(fā)都與這兩個(gè)信息相關(guān)。

微信公眾號(hào)中IP白名單

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

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

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

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

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

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

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

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

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

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

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

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

先判斷當(dāng)前瀏覽器是不是微信內(nèi)置瀏覽器,微信網(wǎng)頁(yè)授權(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 第二步：通過(guò)code換取網(wǎng)頁(yè)授權(quán)access_token

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

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

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

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

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

微信分享其實(shí)用得非常得多，我就簡(jiǎn)單說(shuō)下在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

然后通過(guò)require或者import引入

import wx from "weixin-js-sdk";

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

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

 wx.config({
          debug: false,
          appId: appId, // 和獲取Ticke的必須一樣------必填，公眾號(hào)的唯一標(biāo)識(shí)
          timestamp:timestamp, // 必填，生成簽名的時(shí)間戳
          nonceStr: nonceStr, // 必填，生成簽名的隨機(jī)串
          signature: signature,// 必填，簽名，見(jiàn)附錄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è)面對(duì)應(yīng)的公眾號(hào)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è)面對(duì)應(yīng)的公眾號(hào)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);
            }
          });
        });

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

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

就不錯(cuò)了，最后來(lái)看看效果

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

今天就寫(xiě)到這里，需要交流的小伙伴請(qǐng)加群:526450553