最重要的是!!!!
【1.微信公众号设置js安全域名:前端必须部署在js安全域名下才能测试】和
【2.ip白名单:后端部署在ip白名单下的域名下才能测试】
1.下载依赖
npm install weixin-js-sdk --save-dev
2.在src目录下,新建一个common
文件夹,在文件夹下新建一个wxapi.js
文件【调试时:debug设置为true】
【前端向后台请求获取签名和时间戳和随机串】
/**
* 微信js-sdk
* 参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
*/
import wx from 'weixin-js-sdk'
import Axios from 'axios'
const wxApi = {
/**
* [wxRegister 微信Api初始化]
* @param {Function} callback [ready回调函数]
*/
wxRegister(callback) {
// 这边的接口请换成你们自己的
Axios.post('/CallMethod', {
functionName: "newWeiXinShareService",
methodName: "weiXinShare",
data: {
url: window.location.href
}
}).then((res) => {
console.log('weixinshare',res);
let data = res.data.data // PS: 这里根据你接口的返回值来使用
wx.config({
debug: true, // 开启调试模式
appId: "wx130b58be46a7d4f0", // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
jsApiList: [
// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
'onMenuShareTimeline',
'onMenuShareAppMessage',
// 微信新版1.4.0暂不支持安卓,故这里要两个接口一起调用下
'updateAppMessageShareData',
'updateTimelineShareData'
]
})
}).catch((error) => {
console.log(error)
// alert(error)
})
wx.ready((res) => {
// 如果需要定制ready回调方法
if (callback) {
callback()
}
})
},
/**
* [ShareTimeline 微信分享到朋友圈]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回调]
* @param {[type]} error [失败回调]
*/
ShareTimeline(option) {
wx.onMenuShareTimeline({
title: option.title, // 分享标题
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
option.success()
},
cancel() {
// 用户取消分享后执行的回调函数
option.error()
}
});
wx.updateTimelineShareData({
title: option.title, // 分享标题
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
option.success()
},
cancel() {
// 用户取消分享后执行的回调函数
option.error()
}
});
},
/**
* [ShareAppMessage 微信分享给朋友]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回调]
* @param {[type]} error [失败回调]
*/
ShareAppMessage(option) {
wx.onMenuShareAppMessage({
title: option.title, // 分享标题
desc: option.desc, // 分享描述
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
option.success()
},
cancel() {
// 用户取消分享后执行的回调函数
option.error()
}
});
wx.updateAppMessageShareData({
title: option.title, // 分享标题
desc: option.desc, // 分享描述
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
option.success()
},
cancel() {
// 用户取消分享后执行的回调函数
option.error()
}
});
}
}
export default wxApi
3.在Vue页面使用,比如首页,先引入刚刚的js文件:
import wxapi from '@/common/wxapi.js'
methods{
wxRegCallback () {
// 用于微信JS-SDK回调
this.wxShareTimeline();
this.wxShareAppMessage();
},
wxShareTimeline () {
// 微信自定义分享到朋友圈
let option = {
title: this.shareArticleTitle, // 分享标题, 请自行替换
link: window.location.href, // 分享链接,根据自身项目决定是否需要split
imgUrl: this.headPortrait, // 分享图标, 请自行替换,需要绝对路径
success: () => {
console.log('分享成功')
},
error: () => {
console.log('已取消分享')
}
}
// 将配置注入通用方法
wxapi.ShareTimeline(option)
},
wxShareAppMessage () {
// 微信自定义分享给朋友
let option = {
title: this.shareArticleTitle, // 分享标题, 请自行替换
desc: this.shareAbs, // 分享描述, 请自行替换
link: window.location.href, // 分享链接,根据自身项目决定是否需要split
imgUrl: this.headPortrait, // 分享图标, 请自行替换,需要绝对路径
success: () => {
console.log('分享成功')
},
error: () => {
console.log('已取消分享')
}
}
// 将配置注入通用方法
wxapi.ShareAppMessage(option)
},
}
mounted(){
wxapi.wxRegister(this.wxRegCallback)
}
后端设置:https://blog.csdn.net/shrmuscles/article/details/77987185