一、微信分享是什么
微信分享,指网页在微信中分享时调用微信JS-SDK提供的接口,将网页分享至微信好友或微信朋友圈,以实现让更多的人看到该网页内容的目的。
二、Vue微信分享实现原理
在Vue中实现微信分享的基本思路是先获取页面的分享所需参数,再使用微信JS-SDK提供的接口进行分享。分享所需的参数包括:URL、nonceStr、timestamp、signature,其中signature的生成需要后端进行处理。
三、微信JS-SDK基本使用步骤
1、创建公众号,在微信公众平台进行设置,填写JS接口安全域名,将URL配置进去。
2、配置JS-SDK,在微信官方文档中申请appid和appsecret,并在自己的项目中调用wx.config()方法进行配置。
3、通过wx.checkJsApi()方法判断当前客户端版本是否支持分享功能。
4、通过wx.ready()方法进行分享处理,分享处理中需要调用wx.onMenuShareAppMessage()和wx.onMenuShareTimeline()方法对分享内容进行设置。
四、Vue中实现微信分享
实现微信分享的基本流程如下:
1、调用后端接口获取签名signature(包含nonceStr和timestamp),并将其保存到Vue实例中。
2、使用Vue生命周期钩子函数created()获取当前页面的URL,并通过Vue实例的$set方法将其保存到Vue实例中。
3、在Vue实例中使用wx.config()方法进行JS-SDK的配置。
4、在Vue实例中使用wx.checkJsApi()方法判断当前客户端版本是否支持分享功能。
5、在Vue实例中使用wx.ready()方法进行分享处理,改方法与普通的JS应用程序中相同。
//调用后端接口获取签名signature
this.$axios.post('/getSignature', {
url: window.location.href.split('#')[0] //获取当前页面的URL
}).then(res => {
if (res.status === 200) {
const data = res.data
//将获取到的签名保存至Vue实例中
this.signature = {
nonceStr: data.noncestr,
signature: data.signature,
timestamp: data.timestamp
}
}
})
created() {
//获取当前页面的URL
const index = window.location.href.indexOf('#')
const url = window.location.href.substring(0, index)
//保存至Vue实例中
this.$set(this, 'url', url)
//配置JS-SDK
wx.config({
debug: false,
appId: 'yourAppid',
timestamp: this.signature.timestamp,
nonceStr: this.signature.nonceStr,
signature: this.signature.signature,
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
})
//判断当前客户端版本是否支持分享功能
wx.checkJsApi({
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'],
success: (res) => {
console.log(res)
}
})
},
mounted(){
//分享处理
wx.ready(() => {
wx.onMenuShareAppMessage({
title: '分享标题',
desc: '分享描述',
link: this.url,
imgUrl: '分享的图片地址',
type: 'link',
dataUrl: '',
success: function () { },
cancel: function () { }
})
wx.onMenuShareTimeline({
title: '分享标题',
desc: '分享描述',
link: this.url,
imgUrl: '分享的图片地址',
success: function () { },
cancel: function () { }
})
})
}
五、注意事项
1、JS-SDK中默认开启调试模式,在终端会有相应的输出,正式环境要关闭调试模式。
2、在浏览器端调式微信分享,需要使用微信开发者工具。
3、微信分享的缩略图必须是网页中的图片链接,如果使用的是base64编码图片,则会导致分享失败。
六、总结
Vue微信分享的实现需要后端和前端共同配合完成,步骤繁琐但是实现起来并不难。当然,在实际项目中,还需要考虑安全性、稳定性等问题。