uniapp调用wx.scanQRCode()方法,安卓手机正常,苹果手机异常的问题

场景:使用uniapp开发微信公众号网页,调用wx.scanQRCode()方法实现扫码功能,出现安卓手机正常扫码,苹果手机无法扫码,需要手动刷新页面后才可以扫码的问题。

点击菜单跳转路由的逻辑代码,最初是使用uni.navigateTo()方法跳转,所以出现了苹果手机无法扫码,需要手动刷新页面才可以扫码的问题,后来改成了window.location.href的方式跳转就解决了这个问题。

出现这个问题的原因主要是:跟你传给微信的url有关,微信会获取你的页面当前的url(即document.location.href)和你传给它的url做比较,当相同时,这个config才会成功,这个你可以通过在error函数里把信息alert出来判断出来。
所以你需要在路由切换时重新执行一次config。
而又由于在ios和android中,document.location.href在spa页面的机制不同(不同在于ios是只要不刷新页面,href就不会改变),所以你要对相应的系统做适配。
——参考文章:https://segmentfault.com/q/1010000011775457

goMenuItemPage(item, i) {
				let url;
				item.url ? url = item.url : url = `/pages/menuItem/menuItem?menuListId=${i}`
				// uni.navigateTo({
				// 	url
				// })
				// 跳转到扫码页面,使用window.location.href方式跳转,否则IOS系统wx.config会报错,说signature签名失败
				window.location.href = url;
			}

微信扫码的逻辑

wxScanCode() {
				this.$u.api.getWxConfigInfo({
					appId: this.vuex_appId,
					url: window.location.href.split('#')[0]
				}).then(res => {
					this.wx = require('jweixin-module');
					this.wx.config({
						debug: false,
						appId: res.data.data.appId,
						timestamp: res.data.data.timestamp,
						nonceStr: res.data.data.nonceStr,
						signature: res.data.data.signature,
						jsApiList: ["scanQRCode"]
					});

					this.wx.ready(() => {
						// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
						// 微信扫码
						this.wx.scanQRCode({
							needResult: 1, // 0:扫描结果由微信处理;1:直接返回扫描结果;
							scanType: ["qrCode", "barCode"], // 扫码类型。qrCode:二维码;barCode:一维码;
							success: res => {
								if (res.resultStr.includes(',')) {
									this.meterNo = res.resultStr.split(',')[1];
								} else {
									this.meterNo = res.resultStr
								}
								this.search();
							},
							error: err => {
								console.log(err)
							}
						});
					});

					this.wx.error(err => console.log('扫码错误~~', err))
				}).catch(err => {
					console.log(err)
				})
			},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是uniapp调用wx.login获取手机号,在前端js对code进行解密的详细代码: 1. 在登录页面中,调用wx.login()方法获取用户的code: ```javascript // login.vue // 点击登录按钮 async onLogin() { // 调用wx.login()方法获取用户的code const { code } = await uni.login() // 将code传递给解密函数进行解密 const decryptedData = this.decryptData(code, this.encryptedData, this.iv) // 将解密后的手机号等信息进行展示 this.phoneNumber = decryptedData.phoneNumber } ``` 2. 在解密函数中,使用微信提供的解密API对code进行解密,并返回用户的手机号等信息: ```javascript // login.vue // 解密函数 decryptData(code, encryptedData, iv) { const sessionKey = uni.getStorageSync('session_key') const pc = uni.createDecipheriv('aes-128-cbc', sessionKey, iv) let decryptedData = '' try { decryptedData = JSON.parse(pc.update(encryptedData, 'binary', 'utf8') + pc.final('utf8')) } catch (err) { console.error(err) } const phoneNumber = decryptedData.phoneNumber return { phoneNumber } } ``` 需要注意的是,这里的session_key是在调用wx.login()方法后获取到的,可以通过以下代码获取: ```javascript // login.vue // 调用wx.login()方法获取session_key async getSessionKey() { const { code } = await uni.login() const { session_key } = await uni.request({ url: 'https://your-backend-server.com/get_session_key', method: 'POST', data: { code: code } }) uni.setStorageSync('session_key', session_key) } ``` 以上就是uniapp调用wx.login获取手机号,在前端js对code进行解密的详细代码。需要注意的是,这种方式只能解密手机号等信息,如果需要获取更多的用户信息,还需要通过调用微信提供的接口来获取。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值