移动端基于vue项目的微信分享解决方案

这是我基于vue的微信公众号h5项目中,关于微信分享的一个总结

微信分享是调用微信的jssdk, 使用wx提供的一系列方法, 比如分享, 图片的预览, 保存, 音频, 支付等等方法, demo地址请见 微信jssdk Demo, 这里我们只说微信分享,这里都是基于vue的history模式的项目下

关于URL

IOS微信版本中,无论你在项目的什么目录下,微信菜单复制的地址都是你第一次进入项目的url地址,因此,如果需要每个页面切换的时候有不同的分享信息内容,此时如果初始化所需要的url如果为window.location.herf的话,会出现微信签名错误 ,所以解决的方法也是和其他人提供的解决方法一样,种植一个初始化的url并反复使用

而这个方法通常会写在router的beforeeach钩子中,在window上挂载第一次进入页面的url, 也可以存在store中,但是window上更方便

注意,低版本的微信客户端在安卓手机上需要走上面的方法,说实在在微信6.2之前(不支持h5的pushstate特性),我这里是6.3.31之前的判断,所以在获取真正的url的时候我们需要添加判断

此时执行sdkUrlIosOrAndorid方法就可以拿到正确的微信分享需要的url

请求后台接口

在获取wx.config所需要的配置信息的时候,我们可以从后端直接获取所有的数据信息,也可以自己做验签

直接返回所有数据

这基本就只需要一个请求微信分享的url页面地址了,注意,这里的地址也就是sdkUrlIosOrAndorid方法返回的地址,注意,这里是做了split[0]的拆分的
返回回来的所需要的数据信息

jsapi_ticket

生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
JS接口签名校验只需要请求后端接口获取一个jsapi_ticket,并按照微信提供的解密算法,即可拿到timestamp, nonceStr, signature

wx.config

拿到wx.config配置需要的所有信息之后,我们开始执行微信config的配置

微信分享的方法的注册

配置好了之后就是微信分享的注册,这里只实现微信link的分享,监听的方法写在wx.ready中,并且wxShare方法会返回一个promise

promise返回的 onMenuShareTimeline 和 onMenuShareAppMessage 字符串可以用户分享之后提示分享的渠道是否成功

至此,一个通用的微信分享的实现机制完成了

如何使用

完整的微信分享代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复