vue2.0 Hash模式下實現微信分享

1，通過后台，獲取accessToken 和 簽名jsApiTicket，並寫入瀏覽器緩存（可以寫在app.vue中）

<script type="text/ecmascript-6">
import Store from 'common/js/store.js';
const CODE_SUC = 1;
const CODE_ERR = 0;
export default {
  name: 'app',
  data () {
    return {
      wxToken: {
        accessToken: ""
      },
      wxJsApiTicket: {
        jsApiTicket: ""
      }
    };
  },
  created () {
    setInterval(this.getAccessToken(), 7000);
    // 接口入住權限驗證配置
  },
  components: {
    vFooter
  },
  methods: {
　　// 獲取accessToken 和 簽名jsApiTicket，並寫入瀏覽器緩存
    getAccessToken () {
      this.axios.post("/api/user/getAccessToken", {
        "token": null,
        "uid": 0,
        "devType": "wx"
      }).then((res) => {
        res = res.data;
        if (res.code === CODE_SUC) {
          // console.log(res.accessToken);
          this.wxToken.accessToken = res.accessToken;
          this.wxJsApiTicket.jsApiTicket = res.jsApiTicket;
          Store.saveAccessToken(this.wxToken);
          Store.saveJsApiTicket(this.wxJsApiTicket);
          // console.log(res.accessToken);
        } else if (res.code === CODE_ERR) {
          console.log("獲取accessToken失敗");
        }
      }).catch((res) => {
        window.alert('網絡異常,登錄請求失敗');
      });
    }
  }
};
</script>

 

2，上面的store.js（寫入瀏覽器緩存的文件）如下

const STORAGE_KEY1 = 'memberInfo';
const STORAGE_KEY2 = 'token';
const STORAGE_KEY3 = 'accessToken';
const STORAGE_KEY4 = 'jsApiTicket';

export default {
  fetchFromLocal () {
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY1) || "{}");
  },

  saveToLocal (obj) {
    window.localStorage.setItem(STORAGE_KEY1, JSON.stringify(obj));
  },

  saveAccessToken (obj) {
    window.localStorage.setItem(STORAGE_KEY3, JSON.stringify(obj));
  },

  saveJsApiTicket (obj) {
    window.localStorage.setItem(STORAGE_KEY4, JSON.stringify(obj));
  }
};

　　

3，mian.js中，注冊分享全局函數，並暴露出接口

import wx from 'weixin-js-sdk';   // 導入微信sdk
import Store from 'common/js/store.js';   // 導入store.js

// 全局注冊分享函數
Vue.prototype.wxShare = function (title, desc, link, imgUrl) {
  // 獲取簽名
  this.axios.post("/api/user/getSignature", {
    "token": null,
    "uid": 0,
    "devType": "wx",
    "ticket": Store.fetchjsApiTicket().jsApiTicket,  // 獲取瀏覽器緩存的簽名
    "url": encodeURIComponent(window.location.href.split('#')[0]) // 此處進行一次編碼
  }).then((res) => {
    res = res.data;
    if (res.code === CODE_SUC) {
      wx.config({
        debug: false,
        appId: '', // 填寫自己的appID
        timestamp: res.timestamp,
        nonceStr: res.noncestr,
        signature: res.signature,
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
      });
    } else if (res.code === CODE_ERR) {
      console.log("獲取accessToken失敗");
    }
  }).catch((res) => {
    window.alert('網絡異常,登錄請求失敗');
  });
  wx.ready(function () {
    // 分享給朋友
    wx.onMenuShareAppMessage({
      title: title, // 分享標題
      desc: desc, // 分享描述
      link: link, // 分享鏈接
      imgUrl: imgUrl, // 分享圖標
      type: '', // 分享類型,music、video或link，不填默認為link
      dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
      success: function () {
        window.alert('已分享給朋友');
        this.axios.post("/api/product/shareStatistics", {
          "token": null,
          "uid": 0,
          "devType": "wx"
        }).then((res) => {
          res = res.data;
          if (res.code === CODE_SUC) {
            window.alert("分享返回數據成功");
          } else if (res.code === CODE_ERR) {
            console.log("獲取失敗");
          }
        }).catch((res) => {
          window.alert('網絡異常,登錄請求失敗');
        });
      },
      cancel: function () {
          // 用戶取消分享后執行的回調函數
      },
      fail: function (res) {
          window.alert(JSON.stringify(res));
      }
    });

    // 分享到朋友圈
    wx.onMenuShareTimeline({
        title: title, // 分享標題
        link: link,
        imgUrl: imgUrl, // 分享圖標
        success: function () {
            window.alert('已分享到朋友圈');
        },
        cancel: function () {
          // 用戶取消分享后執行的回調函數
          this.axios.post("/api/product/shareStatistics", {
            "token": null,
            "uid": 0,
            "devType": "wx"
          }).then((res) => {
            res = res.data;
            if (res.code === CODE_SUC) {
              window.aleryt("分享返回數據成功");
            } else if (res.code === CODE_ERR) {
              console.log("獲取失敗");
            }
          }).catch((res) => {
            window.alert('網絡異常,登錄請求失敗');
          });
        },
        fail: function (res) {
            window.alert(JSON.stringify(res));
        }
    });
  });
};

4，在相應的位置調用注冊好的wxShare （title, desc, link, imgUrl）函數，並傳入所需的值：

　  例：以下為分享商品詳情頁面，link 為自己拼接路徑的變量

this.wxShare('商品詳情' + ' ' + this.good.goodsInfo.goodsName, this.good.goodsInfo.goodsName, link, this.IMG_BASE_URL + this.good.goodsInfo.goodsImage);

 

5，特別注意：在Hash模式下，安卓中會遇到分享到朋友圈之后，點擊跳轉會首頁的情況，此時分享的路徑與商品的真實路徑是不一致的。需要在服務器端稍微處理一下。即把index文件，重新建一個文件夾，例如static，放進去。此時分享之后的路徑，與真實路徑才是一致的，也不會發生跳回首頁的情況。蘋果手機則不會有這個問題。