Vue项目配置微信分享
一、引入微信js
// index.html <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
二、封装wxshare.js
// assets => js => 新建 wxshare.js export 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.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接口列表 }) } }
四、使用
使用一：配置统一的分享内容
// main.js import {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.js import {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.js export 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.vue created() { 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();
},
