uni-app uni.scanCode方法在华为HUAWEI Pocket 2手机上显示有问题
uni-app uni.scanCode方法在华为HUAWEI Pocket 2手机上显示有问题
测试过的手机:
手机品牌:HUAWEI Pocket 2
型号代码:LEM-AL–
OS 版本:Harmony OS 4.2.0
示例代码:
openScanCode () {
console.log('==========authSignInit========');
uni.scanCode({
autoZoom:false,
onlyFromCamera: true,
scanType: ['qrCode'],
success: (res) => {
// 将编码后的URL转换为Base64格式
//console.log(res.result)
if(res.result.includes(config.iamURL)){
const base64Url = btoa(res.result);
console.log(res.result)
this.authSign(base64Url,
uni.getStorageSync('username')).then((result) => {
console.log(result)
this.scanCode(result, res.result,
base64Url);
uni.showToast({
title: '扫描成功',
icon: 'none'
});
uni.switchTab({
url: '/pages/index',
})
});
}else {
uni.showToast({
title: '非法二维码',
icon: 'error'
});
uni.switchTab({
url: '/pages/index',
})
}
//console.log('扫描结果:' + res.result);
},
fail: (err) => {
// uni.showToast({
// title: '扫描失败',
// icon: 'none'
// });
uni.switchTab({
url: '/pages/index',
})
},
complete (res) {
let obj={}
obj.username = uni.getStorageSync('username')
obj.deviceId = uni.getSystemInfoSync().deviceId
setScanStatus(obj).then(res=>{
console.log('成功')
})
}
});
}
操作步骤:
下载APP,点击扫码即可
预期结果:
扫码框在正中间,且可以正确扫描
实际结果:
扫码框不在正中间,跑到左上角去了
信息类别 | 信息内容 |
---|---|
产品分类 | uniapp/App |
PC开发环境 | Windows |
PC版本号 | windows10 |
HBuilderX | 正式 |
HBuilderX版本 | 4.15 |
手机系统 | 全部 |
手机厂商 | 华为 |
页面类型 | vue |
vue版本 | vue2 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
App下载地址 | https://www.pgyer.com/OckC1wtj |
1 回复
针对uni-app
中的uni.scanCode
方法在华为HUAWEI Pocket 2手机上显示有问题的情况,我们可以通过几个方面的调试和优化来尝试解决这个问题。以下是一个基于uni-app
框架的示例代码,以及一些可能的解决方案。
示例代码
首先,确保你的uni-app
项目中已经正确调用了uni.scanCode
方法。以下是一个简单的调用示例:
// 在页面的methods中定义扫描二维码的函数
methods: {
scanCode() {
uni.scanCode({
success: (res) => {
console.log('扫描成功:', res.result);
// 根据扫描结果做相应处理
},
fail: (err) => {
console.error('扫描失败:', err);
}
});
}
}
在页面的模板中,可以添加一个按钮来触发扫描:
<template>
<view>
<button @click="scanCode">扫描二维码</button>
</view>
</template>
解决方案
- 检查权限:
确保应用已经获得了相机权限。在华为手机上,用户可能需要手动授予权限。你可以在
manifest.json
中声明相机权限,并在代码中动态检查权限。
// manifest.json
{
"mp-weixin": {
"requiredPrivateInfos": ["camera"]
}
}
动态检查权限(示例为微信小程序,其他平台类似):
uni.getSetting({
success: (res) => {
if (!res.authSetting['scope.camera']) {
uni.authorize({
scope: 'scope.camera',
success() {
// 用户同意授权
},
fail() {
// 用户拒绝授权
uni.showModal({
title: '提示',
content: '需要您的授权才能使用相机',
showCancel: false,
success: (res) => {
if (res.confirm) {
// 引导用户去设置中授权
uni.openSetting();
}
}
});
}
});
} else {
// 已经授权,执行扫描操作
this.scanCode();
}
}
});
-
适配屏幕: 考虑到HUAWEI Pocket 2的特殊屏幕形态,确保你的应用已经适配了折叠屏的显示。可以通过CSS媒体查询来针对不同屏幕尺寸进行样式调整。
-
调试日志: 在
fail
回调中打印更详细的错误信息,有助于定位问题。 -
更新SDK: 确保你使用的
uni-app
和HBuilderX都是最新版本,以利用最新的优化和bug修复。
通过上述步骤,你应该能够定位并解决uni.scanCode
在HUAWEI Pocket 2手机上显示有问题的情况。如果问题依旧存在,建议查看uni-app
社区或官方文档,看是否有其他开发者遇到并解决了类似问题。