vue开发微信公众号页面,需要自定义分享连接。
安装依赖
npm i js-sha1 --save
npm i weixin-js-sdk --save
获取jsapi_ticket并签名
// 获取微信配置
export function getWxconfig(url) {
getJsapiTicket({}).then(function (res) {
if (res.code == '200') {
var jsapi_ticket = JSON.parse(res.data).jsapiTicket;
var timestamp = Date.parse(new Date()) / 1000
let sha1 = require('js-sha1');
var str2 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + api.appid + "×tamp=" + timestamp + "&url=" + url;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: api.appid, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: api.appid, // 必填,生成签名的随机串
signature: sha1(str2.toString()),// 必填,签名
jsApiList: ['chooseImage', 'uploadImage', 'previewImage', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'chooseWXPay', 'getLocation'], // 必填,需要使用的JS接口列表
});
wx.error(function (res) {
// location.reload();
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
}
})
};
分享
share() {
var that = this;
wx.ready(function () {
wx.updateAppMessageShareData({
title: '分享', // 分享标题
desc: '分享', // 分享描述
link: api.url + 'reg/reg?forwarderId=' + that.userId + '&targetId=' + that.busId + '&openMode=0', // 分享链接
imgUrl: 'https://www.wanjunshijie.com', // 分享图标
success: function () {
// 设置成功
}
})
});
},