示例源码如下，请查看 pre > code 标签中的内容
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;padding: 6px;">
<!-- #endif -->
<text class="uni-h2">罗盘 API</text>
<text class="notice">演示 `uni.startCompass`、`uni.stopCompass`、`uni.onCompassChange`、`uni.offCompassChange` 的完整流程。靠近强磁场或金属物体时数据可能抖动，可做“8”字校准。Web平台需使用https</text>
<text class="margin-v">先绑定监听，再启动采集，更容易观察回调是否生效。</text>
<text class="uni-h3">实时信息</text>
<view class="panel-list">
<text class="panel-item" v-for="item in infoItems" :key="item.label">{{ item.label }}：{{ item.value }}</text>
</view>
<text class="uni-h3">当前方位</text>
<view class="compass-card">
<view class="bg-compass-line"></view>
<image class="bg-compass" src="/static/compass.png" :style="compassStyle" />
<view class="direction-center">
<text class="direction-value">{{ directionText }}</text>
<text class="direction-degree">{{ degreeText }}</text>
</view>
</view>
<view class="uni-row">
<button id="btn-bind-primary-listener" class="margin-v" @tap="bindPrimaryListener">注册罗盘Change</button>
<button id="btn-remove-primary-listener" class="margin-v" style="margin-left: 3px;" @tap="removePrimaryListener">注销罗盘Change</button>
</view>
<view class="uni-row">
<button id="btn-start-compass" class="margin-v" type="primary" @tap="startCompassListen">uni.startCompass</button>
<button id="btn-stop-compass" class="margin-v" style="margin-left: 3px;" @tap="stopCompassListen">uni.stopCompass</button>
</view>
<text>重复绑定测试</text>
<view class="uni-row">
<button id="btn-bind-secondary-listener" class="margin-v" @tap="bindSecondaryListener">注册罗盘Change2</button>
<button id="btn-remove-secondary-listener" class="margin-v" style="margin-left: 3px;" @tap="removeSecondaryListener">注销罗盘Change2</button>
</view>
<text class="uni-h3">监听日志</text>
<view class="panel-list">
<text class="panel-item" v-for="item in logItems" :key="item.id">{{ item.text }}</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup lang="uts">
type DisplayItem = {
label : string
value : string
}
type PageCompassAccuracy = number | string | null
type LogItem = {
id : number
text : string
}
const statusText = ref('未启动')
const direction = ref(0)
const directionText = ref('北')
const accuracyText = ref('null')
const primaryBound = ref(false)
const secondaryBound = ref(false)
const lastAction = ref('等待调用')
const lastStatus = ref('未执行')
const lastPayload = ref('请先绑定监听并开始采集')
const logItems = ref<Array<LogItem>>([])
const logId = ref(0)
const infoItems = computed(() : Array<DisplayItem> => {
return [
{ label: '监听状态', value: statusText.value },
{ label: '主监听', value: primaryBound.value ? '已绑定' : '未绑定' },
{ label: '额外监听', value: secondaryBound.value ? '已绑定' : '未绑定' },
{ label: 'accuracy', value: accuracyText.value },
{ label: '最近动作', value: lastAction.value },
{ label: '状态', value: lastStatus.value },
{ label: '说明', value: lastPayload.value }
]
})
function pushLog(line : string) : void {
logId.value = logId.value + 1
const item : LogItem = {
id: logId.value,
text: line
}
logItems.value.unshift(item)
if (logItems.value.length > 10) {
logItems.value.splice(10)
}
}
function updateResult(action : string, status : string, payload : string) : void {
lastAction.value = action
lastStatus.value = status
lastPayload.value = payload
pushLog(`${action} -> ${status}`)
}
function formatDirection(value : number) : string {
return value.toFixed(1)
}
function formatAccuracy(value : PageCompassAccuracy) : string {
if (value == null) {
return 'null'
}
if (typeof value == 'number') {
return value.toFixed(2)
}
return value
}
function resolveDirectionText(value : number) : string {
if (value >= 337.5 || value < 22.5) {
return '北'
}
if (value < 67.5) {
return '东北'
}
if (value < 112.5) {
return '东'
}
if (value < 157.5) {
return '东南'
}
if (value < 202.5) {
return '南'
}
if (value < 247.5) {
return '西南'
}
if (value < 292.5) {
return '西'
}
return '西北'
}
const compassStyle = computed(() : string => {
return `transform: rotate(${-direction.value}deg);`
})
const degreeText = computed(() : string => {
return `${formatDirection(direction.value)}°`
})
const primaryListener : OnCompassChangeCallback = (result : OnCompassChangeCallbackResult) => {
direction.value = result.direction
directionText.value = resolveDirectionText(result.direction)
accuracyText.value = formatAccuracy(result.accuracy != null ? result.accuracy : null)
statusText.value = '监听中'
}
const secondaryListener : OnCompassChangeCallback = (result : OnCompassChangeCallbackResult) => {
pushLog(`额外监听 -> ${formatDirection(result.direction)}° / accuracy ${formatAccuracy(result.accuracy != null ? result.accuracy : null)}`)
}
function ensurePrimaryBound() : void {
if (!primaryBound.value) {
uni.onCompassChange(primaryListener)
primaryBound.value = true
}
}
function bindPrimaryListener() : void {
ensurePrimaryBound()
updateResult('onCompassChange(primary)', '已绑定', '主监听已注册')
}
function bindSecondaryListener() : void {
if (!secondaryBound.value) {
uni.onCompassChange(secondaryListener)
secondaryBound.value = true
}
updateResult('onCompassChange(extra)', '已绑定', '额外监听已注册')
}
function removePrimaryListener() : void {
uni.offCompassChange(primaryListener)
primaryBound.value = false
updateResult('offCompassChange(primary)', '已解绑', '主监听已移除')
}
function removeSecondaryListener() : void {
uni.offCompassChange(secondaryListener)
secondaryBound.value = false
updateResult('offCompassChange(extra)', '已解绑', '额外监听已移除')
}
function startCompassListen() : void {
ensurePrimaryBound()
uni.startCompass({
success: (res) => {
statusText.value = '监听中'
const message = res.errMsg != null ? res.errMsg as string : 'startCompass:ok'
updateResult('startCompass', '成功', message)
},
fail: (error) => {
statusText.value = '启动失败'
const message = error.errMsg != null ? error.errMsg : 'startCompass:fail'
updateResult('startCompass', `失败 (${error.errCode})`, message)
}
})
}
function stopCompassListen() : void {
uni.stopCompass({
success: (res) => {
statusText.value = '已停止'
const message = res.errMsg != null ? res.errMsg as string : 'stopCompass:ok'
updateResult('stopCompass', '成功', message)
},
fail: (error) => {
const message = error.errMsg != null ? error.errMsg : 'stopCompass:fail'
updateResult('stopCompass', `失败 (${error.errCode})`, message)
}
})
}
onUnload(() => {
uni.offCompassChange(primaryListener)
uni.offCompassChange(secondaryListener)
uni.stopCompass()
});
defineExpose({
startCompassListen
})
</script>
<style>
.margin-v {
margin: 5px 0;
}
.notice {
color: #6b2d16;
font-size: 14px;
}
.panel-list {
margin: 5px 0;
padding: 10px;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.panel-item {
font-size: 14px;
margin: 4px 0;
}
.compass-card {
position: relative;
margin: 12px auto;
width: 270px;
height: 270px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.direction-center {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.direction-value {
font-size: 30px;
}
.direction-degree {
font-size: 16px;
margin-top: 6px;
}
.bg-compass {
position: absolute;
top: 0;
left: 0;
width: 270px;
height: 270px;
transition-duration: 0.1s;
}
.bg-compass-line {
position: absolute;
left: 134px;
top: -5px;
width: 3px;
height: 28px;
background-color: #1aad19;
border-radius: 100px;
z-index: 1;
}
</style>
