【uni-app】记vue+uniapp 项目H5微信分享失效的几个问题

去成华大道走二仙桥

已于 2022-12-07 22:33:11 修改

阅读量6.5k

点赞数 3

分类专栏： uni-app 文章标签：微信 vue.js 前端 uni-app

于 2021-11-11 20:51:39 首次发布

本文链接：https://blog.csdn.net/haidong55/article/details/121236690

版权

uni-app 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

这篇博客记录了在uniapp项目中遇到的H5端微信分享问题及其解决方案。问题1是iOS真机上微信分享失败，原因是vue在iOS微信浏览器中跳转路由会重定向，解决方案是在watch中监听路由变化并修正。问题2是分享链接参数不一致导致的分享失败，解决方法是确保请求微信签名时的链接与分享时的链接一致。

摘要由CSDN通过智能技术生成

最近在做uniapp项目H5端微信分享的时候遇到了几个疑难杂症，在网上找问题都没看到有响应的问题，特此记录一下，比较常见的问题可参考微信开发文档

问题1：wx.config注册成功，wx.ready执行成功，在开发者工具上面控制台也能看到打印好的日志，结果在ios真机上面微信分享失败。

原因之一：vue在ios微信浏览器中跳转路由会重定向！也就是说在真机中去获取签名的url是跳转之前的路径，比如从主页/home跳转到商品详情/productDetails, 在商品详情页我们一般直接用 location.href.split('#')[0]获取当前页面，在IOS微信浏览器可能会获取第一次进来的路径home！这就是为什么在本地调试没问题，真机上会有问题

解决方法：

watch: {
            
			"$route"(newVal, oldVal){
                // 针对商品详情在微信里路径重定向问题优化 前面的路径判断方法由自己定（为了防止无限刷新）
				if (!oldVal.fullPath.includes('productDetails') && newVal.fullPath.includes('productDetails') && /iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {
				    window.location.href = `${window.location.origin}/unimallf${this.$route.fullPath}`
				}
               
			},
		},

问题2：重定向问题ok，微信签名获取ok,注册接口ok，但真机分享的时候还是失败

原因：获取微信签名接口入参的url是当前页面的链接例如“www.baidu.com”，但是分享出去的链接新拼接了参数"www.baidu.com?userId=1234546"；由于做的商城项目，分享出的链接要带上登录人的userId,然后而在请求微信签名的时候URL没有携带，在微信分享wx.ready的参数link后面拼接了参数，导致分享失败！

解决方法：在请求微信签名的时候就要把完整分享的链接拼接好，与wx.ready的参数link保持一致

如果对大家有帮助的话，可以点赞收藏评论三连。更多踩坑后续待完善......