uni-app uni.scanCode方法在华为HUAWEI Pocket 2手机上显示有问题

发布于 1周前 作者 eggper 来自 Uni-App

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>

解决方案

  1. 检查权限: 确保应用已经获得了相机权限。在华为手机上,用户可能需要手动授予权限。你可以在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();
    }
  }
});
  1. 适配屏幕: 考虑到HUAWEI Pocket 2的特殊屏幕形态,确保你的应用已经适配了折叠屏的显示。可以通过CSS媒体查询来针对不同屏幕尺寸进行样式调整。

  2. 调试日志: 在fail回调中打印更详细的错误信息,有助于定位问题。

  3. 更新SDK: 确保你使用的uni-app和HBuilderX都是最新版本,以利用最新的优化和bug修复。

通过上述步骤,你应该能够定位并解决uni.scanCode在HUAWEI Pocket 2手机上显示有问题的情况。如果问题依旧存在,建议查看uni-app社区或官方文档,看是否有其他开发者遇到并解决了类似问题。

回到顶部