在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

}

}

}

};

然后再文件中引入既可：