vue ＋ 微信二次分享／自定義分享

微信二次分享／自定義分享

• 從App中使用App分享（一次分享）

• 使用微信導航欄的分享（二次分享） －－已做處理

• 使用微信導航欄的分享（二次分享） －－未做處理

如上圖，如果不做相關處理，頁面進行二次分享，用戶看到的就是鏈接＋空圖，上面顯示的文案（考拉閱讀）實際上是獲取的title標籤中的文案，我在網上查的相關例子有說明，圖片如果不設置，將會自動獲取瀏覽器渲染的第一張圖片，經過個人測試，並沒有實現（朋友圈同理，不做圖片展示）。

---

微信js-sdk說明文檔

• 先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。（一般後端配置）

• 前端需要調取後端的接口，獲取微信的congfig所需要的參數

  wx.config({
      debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
      appId: '', // 必填，公衆號的唯一標識
      timestamp: , // 必填，生成簽名的時間戳
      nonceStr: '', // 必填，生成簽名的隨機串
      signature: '',// 必填，簽名
      jsApiList: [] // 必填，需要使用的JS接口列表
  });
  

• jsApiList裏面需要填寫你調用的jsApi，updateAppMessageShareData（分享微信，QQ），updateTimelineShareData（微信朋友圈，QQ空間），onMenuShareTimeline／onMenuShareAppMessage／onMenuShareQQ 這三個即將廢棄，不建議使用。
  ⚠️但是在本次開發中，我只使用了updateAppMessageShareData，updateTimelineShareData，個別Android（微信版本7.0.3）分享出來的還是沒有圖片和文案，ios的是沒有問題，所以又加上了棄用的onMenuShareTimeline，onMenuShareAppMessage之後，安卓機也可以正常分享。

1. 判斷當前客戶端版本是否支持指定JS接口

   wx.checkJsApi({
       jsApiList: ['chooseImage'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
       success: function(res) {
       // 以鍵值對的形式返回，可用的api值true，不可用爲false
       // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
       }
   });
   
   wx.config中的 debug 設爲true，在微信測試時會自動彈出相關信息，在微信開發者工具中也會打印出流程（分爲begin，end）,如下圖

1. 通過ready接口處理成功驗證

2. 在ready接口中調取updateAppMessageShareData，updateTimelineShareData方法

   wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
       wx.updateAppMessageShareData({ 
           title: '', // 分享標題
           desc: '', // 分享描述
           link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
           imgUrl: '', // 分享圖標
           success: function () {
             // 設置成功
           }
       })
   });
   在vue的開發項目中，可在created或mounted生命週期中調用

3. 通過error接口處理失敗驗證

   wx.error(function(res){
       // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。
   });

---

---

⚠️需要注意的點

1. 通過後端的接口獲取微信配置的參數時，需要傳遞當前頁面url

   -  url（當前網頁的URL，不包含#及其後面部分），如果沒有＃，則需要傳遞完整的url
   -  url需要編碼    encodeURIComponent(url)
   

2. 代碼如下

//  wetchat.js  －－ 個人封裝
import wx from 'weixin-js-sdk';  // 引入wxJS
import apiUrl from "@/api/index";  // 本項目的api （根據自己項目）
export function wxChatShare(param) {
    let _url = encodeURIComponent(param.url)  // 當前頁面的url
    apiUrl.wechatConfig(_url)  // wechatConfig是獲取微信配置相關信息的接口，此處根據個人項目寫法而定，類似於this.$ajax
    .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: [  // 用的方法都要加進來
                    'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage'
                ]
            });
            wx.ready(function () {
                //分享到朋友圈

                wx.updateTimelineShareData({ 
                    title: param.title, // 分享標題
                    link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標
                    success: function () {
                      // 設置成功
                        console.log("分享到朋友圈成功返回的信息爲:", res);
                        this.$Message.message("設置成功!");
                    }
                })

                wx.onMenuShareTimeline({
                    title: param.title, // 分享標題
                    link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標
                    success: function () {
                    // 用戶點擊了分享後執行的回調函數
                    },
                })

                //分享給朋友

                wx.updateAppMessageShareData({ 
                    title: param.title, // 分享標題
                    desc: param.desc, // 分享描述
                    link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標
                    success: function () {
                      // 設置成功
                        console.log("分享到朋友圈成功返回的信息爲:", res);
                        this.$Message.message("設置成功!");
                    }
                })
                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 () {
                    // 用戶點擊了分享後執行的回調函數
                    }
                });
            });
            wx.error(function (res) {
                console.log('驗證失敗返回的信息:', res);
            });
        } else {
            console.log(res.data.message);
        }
    })
  }

// home.vue

  import * as wechatJS from '@/utils/wechat'  // 引入wechat.js

//  寫在方法中調用，或者在生命週期中調用
let _param = {
    studentId: 1, // 個人項目而定
    activityId: 1, // 個人項目而定
    url: window.location.href, // 當前頁面url
    title: "爲我點贊，一起免費搶考拉閱讀VIP會員卡，暢讀一萬本好書～",  // 分享數據配置
    desc: "孩子要讀書，上考拉閱讀", // 分享數據配置
    link: _nowUrl, // 分享數據配置
    imgUrl: url, // 分享數據配置  －－ 全路徑
    type: "link", // 分享類型,music、video或link，不填默認爲link
    dataUrl: " ", // 如果type是music或video，則要提供數據鏈接，默認爲空
}

---

已上
有什麼不清楚的，或者需要糾正的，歡迎留言～