在vue中使用weixin-js-sdk自定義微信分享效果

 

 

 

 

在作微信分享的時候，產品要求分享效果要有文字和圖片，使用weixin-js-sdk解決了，

原始的分享效果：

 

使用微信JS-SDK的分享效果：

首先須要引入weixin-js-sdk

npm install weixin-js-sdk --save

在main.js中引用

 

 

* 微信分享後自定義縮略圖及標題

 

import {getSignature} from '../services/wechat.js';

export default {

data: function() {

return {

wxReady: false,

apiReady: false,

wxShare: {}

};

},

created() {

const _this = this;

getSignature({url: location.href})

.then(data => {

const wx = this.$wx;

wx.config({

debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。

appId: data.appid, // 必填，公衆號的惟一標識

timestamp: data.timestamp, // 必填，生成簽名的時間戳

nonceStr: data.nonceStr, // 必填，生成簽名的隨機串

signature: data.signature, // 必填，簽名，見附錄1

jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2

});

wx.ready(function() {

_this.wxReady = true;

_this.toShare();

});

wx.error(function() {

// config信息驗證失敗會執行error函數

});

})

.catch(error => {

/* eslint-disable */

console.error('獲取微信簽名出錯', error);

});

},

methods: {

setWxShare: function(params) {

this.apiReady = true;

const config = {

link: window.location.href,

...params

};

this.wxShare = config;

this.toShare();

},

toShare: function() {

if (this.apiReady && this.wxReady) {

const wx = this.$wx;

const config = this.wxShare;

wx.onMenuShareAppMessage(config); //分享給朋友

wx.onMenuShareTimeline(config); //分享到朋友圈

wx.onMenuShareQQ(config); //分享給手機QQ

}

}

}

};

而後再文件中引入既可：