uni.onCompassChange(callback) @oncompasschange

展示全部

# uni.onCompassChange(callback)

监听罗盘数据

# onCompassChange 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
callback	(result: OnCompassChangeSuccess) => void	是	-	-	-

# OnCompassChangeSuccess 的属性值

名称	类型	必备	默认值	兼容性	描述
direction	number	是	-	-	面对的方向度数

# 参见

# uni.offCompassChange(callback)

取消监听罗盘数据

# offCompassChange 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
callback	(result: any) => void	是	-	-	-

# 参见

# uni.startCompass(options?)

开始监听罗盘数据

# startCompass 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

options

StartCompassOptions

否

名称	类型	必备	默认值	兼容性	描述
success	(res: CompassSuccess) => void	否	-	-	uni.startCompass成功回调函数定义
fail	(res: ICompassError) => void	否	-	-	uni.startCompass失败回调函数定义
complete	(res: any) => void	否	-	-	uni.startCompass完成回调函数定义

# ICompassError 的属性值

名称	类型	必备	默认值	兼容性	描述
errCode	number	是	-	-	-
errSubject	string	是	-	-	统一错误主题（模块）名称
data	any	否	-	-	错误信息中包含的数据
cause	Error	否	-	-	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	-	-

# 参见

# uni.stopCompass(options?)

停止监听罗盘数据

# stopCompass 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

options

StopCompassOptions

否

名称	类型	必备	默认值	兼容性	描述
success	(res: CompassSuccess) => void	否	-	-	成功返回的回调函数
fail	(res: ICompassError) => void	否	-	-	失败的回调函数
complete	(res: any) => void	否	-	-	结束的回调函数（调用成功、失败都会执行）

# ICompassError 的属性值

名称	类型	必备	默认值	兼容性	描述
errCode	number	是	-	-	-
errSubject	string	是	-	-	统一错误主题（模块）名称
data	any	否	-	-	错误信息中包含的数据
cause	Error	否	-	-	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	-	-

# 参见

# 示例

hello uni-app x

Template

Script

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-hello-text uni-center" style="padding-bottom:50rpx;">
        旋转手机即可获取方位信息
      </view>
      <view class="direction">
        <view class="bg-compass-line"></view>
        <image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'">
        </image>
        <view class="direction-value">
          <text>{{direction}}</text>
          <text class="direction-degree">o</text>
        </view>
      </view>
    </view>
  </view>
</template>


<style>
  .direction {
    position: relative;
    margin-top: 70rpx;
    display: flex;
    width: 540rpx;
    height: 540rpx;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .direction-value {
    position: relative;
    font-size: 200rpx;
    color: #353535;
    line-height: 1;
    z-index: 1;
  }

  .direction-degree {
    position: absolute;
    top: 0;
    right: -40rpx;
    font-size: 60rpx;
  }

  .bg-compass {
    position: absolute;
    top: 0;
    left: 0;
    width: 540rpx;
    height: 540rpx;
    transition: .1s;
  }

  .bg-compass-line {
    position: absolute;
    left: 267rpx;
    top: -10rpx;
    width: 6rpx;
    height: 56rpx;
    background-color: #1AAD19;
    border-radius: 999rpx;
    z-index: 1;
  }
</style>