项目需要微信自定义分享页面的标题描述和图片,记录下。
注意:需要有一个公众号,在设置公众号的安全域名,这个不进行叙述
需要引入微信的sdk.js 或者通过npm 进行安装,因使用了npm,所以仅以npm安装的状态来描述
npm install weixin-js-sdk
在需要分享的页面内进行引入 import wx from 'weixin-js-sdk'
需要后端取得appId等一次参数
methods:{
share(){
//请求url,返回appid等参数,注意url需要和当前页面的路径保持一致
//使用axios请求,例(getWx)
getWx({url:window.localhost.href})
.then(data=>{
wx.config({
debug:false,// 开启调试模式
appId: data.data.appId,// 必填,公众号的唯一标识
timestamp: data.data.timestamp,// 必填,生成签名的时间戳
nonceStr: data.data.nonceStr,// 必填,生成签名的随机串
signature:data.data.signature,
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"
});
})
.catch(err=>{
console.log(err)
})
wx.ready(function() {
let shareD={
title:'分享标题',
desc:'分享描述',
imgUrl:'缩略图',
link: window.localhost.href
};
wx.onMenuShareAppMessage(shareD);
wx.onMenuShareTimeline(shareD);
})
}
}
至此便可实现微信自定义分享,但若再次进行转发给好友或朋友圈时,会造成分享失败的问题,原因是因为
微信会在该页面添加参数 ?from=singlemessage ,和我们通过发送url去得到(wx.config)的一些参数不符合,造成分享失败经尝试发现,只需在页面进入的时候我们检测的路径是否存在?from=singlemessage来进行强制转换我们的window.localhost.href即可 。
网友评论