第一次作vue微信分享

1、安裝

cnpm install weixin-js-sdk --save-dev
複製代碼

2、引入JS文件

在index.html頁面引入微信開發須要的js文件：

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
複製代碼

3、建立wx.jsapi.js文件，main.js 引入

個人wx.jsapi.js文件是在src下的api目錄下的，而後在main.js中引入下面的代碼：

import WXConfig from './api/wx.jsapi' // 微信分享
Vue.prototype.WXConfig = WXConfig;
複製代碼

4、遇到的坑：

一、eslint編譯報錯，wx undefined

在js代碼裏直接用wx來寫代碼，會報undefined錯誤，eslint編譯通不過。咱們直接將wx改成window.wx，奇蹟ok了。趕忙上網找有沒有一塊兒碰見這問題的小夥伴： vue 微信分享設置踩坑

安心了，找到共鳴的趕腳！😏

在js代碼裏直接用wx來寫代碼，會報undefined錯誤，eslint編譯通不過。 這個的解決方法有兩種， 一種是禁止eslint檢測  在js最前面加一段註釋。 /* eslint-disable */ 另外一種是，用window.wx 代替wx使用

二、link要爲安全域名的url

分享的地址須要設置爲白名單，也就是當前分享的url要是安全域名下的；

三、分享圖標路徑imgUrl

分享圖標路徑imgUrl，須要設置爲服務器上的地址，目前作法是將share圖片，放在dist的根目錄下。

最開始放在項目下，發現這塊打包後，路徑不對了，而後想到放在打包後的文件中，直接放在服務器上，同事建議我放static中，可是發現不行，由於npm run build，會從新生成這個文件，圖片依舊會消失，因此放在根目錄下。

四、要求分享的時候，不管在哪一個頁面分享，均分享首頁

因此對分享的link作了處理，默認只分享首頁：

function getUrl(url) {
    var arrUrl = url.split('/');
    var newUrl = [];
    for (var i = 0; i < arrUrl.length - 1; i++) {
        newUrl.push(arrUrl[i]);
    }
    return newUrl.join('/') + '/';
}
複製代碼

五、在獲取開發的url時，作了encodeURIComponent處理

這塊須要和開發協商，是否須要作處理；

請注意 encodeURIComponent() 函數 與 encodeURI()函數的區別之處，前者假定它的參數是 URI的一部分（好比協議、主機名、路徑或查詢字符串）。所以 encodeURIComponent() 函數將轉義用於分隔 URI 各個部分的標點符號。

5、wx.jsapi.js中，附上代碼

mport axios from 'axios'

export default {
  wxShowMenu: function() {
    const url = 'XXX.json?url=' + encodeURIComponent(window.location.href.split('#')[0]);
    function getUrl(url) {
      var arrUrl = url.split('/');
      var newUrl = [];
      for (var i = 0; i < arrUrl.length - 1; i++) {
        newUrl.push(arrUrl[i]);
      }
      return newUrl.join('/') + '/';
    }
    axios.post(url).then(function(res) {
      var getMsg = res.data;
      window.wx.config({
        debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
        appId: getMsg.appid, // 必填，公衆號的惟一標識
        timestamp: getMsg.timestamp, // 必填，生成簽名的時間戳
        nonceStr: getMsg.noncestr, // 必填，生成簽名的隨機串
        signature: getMsg.signature, // 必填，簽名，見附錄1
        jsApiList: [ // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
          'onMenuShareTimeline', // 分享給好友
          'onMenuShareAppMessage', // 分享到朋友圈
          'onMenuShareQQ',
          'onMenuShareQZone',
          'onMenuShareWeibo'
        ]
      });
      window.wx.ready(function() {
        var shareConfig = {
          title: 'title', // 分享標題
          desc: 'desc', // 分享描述
          link: getUrl(window.location.href.split('#')[0]), // 分享連接，該連接域名需在JS安全域名中進行登記
          imgUrl: getUrl(window.location.href.split('#')[0]) + 'share.jpg', // 分享圖標
          type: 'link', // 分享類型,music、video或link，不填默認爲link
          dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
          success: function() {
            // 用戶確認分享後執行的回調函數
          },
          cancel: function() {
            // 用戶取消分享後執行的回調函數
          }
        };
        console.info('微信分享參數：' + JSON.stringify(shareConfig));
        window.wx.onMenuShareTimeline(shareConfig);
        window.wx.onMenuShareAppMessage(shareConfig);
        window.wx.onMenuShareQQ(shareConfig);
        window.wx.onMenuShareQZone(shareConfig);
        window.wx.onMenuShareWeibo(shareConfig);
      });
      window.wx.error(function(res) {
        console.log(res);
      });
    })
  }
}
複製代碼

寫在最後：感謝對我幫助過的小夥伴，以及不埋怨個人low的同事們，謝謝大家！文中若有錯誤，請大牛們幫忙指正，感謝！

ps：一個在前端路上努力的90後阿姨，微笑的人運氣不會太差，前進的腳步能夠放大。😁😁😁