摘要：需求最近在做一個項目需求，分享領(lǐng)好書活動，獲取用戶的個人信息以及，并誘導(dǎo)用戶分享給好友或朋友圈，達到裂變拉新的目的。

最近在做一個項目需求，分享領(lǐng)好書活動，獲取用戶的個人信息以及unionID，并誘導(dǎo)用戶分享給好友或朋友圈，達到裂變拉新的目的。在做的過程中遇到了一些坑的地方，所以回過來總結(jié)一下

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

1、要實現(xiàn)微信H5網(wǎng)頁自定義分享功能，必須先熟悉下微信公眾平臺開發(fā)文檔，具體文檔里面說的很詳細，這里說下需要注意的點，別忘了綁定開發(fā)者權(quán)限，還有綁定js安全域名，要不然有可能會報redirect_uri參數(shù)錯誤。

2、首先一般在做微信H5網(wǎng)頁活動，都需要獲取用戶的個人信息，這就需要用戶授權(quán)，一般授權(quán)有兩種方式，一種是靜默授權(quán)，一種是網(wǎng)頁授權(quán)，這個在微信開發(fā)文檔說的很詳細。

對于已關(guān)注公眾號的用戶，如果用戶從公眾號的會話或者自定義菜單進入本公眾號的網(wǎng)頁授權(quán)頁，即使是scope為snsapi_userinfo，也是靜默授權(quán)，用戶無感知

一般網(wǎng)頁授權(quán)流程分為四步：

①引導(dǎo)用戶進入授權(quán)頁面同意授權(quán)，獲取code

②通過code換取網(wǎng)頁授權(quán)access_token（與基礎(chǔ)支持中的access_token不同）

③如果需要，開發(fā)者可以刷新網(wǎng)頁授權(quán)access_token，避免過期

④通過網(wǎng)頁授權(quán)獲取用戶基本信息（openid 、UnionID、個人頭像、性別、省市、微信昵稱等）

3、下面是具體實現(xiàn)代碼，說下大概思路，通過判斷參數(shù)是否在微信瀏覽器中打開，是否讓用戶授權(quán)，并重定向到微信的接口拿到code后通過接口傳給后端返回用戶的基本信息。

// 用戶授權(quán)
 if (this.$route.query.from) {
      // 跳轉(zhuǎn)微信頁面
        let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // 參數(shù)拼接
        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、接下來就是如何自定義分享給好友或者朋友圈，同樣也是按照調(diào)用微信開發(fā)文檔上說的進行配置和調(diào)用。在調(diào)用分享接口成功之后開始調(diào)用分享api，并在調(diào)用成功之后的回調(diào)函數(shù)執(zhí)行跳頁，這里微信那邊做了限制，如果用戶在點擊分享的時候取消了，默認還是走success成功回調(diào)函數(shù)，是拿不到最終分享成功的狀態(tài)。下面是實現(xiàn)分享的具體代碼

// 分享給朋友或朋友圈
    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, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
                imgUrl: param.imgUrl, // 分享圖標
                success: function() {
                  // 用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)
                 that.$Message.message("分享成功!");
                  that.toRouter();
                }
              });
              //分享到好友
              wx.onMenuShareAppMessage({
                title: param.title, // 分享標題
                desc: param.desc, // 分享描述
                link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
                imgUrl: param.imgUrl, // 分享圖標
                type: param.type, // 分享類型,music、video或link，不填默認為link
                dataUrl: param.dataUrl, // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空
                success: function() {
                  // 用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)
                  that.$Message.message("分享成功!");
                  that.toRouter();
                }
              });

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

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

這里遇到比較坑的就是，在調(diào)用分享事件的時候，不能同時寫四個分享按鈕事件，如果都寫上，會造成在安卓機上還沒有點擊分享按鈕的時候，就已經(jīng)走分享成功success回調(diào)函數(shù)了，這里說下為啥寫四個分享按鈕事件，因為發(fā)現(xiàn)如果不寫上即將廢掉的兩個onMenuShareTimeline、onMenuShareAppMessage會在安卓機上遇到不能分享的問題，所以把新增的兩個分享按鈕事件updateAppMessageShareData、updateTimelineShareData注釋掉，就都可以分享了，iOS和安卓均沒問題。

我發(fā)現(xiàn)其實遇到這種原因有可能是新舊兩個分享事件的執(zhí)行順序的問題，也就是在調(diào)用新增的分享按鈕的時候，得先在wx.ready執(zhí)行，而即將廢棄的接口是不需要的。