vue——配置微信分享

參考：https://www.cnblogs.com/goloving/p/9256212.html

 

1. main.js

import WXConfig from '../../assets/js/wx.jsapi';

 

2. wx.jsapi.js

import axios from 'axios'

export default {
    wxShowMenu: function(shareData) {
    　　var localURL = location.href.split('#')[0];

    　　var param = {
      　　'url': localURL
    　　};
   　　 var wxData = shareData.wxData;//分享配置信息
   　　 var Param1= shareData.param1;//假設需傳參數1
   　　 var Param2= shareData.param2;//假設需傳參數2
　　　　 var ifshare = shareData.ifshare;//是否開啟分享
   　　 var _this = shareData.that;
    　　axios.get('*****', {//獲取config信息鏈接
      　　params: param
    　　}).then(function(res) {
      　　if (res.status == 200 && res.data.result == 0) {
        　　var getMsg = res.data.message.ticket;
        　　wx.config({
          　　debug: false, //生產環境需要關閉debug模式
         　　 appId: getMsg.appId, //appId通過微信服務號后台查看
          　　timestamp: getMsg.timestamp, //生成簽名的時間戳
          　　nonceStr: getMsg.nonceStr, //生成簽名的隨機字符串
          　　signature: getMsg.signature, //簽名
         　　 jsApiList: [ //需要調用的JS接口列表
            　　'onMenuShareTimeline', //分享給好友
            　　'onMenuShareAppMessage', //分享到朋友圈
　　　　　　　　　'hideMenuItems'
          　　]
        　　});

       　　 wx.ready(function() {

          /* wx.checkJsApi({
              jsApiList: ["showMenuItems"],
              success: function(res) {
                  wx.showMenuItems({
                      menuList: [
                          'menuItem:share:appMessage', //發送給朋友
                          'menuItem:share:timeline' //分享到朋友圈
                      ]
                  });
              }
          });*/

　　　　　　　　if (ifshare == '1') {//后端未開啟分享則屏蔽分享菜單
　　　　　　　　　　wx.hideAllNonBaseMenuItem();
　　　　　　　　　　return;
　　　　　　　　}

          //分享到朋友圈
          wx.onMenuShareTimeline({
            title: wxData.title, // 分享標題
            desc: wxData.info, //分享描述
            link: wxData.shareurl, // 分享鏈接
            imgUrl: wxData.img, // 分享圖標
            success: function(res) {
              // 用戶確認分享后執行的回調函數
              var param = {
                param: {
                  param1: Param1,
                  param2: Param2
                }
              }
              _this.axios.get('****', {//分享回調鏈接，用於自行記錄判斷之類
                params: param
              }).then(function(res) {
                if (res.status == 200 && res.data.result == 0) {
                  console.log('分享成功');
                }
              }).catch(function(err) {
                console.log(err);
              })
              console.log("分享朋友圈成功返回的信息為:", res);
            },
            cancel: function(res) {
              // 用戶取消分享后執行的回調函數
              console.log("取消分享朋友圈返回的信息為:", res);
            }
          });


          //分享給朋友
          wx.onMenuShareAppMessage({
            title: wxData.title, // 分享標題
            desc: wxData.info, //分享描述
            link: wxData.shareurl, // 分享鏈接
            imgUrl: wxData.img, // 分享圖標

            success: function(res) {
              // 用戶確認分享后執行的回調函數
              var param = {
                param: {
                  param1: Param1,
                  param2: Param2
                }
              }
              _this.axios.get('****', {//分享回調鏈接，用於自行記錄判斷之類
                params: param
              }).then(function(res) {
                if (res.status == 200 && res.data.result == 0) {
                  console.log('分享成功');
                }
              }).catch(function(err) {
                console.log(err);
              })
              console.log("分享朋友圈成功返回的信息為:", res);
            },
            cancel: function(res) {
              // 用戶取消分享后執行的回調函數
              console.log("取消分享給朋友返回的信息為:", res);
            }
          });
        });
      }
    })
  },        
}

3. vue中

activated(){
     this.getShare();//放在這里獲取是因為我用了keep-alive（在組件切換過程中將狀態保留在內存中，防止重復渲染DOM），而此方法需要“每次進入組件都調用，從而初始化微信分享配置等”——關鍵，否則分享會出問題。
 },
 methods(){
　　getShare(){
        let _this = this,
            shareData = {
     　　　　    wxData: wxShareInfo,//分享配置信息
     　　　　    param1: _this.param1,
    　　 　　    param2: _this.param2,
    　　 　　    ifshare: _this.ifshare,
     　　　　    that: _this
 　　　　    };
　　　　_this.WXConfig.wxShowMenu(shareData);
　　}
}