需求

最近在做一個專案需求，分享領好書活動，獲取使用者的個人資訊以及unionID，並誘導使用者分享給好友或朋友圈，達到裂變拉新的目的。在做的過程中遇到了一些坑的地方，所以回過來總結一下

技術方案

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

實現步驟

1、要實現微信H5網頁自定義分享功能，必須先熟悉下微信公眾平臺開發文件，具體文件裡面說的很詳細，這裡說下需要注意的點，別忘了繫結開發者許可權，還有繫結js安全域名，要不然有可能會報redirect_uri引數錯誤。

2、首先一般在做微信H5網頁活動，都需要獲取使用者的個人資訊，這就需要使用者授權，一般授權有兩種方式，一種是靜默授權，一種是網頁授權，這個在微信開發文件說的很詳細。

對於已關注公眾號的使用者，如果使用者從公眾號的會話或者自定義選單進入本公眾號的網頁授權頁，即使是scope為snsapi_userinfo，也是靜默授權，使用者無感知

一般網頁授權流程分為四步：

①引導使用者進入授權頁面同意授權，獲取code

②通過code換取網頁授權access_token（與基礎支援中的access_token不同）

③如果需要，開發者可以重新整理網頁授權access_token，避免過期

④通過網頁授權獲取使用者基本資訊（openid 、UnionID、個人頭像、性別、省市、微信暱稱等）

3、下面是具體實現程式碼，說下大概思路，通過判斷引數是否在微信瀏覽器中開啟，是否讓使用者授權，並重定向到微信的介面拿到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);
    }
 

4、接下來就是如何自定義分享給好友或者朋友圈，同樣也是按照呼叫微信開發文件上說的進行配置和呼叫。在呼叫分享介面成功之後開始呼叫分享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);
        });
    },

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

總結

這裡遇到比較坑的就是，在呼叫分享事件的時候，不能同時寫四個分享按鈕事件，如果都寫上，會造成在安卓機上還沒有點選分享按鈕的時候，就已經走分享成功success回撥函數了，這裡說下為啥寫四個分享按鈕事件，因為發現如果不寫上即將廢掉的兩個onMenuShareTimeline、onMenuShareAppMessage會在安卓機上遇到不能分享的問題，所以把新增的兩個分享按鈕事件updateAppMessageShareData、updateTimelineShareData註釋掉，就都可以分享了，iOS和安卓均沒問題。

我發現其實遇到這種原因有可能是新舊兩個分享事件的執行順序的問題，也就是在呼叫新增的分享按鈕的時候，得先在wx.ready執行，而即將廢棄的介面是不需要的。