H5網頁 vue 調用 微信分享給朋友圈 分享給朋友圈 功能 踩坑實戰，附註意事項 及解決方案

最近有一個微信分享的功能，恰逢疫情期間遠程辦公，然後家裏的筆記本比較拉閘本地環境不完善，然後遠程辦公只能推代碼到測試環境調試，博主也是比較難受，日漸憔悴，一週沒對接好的問題，好在到了公司一下午就調試好了，廢話不多說了

分享成功失敗的對比微信截圖如下

在這之前
主要代碼

 getShareInfo (tit, fxUrl) {//如果分享的內容會根據情況變化，那麼這裏可以傳入分享標題及url
      let urlPath = location.href.split("#")[0] || "";
      var data = {//請求參數
        url: encodeURIComponent(urlPath),  // keyi
      }
      getWxJSSDKConfig(data)//這裏我寫了一個公用的接口請求js，這裏正常axios請求就可以，只要拿到數據都可以
        .then(res => {
          res.data.debug = true
          console.log("jsapi_ticket", res.data)
          localStorage.setItem("jsapi_ticket", res.data);
          window.wx.config({
            debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
            appId: res.data.appId, // 必填，公衆號的唯一標識
            timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
            nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
            signature: res.data.signature, // 必填，簽名，見附錄1
            jsApiList: res.data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
            // jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
          })
          let urlPath = this.url.split("#")[0] || "";
          window.wx.ready(() => {
            // alert("準備完畢，加載方法");
            //分享到朋友圈
            window.wx.updateTimelineShareData({
              title: '共克疫情，四喜在線服務',   // 分享時的標題
              link: urlPath,     // 分享時的鏈接 // keyi
              imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'),   // 分享時的圖標
              success: function () {
                console.log("分享成功");
              },
              cancel: function () {
                console.log("取消分享");
              }
            });
            //分享給朋友
            window.wx.updateAppMessageShareData({
              title: '共克疫情，四喜在線服務',
              desc: '千人專業電商運營公司，深耕行業12年，一鍵免費制定電商解決方案。',
              link: urlPath, // keyi
              imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'),
              type: '',
              dataUrl: '',
              success: function (n) {
                console.log("分享成功", n);
              },
              complete: function (n) {
                console.log(n);
              }
            });
          })
        })
    },

在這之前
1.
2020年3月16日10:27:41 這個時間節點的技術要求，這個功能必須依賴 微信公衆號
2.
配置api以及js域名白名單
3.
驗籤 ，博主這裏是前端調接口，後端驗籤，常規操作是這樣，但是前端也可以自己去驗籤，不過這個比較少見吧，視自己情況，前端驗籤網上應該有不少教程，這裏就不多闡述了。
4. 驗籤傳的url切記let urlPath = location.href.split("#")[0] || "";不管你的項目有沒有#，給我加上就完事了 請求參數記得encodeURIComponent一下var data = {//請求參數 url: encodeURIComponent(urlPath), // keyi }
5.updateTimelineShareData很關鍵，不要給我用什麼 onmune的方法，要廢棄了， jsdk版本1.4.0給我裝1.6.0 ，npm裝不上的，index.html 用script標籤引用，像博主這樣window調用，有問題的私聊我。這裏let urlPath = this.url.split("#")[0] || "";加上let urlPath = this.url.split("#")[0] || ""; window.wx.ready(() => { // alert("準備完畢，加載方法"); //分享到朋友圈 window.wx.updateTimelineShareData({ title: '共克疫情，四喜在線服務', // 分享時的標題 link: urlPath, // 分享時的鏈接 // keyi imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), // 分享時的圖標 success: function () { console.log("分享成功"); }, cancel: function () { console.log("取消分享"); } }); //分享給朋友 window.wx.updateAppMessageShareData({ title: '共克疫情，四喜在線服務', desc: '千人專業電商運營公司，深耕行業12年，一鍵免費制定電商解決方案。', link: urlPath, // keyi imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), type: '', dataUrl: '', success: function (n) { console.log("分享成功", n); }, complete: function (n) { console.log(n); } });
這樣玩。
正常流程走下來，如果你操作沒問題基本就分享成功了。
然後下面說幾個博主踩的坑，僅供借鑑

不成功的又不知道錯在哪裏的用微信開發者工具給我調試
1.
pc端微信分享成功然後手機不行的，統統給我用jsdk1.6.0的版本
2.
63004幾個常見的錯誤
js和api域名白名單一定要配置
然後 後端的驗簽有專門網站可以驗證，其他步驟沒錯就去調試下這個
3.
出現url報錯的就看下我上面的。#去沒去 加密加沒加