uni-app 设备之（加速计，罗盘，陀螺仪）

uni-app加速计，罗盘，陀螺仪接口API:

参考代码：

<template><view><text>加速计</text><text class="acc_show">X:{{acc_x}}</text><text class="acc_show">Y:{{acc_y}}</text><text class="acc_show">Z:{{acc_z}}</text><button size="default" type="default" @click="accelerometerStart()">加速计-启动</button><button size="default" type="default" @click="accelerometerStop()">加速计-停止</button><text>罗盘</text><text>方向角度:{{cmp_direction}}</text><button size="default" type="default" @click="compassStart()">罗盘-启动</button><button size="default" type="default" @click="compassStop()">罗盘-停止</button><text>陀螺仪</text><text>X:{{gyr_x}}</text><text>Y:{{gyr_y}}</text><text>Z:{{gyr_z}}</text><button size="default" type="default" @click="gyroscopeStart()">陀螺仪-启动</button><button size="default" type="default" @click="gyroscopeStop()">陀螺仪-停止</button></view>
</template><script>export default {data() {return {acc_x: 0.0,acc_y: 0.0,acc_z: 0.0,cmp_direction: 0.0, // 0度：正北，90度：正东，180度：正南，270度：正西gyr_x: 0.0,gyr_y: 0.0,gyr_z: 0.0,}},onReady() {},methods:{// 加速计 accelerometerStart() {uni.onAccelerometerChange((res) => {this.acc_x = res.x.toFixed(3);this.acc_y = res.y.toFixed(3);this.acc_z = res.z.toFixed(3);}),uni.startAccelerometer({interval:'ui', // 'game','normal','ui'}),uni.showToast({title:'加速计启动',icon:'success'})},accelerometerStop() {uni.offAccelerometerChange(function(res){console.log('加速计取消监听');}),uni.stopAccelerometer(),uni.showToast({title:'加速计停止',icon:'error'})},// 罗盘compassStart(res){uni.onCompassChange((res)=>{this.cmp_direction = parseInt(res.direction)}),uni.startCompass(),uni.showToast({title:'罗盘启动',icon:'success'})},compassStop(res){uni.stopCompass()},// 陀螺仪gyroscopeStart() {uni.onGyroscopeChange((res)=>{this.gyr_x = res.x.toFixed(2);this.gyr_y = res.y.toFixed(2);this.gyr_z = res.z.toFixed(2);}),uni.startGyroscope({interval:'ui'})},gyroscopeStop() {uni.stopGyroscope()}}}
</script><style>.text-area .acc_show {display: flex;width: auto;height: auto;}
</style>

uni-app 设备之（加速计，罗盘，陀螺仪）相关推荐

小程序—这款工具把加速计、陀螺仪、设备方向的调试痛点解决了
之前在一篇博文中捎带介绍过这款工具,反响很好,还收到了两位用户的打赏,但受那篇博文的影响,并没有被广大小程序开发者所熟知,故写一篇专门的,希望能有更多用户不再被加速计.陀螺仪.设备方向的调试难题再刺痛 ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...

uni-app 设备之（加速计，罗盘，陀螺仪）

uni-app 设备之（加速计，罗盘，陀螺仪）相关推荐

最新文章

热门文章