記錄一次開發微信網頁分享

需求

最近在作一個項目需求，分享領好書活動，獲取用戶的我的信息以及unionID，並誘導用戶分享給好友或朋友圈，達到裂變拉新的目的。在作的過程當中遇到了一些坑的地方，因此回過來總結一下

技術方案

使用微信JS-SDK自定義分享到好友和分享到朋友圈

實現步驟

一、要實現微信H5網頁自定義分享功能，必須先熟悉下微信公衆平臺開發文檔，具體文檔裏面說的很詳細，這裏說下須要注意的點，別忘了綁定開發者權限，還有綁定js安全域名，要否則有可能會報redirect_uri參數錯誤。

二、首先通常在作微信H5網頁活動，都須要獲取用戶的我的信息，這就須要用戶受權，通常受權有兩種方式，一種是靜默受權，一種是網頁受權，這個在微信開發文檔說的很詳細。

對於已關注公衆號的用戶，若是用戶從公衆號的會話或者自定義菜單進入本公衆號的網頁受權頁，即便是scope爲snsapi_userinfo，也是靜默受權，用戶無感知

通常網頁受權流程分爲四步：

①引導用戶進入受權頁面贊成受權，獲取code

②經過code換取網頁受權access_token（與基礎支持中的access_token不一樣）

③若是須要，開發者能夠刷新網頁受權access_token，避免過時

④經過網頁受權獲取用戶基本信息（openid 、UnionID、我的頭像、性別、省市、微信暱稱等）

三、下面是具體實現代碼，說下大概思路，經過判斷參數是否在微信瀏覽器中打開，是否讓用戶受權，並重定向到微信的接口拿到code後經過接口傳給後端返回用戶的基本信息。

// 用戶受權
 if (this.$route.query.from) {
      // 跳轉微信頁面
        let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // 參數拼接
        let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=微信公衆號APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
        window.location.href = _shareUrl; // 重定向到這個定義的URL
    }
    // 經過code獲取用戶信息
    if (this.$route.query.code) {
      let _code = this.$route.query.code;
      this.handleWechatMsg(_code);
    }

四、接下來就是如何自定義分享給好友或者朋友圈，一樣也是按照調用微信開發文檔上說的進行配置和調用。在調用分享接口成功以後開始調用分享api，並在調用成功以後的回調函數執行跳頁，這裏微信那邊作了限制，若是用戶在點擊分享的時候取消了，默認仍是走success成功回調函數，是拿不到最終分享成功的狀態。下面是實現分享的具體代碼

// 分享給朋友或朋友圈
    wxChatShare(param) {
      var that = this;
      let _url = encodeURIComponent(param.url);
      apiUrl.wechatConfig(_url).then(res => {
          if (res.data.code == 200) {
              wx.config({
                debug: false,
                appId: res.data.content.appid,
                timestamp: res.data.content.timestamp, // 必填，生成簽名的時間戳
                nonceStr: res.data.content.nonceStr, // 必填，生成簽名的隨機串
                signature: res.data.content.signature, // 必填，簽名
                jsApiList: [
                  "onMenuShareTimeline",
                  "onMenuShareAppMessage"
                  // "updateAppMessageShareData",
                  // "updateTimelineShareData"
                ]
              });
              // wx.ready(function() {
              //分享到朋友圈
              wx.onMenuShareTimeline({
                title: param.title, // 分享標題
                link: param.link, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                imgUrl: param.imgUrl, // 分享圖標
                success: function() {
                  // 用戶點擊了分享後執行的回調函數
                 that.$Message.message("分享成功!");
                  that.toRouter();
                }
              });
              //分享到好友
              wx.onMenuShareAppMessage({
                title: param.title, // 分享標題
                desc: param.desc, // 分享描述
                link: param.link, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                imgUrl: param.imgUrl, // 分享圖標
                type: param.type, // 分享類型,music、video或link，不填默認爲link
                dataUrl: param.dataUrl, // 若是type是music或video，則要提供數據連接，默認爲空
                success: function() {
                  // 用戶點擊了分享後執行的回調函數
                  that.$Message.message("分享成功!");
                  that.toRouter();
                }
              });

              // wx.updateTimelineShareData({
              //   title: param.title, // 分享標題
              //   link: param.link, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
              //   imgUrl: param.imgUrl, // 分享圖標
              //   success: function(res) {
              //     // 設置成功
              //     that.$Message.message("設置成功!");
              //     that.toRouter();
              //   }
              // });

              // //分享給朋友
              // wx.updateAppMessageShareData({
              //   title: param.title, // 分享標題
              //   desc: param.desc, // 分享描述
              //   link: param.link, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
              //   imgUrl: param.imgUrl, // 分享圖標
              //   success: function(res) {
              //     // 設置成功
              //     that.$Message.message("設置成功!");
              //     that.toRouter();
              //   }
              // });
              // });
              wx.error(function(res) {
                console.log("驗證失敗返回的信息:", res);
              });
          } else {
            console.log(res.data.message);
          }
        })
        .catch(err => {
          this.$Message.message(error);
        });
    },

總結

這裏遇到比較坑的就是，在調用分享事件的時候，不能同時寫四個分享按鈕事件，若是都寫上，會形成在安卓機上尚未點擊分享按鈕的時候，就已經走分享成功success回調函數了，這裏說下爲啥寫四個分享按鈕事件，由於發現若是不寫上即將廢掉的兩個onMenuShareTimeline、onMenuShareAppMessage會在安卓機上遇到不能分享的問題，因此把新增的兩個分享按鈕事件updateAppMessageShareData、updateTimelineShareData註釋掉，就均可以分享了，iOS和安卓均沒問題。

我發現其實遇到這種緣由有多是新舊兩個分享事件的執行順序的問題，也就是在調用新增的分享按鈕的時候，得先在wx.ready執行，而即將廢棄的接口是不須要的。