uni.onCompassChange(callback) @oncompasschange

展示全部

# uni.onCompassChange(callback)

监听罗盘数据

# onCompassChange 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	x	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

callback

(result: OnCompassChangeSuccess) => void

是

# OnCompassChangeSuccess 的属性值

名称类型必备默认值兼容性描述

direction

number

是

面对的方向度数

accuracy

any

否

需要基础库： 2.4.0

精度

errMsg

string

否

错误信息

# 参见

# uni.offCompassChange(callback)

取消监听罗盘数据

# offCompassChange 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	x	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

callback

(result: OnCompassChangeSuccess) => void

是

# OnCompassChangeSuccess 的属性值

名称类型必备默认值兼容性描述

direction

number

是

面对的方向度数

accuracy

any

否

需要基础库： 2.4.0

精度

errMsg

string

否

错误信息

# 参见

# uni.startCompass(options?)

开始监听罗盘数据

# startCompass 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	x	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

options

StartCompassOptions

否

uni.startCompass

名称

类型

必备

默认值

兼容性

描述

success

(res: CompassSuccess) => void

否

uni.startCompass成功回调函数定义

fail

(res: CompassFail) => void

否

uni.startCompass失败回调函数定义

complete

(res: any) => void

否

uni.startCompass完成回调函数定义

# CompassSuccess 的属性值

名称

类型

必备

默认值

兼容性

描述

errMsg

string

否

错误信息

# CompassFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

errMsg

string

否

错误信息

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

# 参见

# uni.stopCompass(options?)

停止监听罗盘数据

# stopCompass 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	x	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

options

StopCompassOptions

否

名称

类型

必备

默认值

兼容性

描述

success

(res: CompassSuccess) => void

否

成功返回的回调函数

fail

(res: CompassFail) => void

否

失败的回调函数

complete

(res: any) => void

否

结束的回调函数（调用成功、失败都会执行）

# CompassSuccess 的属性值

名称

类型

必备

默认值

兼容性

描述

errMsg

string

否

错误信息

# CompassFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

errMsg

string

否

错误信息

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

# 参见

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-hello-text uni-center" style="padding-bottom:25px;">
        旋转手机即可获取方位信息
      </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>
<script>
  export default {
    data() {
      return {
        title: 'onCompassChange',
        direction: 0
      }
    },
    onReady: function () {
      uni.onCompassChange((res) => {
        console.log('onCompassChange', res)
        this.direction = res.direction
      })
    },
    onUnload() {
      uni.stopCompass();
      this.direction = 0;
    }
  }
</script>

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

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

  .direction-degree {
    position: absolute;
    top: 0;
    right: -20px;
    font-size: 30px;
  }

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

  .bg-compass-line {
    position: absolute;
    left: 134px;
    top: -5px;
    width: 3px;
    height: 28px;
    background-color: #1AAD19;
    border-radius: 100px;
    z-index: 1;
  }
</style>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-hello-text uni-center" style="padding-bottom:25px;">
        旋转手机即可获取方位信息
      </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>
<script>
  export default {
    data() {
      return {
        title: 'onCompassChange',
        direction: 0
      }
    },
    onReady: function () {
      uni.onCompassChange((res) => {
        console.log('onCompassChange', res)
        this.direction = res.direction
      })
    },
    onUnload() {
      uni.stopCompass();
      this.direction = 0;
    }
  }
</script>

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

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

  .direction-degree {
    position: absolute;
    top: 0;
    right: -20px;
    font-size: 30px;
  }

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

  .bg-compass-line {
    position: absolute;
    left: 134px;
    top: -5px;
    width: 3px;
    height: 28px;
    background-color: #1AAD19;
    border-radius: 100px;
    z-index: 1;
  }
</style>