vue h5移动端签名错误 ios端签名错误分享刷新后分享链接到首页面等微信分享的坑微信支付ios url支付失败无法调起当前页面未注册

最新推荐文章于 2022-03-18 18:18:16 发布

给我盘他

最新推荐文章于 2022-03-18 18:18:16 发布

阅读量1.7k

点赞数 1

分类专栏： H5移动端文章标签：微信sdk ios h5 移动端 vue

本文链接：https://blog.csdn.net/baidu_39040364/article/details/90298468

版权

H5移动端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近做vue 移动端分享引入sdk做分享支付的功能本来都好好的一路顺风但是后面发现ios端签名无效

坑1： ios签名无效解决办法

查了好多最后发现《ios是要用每回进入项目的第一个页面的路径去注入微信sdk》

《App.vue》
	    methods: {
			wxsdk() {
				let dataarr = {};
				dataarr.url = window.location.href;
				lypi.exams.yinrusdk(dataarr, (state, res) => {     //这个是后太去换取签名等信息的接口
					let sdk = res.data.data;
					wx.config({
						debug: false, // 是否开启调试模式
						appId: '', //appid
						timestamp: sdk.timestamp, // 时间戳
						nonceStr: sdk.nonceStr, // 随机字符串
						signature: sdk.signature, // 签名
						jsApiList: [
							'onMenuShareTimeline',
							'onMenuShareAppMessage',
							'onMenuShareQQ',
							'onMenuShareWeibo',
							'onMenuShareQZone'
						], // 需要使用的JS接口列表
					})
				})
			}
		}，
		watch: {
			'$route': 'wxsdk'    //路由监听发生变化的时候去调用  wxsdk()  
		}

这样的话注入签名就没有问题了 <<这个方法不是最好的解决办法如有更好的解决办法欢迎留言哦>>

你以为就这样就结束了 on

坑2：页面进行刷新后分享出去的链接《跳到了首页》

原因：是因为我们使用vue的路由 vue-router 中 history 模式下的问题 ios的url解析机制不同造成的

解决办法：使用重定向！（网上最普遍的方法本来想找出问题的但时间有限先这样解决了）

在static>html 路径下创建redirect.html html页面

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		let url = location.href.split('?')
		let pars = url[1].split('&')
		let data = {}
		pars.forEach((n, i) => {
			let p = n.split('=')
			data[p[0]] = p[1]
		})
		if (!!data.app3Redirect) {
			self.location = decodeURIComponent(data.app3Redirect)
		}
	</script>
</html>

创建好重定向的页面后开始使用>

      const protocol = window.location.protocol;
      const host = window.location.host;
      const hosturl = `${protocol}\/\/${host}/`;  //获取当前页面前面域名部分  （拼接重定向页面的路径）
      var shareWxLink = hosturl +  "static/html/redirect.html?app3Redirect=" + encodeURIComponent(window.location.href);
      var data = {
        title: "惠多旅游", // 分享标题
        desc: this.scenery.title, // 分享描述
        link: shareWxLink, // 分享链接  
        imgUrl: this.scenery.sceneryImgs[0], // 分享图标
        success: function() {
          console.log("分享成功");
        },
        cancel: function() {
          console.log("分享失败");
        }
      };

在这里插入图片描述

坑3：发起微信支付的时候安卓一切正常但是ios报错当前页面未注册

原因：如果你刷新页面后就会发起支付了这是因为ios注册签名是用的第一次进入项目的url路径所以你如果是从别的页面跳转进来的就会报你第一个进入的页面没有注册支付功能没有设置成支付页面在这里插入图片描述

想了好长时间最后决定的解决办法是在进入支付页面的时候使用路由守卫拦截然后使用 location.href 进行跳转

beforeRouteEnter(to, from, next) {
			if (from.name == 'suborder') {   //拦截是否是从你上个页面指定页面跳转过来的
				const protocol = window.location.protocol;
				const host = window.location.host;
				const hosturl = `${protocol}\/\/${host}`;     //获取到的当前域名部分
				window.location.href = hosturl + to.fullPath;   //进行跳转拼接   《to.fullPath》 是你从上个页面传的值
			} else {
				next();   //放行
		   }
},

微信提示 beforeRouteEnter做路由守卫的话得放到你的第一个页面要不会失效！！

现在微信ios 上的这些坑就解决了但这都不是最好的解决办法如果有更好的解决办法我会给大家更新如果有大神有更高好的解决办法，欢迎留言学习哦！