技術標籤：記錄前端vue

個人部落格地址

微信官方文件

注：1.web的分享只能通過微信右上角自帶的三個點分享，只有app才能實現自定義按鈕的分享。

步驟：

1.安裝 ：npm i -S weixin-js-sdk

2.新建js匯入

import wx from ‘weixin-js-sdk’ //微信sdk依賴

3.js檔案

import wx from 'weixin-js-sdk'			//微信sdk依賴
import axios from 'axios';    // 引用全域性

//要用到微信API
function getJSSDK (url, dataForWeixin) {
  // 呼叫後臺介面換取引數
 

  axios({
    url: "/news-serve/admin/wx-index/share",// 需要改成自己對應的介面
    params: {
      url: url
    }
  }).then(res => {
    wx.config({
      debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
      appId: res.data.data.appId, // 必填，公眾號的唯一標識
      timestamp:
 
 res.data.data.timestamp, // 必填，生成簽名的時間戳
      nonceStr: res.data.data.nonceStr, // 必填，生成簽名的隨機串
      signature: res.data.data.signature, // 必填，簽名
      // jsApiList: jsApiList // 必填，需要使用的JS介面列表
      jsApiList: [ //需要呼叫的JS介面列表
        'updateAppMessageShareData', //自定義“分享給朋友”及“分享到QQ”按鈕的分享內容（1.4.0） 新介面
        'updateTimelineShareData'
 
, //自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容（1.4.0） 老介面
        // 'getLocation'  //獲取定位
      ]
    })
    wx.ready(function () {      //需在使用者可能點選分享按鈕前就先呼叫
      wx.updateTimelineShareData({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger (result) { },
        success: function success (result) {
          //console.log('已分享');
        },
        cancel: function cancel (result) {
          //console.log('已取消');
        },
        fail: function fail (result) {
          //alert(JSON.stringify(result));
        }
      });
      wx.updateAppMessageShareData({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger (result) { },
        success: function success (result) {
          //console.log('已分享');
        },
        cancel: function cancel (result) {
          //console.log('已取消');
        },
        fail: function fail (result) {
          //alert(JSON.stringify(result));
        }
      });
    });
    wx.error(function (result) {
      // alert(JSON.stringify(res)+"微信驗證失敗");
    });
  })
}

export default {
  // 獲取JSSDK
  getJSSDK: getJSSDK
}

4. 頁面中引用 （在頁面資訊請求回來時呼叫這個share()方法，載入微信配置）

import weiXinShare from "../util/shareWx"

/**
 * @Description: 分享朋友圈
 * @date 2021/1/25
 */
share (title, desc, img) {
  // 分享朋友圈
  var ip1 = location.href.split("#")[0];
  let dataForWeixin = {
    title: title, //分享標題
    desc: desc, //分享內容
    linkurl: location.href, //分享連結
    img: img //分享內容顯示的圖片(圖片必須是正方形的連結)
  };
  weiXinShare.getJSSDK(ip1, dataForWeixin);
}

_this.share(_this.options.title,_this.options.content.replace(/<[^>]+>/g,''),_this.options.img);

5. 效果: