uni-app onCompassChange在h5端不同手机获取值差异大,同一手机重新进入页面获取值与上次不一致,偏差大
uni-app onCompassChange在h5端不同手机获取值差异大,同一手机重新进入页面获取值与上次不一致,偏差大
项目信息 | 详情 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | 19045.3803 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 3.99 |
手机系统 | Android |
手机系统版本号 | Android 14 |
手机厂商 | VIVO, IPHONE |
手机机型 | iq00 z3,苹果XR |
页面类型 | vue |
vue版本 | vue3 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
示例代码:
<template>
<view>
<text>当前经度: {{ longitude }}</text>
<text>当前纬度: {{ latitude }}</text>
<text>当前方向: {{ direction }}</text>
</view>
</template>
<script>
export default {
data() {
return {
longitude: '', // 当前经度
latitude: '', // 当前纬度
direction: '' // 当前方向
};
},
mounted() {
this.initCompass();
},
methods: {
initCompass() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.longitude = res.longitude;
this.latitude = res.latitude;
// 监听设备方向变化
uni.onCompassChange((res) => {
this.direction = res.direction;
});
// 开始监听设备方向
uni.startCompass();
},
fail: (error) => {
console.log('获取位置失败', error);
}
});
}
},
onUnload() {
uni.stopCompass(); // 停止监听设备方向
}
};
</script>
操作步骤:
多台手机测试,同一个方向结果会不同,同一台手机,第一次进去与第n次进入时,保持角度不变,获取到的值也有可能不一致,偏差太大
预期结果:
同一台手机,不管进去多少次,值会有一点偏差,但不至于偏差超过45°那么夸张,不同手机的偏差值也太大了
实际结果:
偏差太大了,苹果和安卓有时候角度一直,偏差甚至超过180°了
bug描述:
onCompassChange在h5端,不同手机获取到的值不一样,重新进去页面时,同一部手机获取到的值与上一次获取到的值也不一样
api 的具体返回值是微信小程序返回的,可以到微信社区进行搜索和反馈。关联问题 https://developers.weixin.qq.com/community/search?query=onCompassChange
在 uni-app
中使用 onCompassChange
获取设备指南针数据时,可能会遇到不同手机获取的值差异较大,或者同一手机重新进入页面获取的值与上次不一致的情况。这种情况通常与设备的硬件传感器、操作系统、浏览器实现等因素有关。
以下是一些可能的原因和解决方案:
1. 设备硬件差异
不同手机的指南针传感器精度和校准方式可能不同,导致获取的值存在差异。
解决方案:
- 了解设备硬件传感器的精度,并考虑在应用中增加数据校准或滤波处理。
- 提供用户手动校准指南针的提示或功能。
2. 传感器未校准
设备的指南针传感器可能未经过校准,导致数据不准确。
解决方案:
- 提示用户在使用前校准指南针(例如,让用户将设备在空中画“8”字)。
- 使用
uni.onCompassChange
监听数据时,检查数据的稳定性,忽略明显异常的值。
3. H5 端浏览器实现差异
不同浏览器对传感器 API 的实现可能不同,导致数据获取不一致。
解决方案:
- 确保使用最新版本的浏览器,因为较新的浏览器对传感器 API 的支持更好。
- 在代码中增加兼容性检查,如果浏览器不支持指南针 API,则提示用户切换到支持的浏览器。
4. 数据抖动
指南针传感器数据可能存在抖动,导致获取的值不稳定。
解决方案:
- 对获取的数据进行平滑处理,例如使用移动平均滤波或卡尔曼滤波算法,减少数据抖动。
- 设置一个阈值,只有当指南针数据变化超过该阈值时才触发回调。
5. 页面重新加载导致数据重置
重新进入页面时,传感器数据可能被重置或重新初始化,导致与上次不一致。
解决方案:
- 在页面加载时,延迟一段时间再开始监听指南针数据,确保传感器稳定。
- 将上次的指南针数据存储在本地缓存中,作为参考值,避免明显偏差。
示例代码
以下是一个简单的示例,演示如何对指南针数据进行平滑处理:
let compassData = null; // 存储上次的指南针数据
const smoothingFactor = 0.2; // 平滑系数
uni.onCompassChange((res) => {
if (!compassData) {
compassData = res.direction; // 初始化
} else {
// 使用平滑算法
compassData = compassData * (1 - smoothingFactor) + res.direction * smoothingFactor;
}
console.log('平滑后的指南针数据:', compassData);
});