(Vue)H5项目实现微信分享好友和朋友圈功能
先上需要的效果图哈如图所示,再vue项目中,分享携带头部标题、简介和缩略图等信息,下面进入正题:安装&引入// 再index.html中放入<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>或者使用官方插件npm i weixin-js-sdk使用(再需要引用的页面)// n
·
先上需要的效果图哈
如图所示,再vue项目中,分享携带头部标题、简介和缩略图等信息,下面进入正题:
安装&引入
// 再index.html中放入
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
或者使用官方插件
npm i weixin-js-sdk
使用(再需要引用的页面)
// npm安装的需要引入
let wx = require('weixin-js-sdk');
// 再mounted中调用该方法
getShareInfo() {
// 调用后端接口 请求appId、签名等信息
axios.get('https://test.site/api/v1/shop/js-sdk', {
params:{ url: this.url }
}
).then(res => {
const { appId, nonceStr, rawString, signature, timestamp} = res.data.data
// 微信分享授权
wx.config({
debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出
appId, // 必填,公众号的唯一标识,填自己的!
timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
nonceStr, // 必填,生成签名的随机串
rawString,
signature, // 必填,签名,见附录1
jsApiList: [ // 需要使用的JS接口列表
'onMenuShareTimeline',
'onMenuShareAppMessage',
'updateTimelineShareData',
'updateAppMessageShareData'
]
})
})
wx.ready(function () {
// 分享到朋友圈
wx.onMenuShareTimeline({
title: '分享标题666', // 分享标题
link: 'https://test-2021.com/', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'https://test.png', // 分享图标
success: function () {
// 设置成功
console.log("分享成功");
}
})
//分享给朋友
wx.onMenuShareAppMessage({
title: '分享标题666',
desc: '分享简介999',
link: 'https://test-2021.com/',
imgUrl: 'https://test.png',
success: function () {
console.log("分享成功");
},
cancel: function () {
console.log("取消分享");
}
});
})
}
其他详细信息可以查看微信开放文档
更多推荐
已为社区贡献6条内容
所有评论(0)