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

最近做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解析机制不同造成的

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

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

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

      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 上的这些坑就解决了 但这都不是最好的解决办法 如果有更好的解决办法我会给大家更新 如果有大神有更高好的解决办法 ，欢迎留言学习哦！