前言众所周知，在使用vue做项目的时候，微信自定义分享一直是个坑，但是在ios上坑比较明显。然后每次遇到问题，我都要和妈妈一起度过很长一段时间。奇怪的是，好像很多人都遇到过同样的问题，但是他们写的解决方案都不能直接解决我遇到的问题。这里记录一下遇到的一些坑和解决方法。目前项目中，在Android和ios上自定义分享都没有问题。问题及解决方案Hash方式在微信官方文档中提到，在jsapi_ticket的签名算法中，在生成签名时，当前网页的URL不包含#和后面的部分；而自定义分享链接，微信也会主动在链接后面拼接一些参数，比如from；这样也会造成一些问题，比如要么签名不对，要么出去的链接被解析了，第二次分享返回有问题。所以我这里的解决方案是不直接使用哈希模式。问题多，链接也不好看。使用方式：直接'history'。网上也有很多切换页面签名失效的解决方案。由于我这里的项目不需要详细到每个页面都要自定义才能分享，只需要在触发某些条件时触发即可，所以这样就搞定了。在main.js文件中编写自定义分享的功能逻辑；//微信自定义分享Vue.prototype.wxShare=asyncfunction({title,desc,link=window.location.href,imgUrl,success}){letthat=this;//当前页面地址leturl=window.location.href;//调用后端服务获取微信签名内容let{data:wxCfg}=awaitthat.ajax({api:that.api.wechatGetWxSdk,data:{url:url}})if(!wx||!wxCfg)返回;wx.config({debug:false,appId:wxCfg.appId,timestamp:wxCfg.timestamp,nonceStr:wxCfg.nonceStr,signature:wxCfg.signature,jsApiList:['updateAppMessageShareData','updateTimelineShareData','onMenuShareTimeline','onMenuShareAppMessage']});wx.ready(function(){wx.updateAppMessageShareData({title:title,desc:desc,link:link,imgUrl:imgUrl,success:function(){success?success():''}})wx.updateTimelineShareData({title:标题,link:链接,imgUrl:imgUrl,成功：函数（）{成功？成功（）：''}}）wx.onMenuShareTimeline（{标题：标题，链接：链接，imgUrl：imgUrl，成功：函数（）{成功？成功（）：''}}）wx.onMenuShareAppMessage（{标题：title,desc:desc,link:link,imgUrl:imgUrl,success:function(){success?success():''}})})wx.error(function(res){that.$toast('请刷新当前页面重试')});}当需要调用自定义分享时，调用awaitthis.wxShare({title:'分享标题',desc:'分享摘要',link:'分享链接地址',imgUrl:'Sharedcoverimage',success:function(){//调用成功回调}})IOS路由跳转后，上面问题解决后签名仍然失败，项目已经上线，很多ios用户反映部分页面仍无法成功调用自定义分享。之前的解决方案很暴力。。。用户，让用户刷新当前页面，不可能的，就好了！后来反馈越来越多。。没办法，只好想办法解决了。。。开始找原因，发现android没问题，ios上不行无论路由跳转多少次，复制的链接都会失效。是第一次进入的页面链接，所以修改上面的调用函数。先记录urlVue.prototype.firstUrl=window.location.href;复制代码，在wxShare函数中加入判断。大致意思就是判断当前设备是不是ios，如果是就用firstUrl作为签名使用的url，如果不是就用window.location.href上线，发现没有问题了。结语本文提供作者：杜小感原帖地址：https://juejin.cn/post/684490...如果您觉得文章写得不错，请点击↑链接关注作者，并给文章打赏点个赞~更多好文章，前端学习资料（Vue,React,Js），请关注公众号【推推鱼】，加入IT人社群，拓展人脉，与大佬面对面交流~还有大厂面试经验和转介职位同步获取一手资料~
