Vue项目配置微信分享
一、引入微信js
// index.html<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
二、封装wxshare.js
// assets => js => 新建 wxshare.jsexport function wxShare ({title, desc, link, imgUrl,success}={}) {
let wxShare = {
title: title || '默认标题', // 分享标题
desc: desc || '默认分享文案', // 分享描述
link: link || window.location.href, // 分享链接
imgUrl: imgUrl || 'https://cn.vuejs.org/images/logo.png', // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
success && success()
}
}
wx.ready(() => { //需在用户可能点击分享按钮前就先调用
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
// wx.updateAppMessageShareData(wxShare)
// 自定义“分享到朋友圈”及“分享到qq空间”
// wx.updateTimelineShareData(wxShare)
// 以上新分享方法的成功回调不是转发成功回调，而是自定义内容成功回调
//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareAppMessage(wxShare);
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareTimeline(wxShare);
})
wx.error(res => {
// config信息验证失败会执行error函数
console.log(res)
})
}
三、配置微信wx.config
// app.vuecreated(){
this.wxShareConfig();
},
methods: {
//配置微信转发
wxShareConfig(){
// 方便从接口中获取配置参数
let appId = "wx7f963082054fe371";
let nonceStr = "JrLvVC3ygqSlcBnc";
let signature = "66c459474ebbea661b38be92149c5f60d91d05ed";
let timestamp = "1592445883";
// 配置信息
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature,// 必填，签名
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
})
}
}
四、使用
使用一：配置统一的分享内容
// main.jsimport {wxShare} from './assets/js/wxshare';
// 为Vue的原型对象添加该方法，则所有vue实例都能继承该方法
Vue.prototype.$wxShare = wxShare
// App.vue// 配置全局的分享
created(){
this.wxShareConfig();
},
methods: {
//配置微信转发
wxShareConfig(){
// 方便从接口中获取配置参数
let appId = "wx7f963082054fe371";
let nonceStr = "JrLvVC3ygqSlcBnc";
let signature = "66c459474ebbea661b38be92149c5f60d91d05ed";
let timestamp = "1592445883";
// 配置信息
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature,// 必填，签名
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
})
this.$wxShare();
}
}
使用二： 每个模块都有固定的配置内容（在路由中配置固定的分享内容）
// App.vue// 配置全局的分享
created(){
this.wxShareConfig();
},
methods: {
//配置微信转发
wxShareConfig(){
// 方便从接口中获取配置参数
let appId = "wx7f963082054fe371";
let nonceStr = "JrLvVC3ygqSlcBnc";
let signature = "66c459474ebbea661b38be92149c5f60d91d05ed";
let timestamp = "1592445883";
// 配置信息
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature,// 必填，签名
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
})
}
}
// router/index.jsimport {wxShare} from '@/assets/wxshare';
// 商品详情
{
path: '/productDetail',
name: 'productDetail',
component: ProductDetail,
meta: {
title: '商品详情',
link: 'http://www.baidu.com',
desc: '啊哈哈哈哈哈哈'
}
},
router.afterEach(route => {
wxShare({ title: route.meta.title, desc: route.meta.desc, link: route.meta.link, imgUrl: route.meta.imgUrl})
})
使用三：页面中单独修改分享内容 （如异步数据修改分享内容）
// 特定配置的页面
// 在vue实例的created钩子中
created(){ this.$wxShare({
title: '低头是泥污，抬头是彩虹',
desc: '与你一同前行',
success: () => {
console.log('转发页面成功');
//进行其他操作
}
})
},
// 或者 异步加载数据
created(){
axios.post('http://test.jjo.cn/api',params).then(res => {
this.$wxShare({
title: res.title,
desc: res.desc,
...
})
})
},
【实现】实现某一个页面配置单独的分享内容，其他页面内容一致
// wxshare.jsexport function wxShare ({title, desc, link, imgUrl,success} = {}) {
let wxShare = {
title: title || '默认标题', // 分享标题
desc: desc || '默认分享文案', // 分享描述
link: link || window.location.href, // 分享链接
imgUrl: imgUrl || 'https://cn.vuejs.org/images/logo.png', // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
success && success()
}
}
wx.ready(() => { //需在用户可能点击分享按钮前就先调用
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
// wx.updateAppMessageShareData(wxShare)
// 自定义“分享到朋友圈”及“分享到qq空间”
// wx.updateTimelineShareData(wxShare)
// 以上新分享方法的成功回调不是转发成功回调，而是自定义内容成功回调
//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareAppMessage(wxShare);
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareTimeline(wxShare);
})
wx.error(res => {
// config信息验证失败会执行error函数
console.log(res)
})
}
// App.vue// 配置全局的分享
created(){
this.wxShareConfig();
},
methods: {
//配置微信转发
wxShareConfig(){
// 方便从接口中获取配置参数
let appId = "wx7f963082054fe371";
let nonceStr = "JrLvVC3ygqSlcBnc";
let signature = "66c459474ebbea661b38be92149c5f60d91d05ed";
let timestamp = "1592445883";
// 配置信息
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature,// 必填，签名
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
})
this.$wxShare();
}
}
详情页单独配置
// detail.vuecreated() {
getProductDetail({ commodity_id: this.$route.query.commodity_id }).then(
res => {
if (res.data.code == 200) {
this.productDetail = res.data.data;
this.seletdStock = res.data.data.total_stock;
this.scrollImgList = res.data.data.scroll_image;
this.$wxShare({
title: this.productDetail.name,
desc: "仅售" + this.productDetail.sale_price + "元，立即抢购！",
link: '',
imgUrl: this.scrollImgList[0]
});
}
}
);
},
运行效果：
首页分享
详情页分享
【注意】需要注意的是从详情页返回至首页再次分享，配置的分享标题、图片、链接仍然为详情页的内容
【处理】 在详情页销毁之前将配置的内容重置
beforeDestroy() { this.$wxShare();
},
以上是 Vue项目配置微信分享 的全部内容， 来源链接： utcz.com/z/379803.html
