記錄一次開發(fā)微信網(wǎng)頁分享的步驟

更新時間：2019年05月07日 08:29:45 作者：小白

這篇文章主要介紹了記錄一次開發(fā)微信網(wǎng)頁分享的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

需求

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

技術方案

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

實現(xiàn)步驟

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

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

對于已關注公眾號的用戶，如果用戶從公眾號的會話或者自定義菜單進入本公眾號的網(wǎng)頁授權頁，即使是scope為snsapi_userinfo，也是靜默授權，用戶無感知
一般網(wǎng)頁授權流程分為四步：

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

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

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

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

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

// 用戶授權
 if (this.$route.query.from) {
   // 跳轉微信頁面
    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, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號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, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號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, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號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);
    });
  },

總結

這里遇到比較坑的就是，在調(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í)行，而即將廢棄的接口是不需要的。