第一次做vue微信分享

安丹發表於2018-11-23
Vue

一、安裝

cnpm install weixin-js-sdk --save-dev
複製程式碼

二、引入JS檔案

在index.html頁面引入微信開發需要的js檔案：

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

第一次做vue微信分享

三、建立wx.jsapi.js檔案，main.js 引入

我的wx.jsapi.js檔案是在src下的api目錄下的，然後在main.js中引入下面的程式碼：

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

四、遇到的坑：

1、eslint編譯報錯，wx undefined

在js程式碼裡直接用wx來寫程式碼，會報undefined錯誤，eslint編譯通不過。我們直接將wx改為window.wx，奇蹟ok了。趕緊上網找有沒有一起遇見這問題的小夥伴： vue 微信分享設定踩坑

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

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

2、link要為安全域名的url

分享的地址需要設定為白名單，也就是當前分享的url要是安全域名下的；

3、分享圖示路徑imgUrl

分享圖示路徑imgUrl，需要設定為伺服器上的地址，目前做法是將share圖片，放在dist的根目錄下。

最開始放在專案下，發現這塊打包後，路徑不對了，然後想到放在打包後的檔案中，直接放在伺服器上，同事建議我放static中，但是發現不行，因為npm run build，會重新生成這個檔案，圖片依舊會消失，所以放在根目錄下。

4、要求分享的時候，無論在哪個頁面分享，均分享首頁

所以對分享的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('/') + '/';
}
複製程式碼

5、在獲取開發的url時，做了encodeURIComponent處理

這塊需要和開發協商，是否需要做處理；

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

五、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後阿姨，微笑的人運氣不會太差，前進的腳步可以放大。???

相關文章