Pc端链接转发至微信、朋友圈、QQ空间、微博等 具体实现如下 亲自实验过有用 可以看微信开放文档也有相关操作步骤
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10
- 第一步先映入一个线上的微信的 JS-SDK vue项目在index.html 中直接如下即可
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 需要后台给我们提供一个接口如下
第一个我们要先拿到当前页面的路由URL (正式和测试环境均可)
let url = `http://med.drvoice.cn${this.$route.path}`
然后我通过这个url去调取后台的接口getwxSign
getwxSign(url).then((res) => {
let data = res.data
console.log(data, 'res')
wx.config({
debug: false,//调试的时候改为true即可(在转发的时候 即可触发 回打印到手机屏幕上 )
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'],
//jsApiList这个集合则是不同渠道转发的一个方法集合
})
})
这个地方则就是微信转发的方法
const _this = this; //在里面会有this指向问题
await wx.ready(function () {
wx.onMenuShareAppMessage({
title: _this.titles, //当前页面的title对应生成卡片之后的title (通过后台接口给到你)
desc: '会议日程',// 转发的小字
link: `http://med.drvoice.cn${_this.$route.path}`, //当前页面的路由URL 同调后台的那个URL一直即可
imgUrl: _this.weixinimg, //微信转发卡片上面的一个图片(通过后台接口给到你)
success: function () {},
cancel: function () {},
})
})
可以加多个方法同微信转发的方法写法一直即可 换个名字就ok了比如分享微信朋友圈
await wx.ready(function () {
wx.onMenuShareTimeline({
title: _this.titles,
link: `http://med.drvoice.cn${_this.$route.path}`,
imgUrl: _this.weixinimg,
success: function () {
console.log(titles,"this.titles");
},
cancel: function () {},
})
})