Vue单页面应用下IOS签名失败

最新推荐文章于 2024-04-23 18:03:55 发布

原创最新推荐文章于 2024-04-23 18:03:55 发布 · 809 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

16 篇文章

订阅专栏

博客讲述了在Vue-router使用history模式时，遇到iOS设备上微信JSSDK签名无效的问题。问题源于iOS始终使用首次进入应用时的URL作为有效签名URL。解决方案是保存首次进入的URL并在需要时使用，特别是在iOS上。文章提供了详细的代码示例，展示了如何在路由守卫和页面中适配这一行为，确保在不同平台上的正确签名。

Vue-router用的是history模式，在某个页面要应用jssdk，应用其中的录音等方法。Android下无任何问题，但是再IOS下会提示签名错误(invalid signature)。

问题根源：

在IOS上，无论路由切换到哪个页面，实际真正有效的的签名URL是【第一次进入应用时的URL】

比如我进入的首页是：http://localhost:8081/center要订单列表页面在：http://localhost:8081/orderList 那么在IOS上，无论你跳到订单列表页面中间跳多少次，真正有效的URL仍然是首页的URL。

解决方案：

既然需要的是首页的URL，那么我们就可以在路由跳转的时候保存一下进入首页的URL，然后在录音页面判断如果是IOS系统，那么就使用我们当时记录的URL，如果不是那么就正常获取当前页面的URL就可以

router.beforeEach((to, from, next) => {
    if(window.entryUrl===undefined){
       window.entryUrl=window.location.href.split('#')[0]
    }
})

在orderList页面

import wx from 'weixin-js-sdk'

getLocation () {
			let url = ''
			let u = navigator.userAgent
			let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
			if (isAndroid) {
				url = window.location.href.split('#')[0]
			} else {
				url = window.entryUrl ? window.entryUrl : window.location.href.split('#')[0]
			}
//encodeURI(url)
			publicSignInfo({ url: url }).then(res => {
				wx.config({
					debug: false,
					appId: res.data.appId,
					timestamp: res.data.timestamp,
					nonceStr: res.data.noncestr,
					signature: res.data.signature,
					jsApiList: ['getLocation', 'openLocation']
				});
				let that = this
				wx.ready(function () {
					wx.error((res) => {
						alert(`失败原因:${JSON.stringify(res)}`)
					})
					wx.getLocation({
						type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function (res) {
							that.centerLng = res.longitude
							that.centerLat = res.latitude
							that.navLng = res.longitude
							that.navLat = res.latitude
							that.initMap()
						},
						cancel: function (res) {
							this.$toast('用户拒绝授权获取地理位置')
						}
					})
				})
			})

		},

公众号调用微信导航

wx.ready(function () {
				wx.openLocation({
					type: "gcj02",
					latitude: Number(lat), // 纬度，浮点数，范围为90 ~ -90
					longitude: Number(lng),
					name: name,
					scale: 24
				});
			})