微信小程序--水平仪

最新推荐文章于 2024-06-16 09:31:45 发布

初见啊龙

最新推荐文章于 2024-06-16 09:31:45 发布

阅读量1.1k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/mature_1/article/details/124199044

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用小程序的wx.startGyroscope和wx.onAccelerometerChange接口实现水平仪的效果。通过监听陀螺仪和加速度计的数据变化，调整核心区域的位置，从而模拟水平仪的工作原理。当核心区域位于特定区域内时，背景颜色会改变。代码示例提供了html、css和js的完整实现，并在页面卸载时停止监听传感器数据。

摘要由CSDN通过智能技术生成

一、简述

小程序实现水平仪效果的方式有很多，主要使用wx.startGyroscope，wx.onAccelerometerChange，官方定义如下

二、示例

三、代码

html：

<view class="gyroscope">
      <view class="region" style="background:{{regionBG}};"></view>
      <view class="core" style="background:{{backgroundColor}};top: {{top}}rpx;left: {{left}}rpx;"></view>
</view>

css：

.gyroscope{
  width: 200rpx; 
  height: 200rpx;
  border-radius: 100rpx;
  margin-top: 50rpx;
  margin-left: 50rpx;
  border: 1rpx solid #000000;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  background: #d1cfcf;
}
.region{
  width: 50rpx;
  height: 50rpx;
  margin-top: 75rpx;
  margin-left: 75rpx;
  border-radius: 26rpx;
  border: 1rpx solid #000000;
}
.core{
  width: 30rpx;
  height: 30rpx;
  border-radius: 15rpx;
  position: absolute;
}

js：

data: {
    top: 86,
    left: 86,
    backgroundColor: '#000000',
    regionBG: "#f04f4f",
    isOnAccelerometerChange: true,
    x: 0,
    y: 0,
    z: 0,
},
onLoad: function (options) {
    var that = this
    wx.startGyroscope({
      interval: "normal",
      success: function () {
        wx.onAccelerometerChange(function (res) {
          if (!that.data.isOnAccelerometerChange) {
            return
          }
          var x = (res.x * 180).toFixed(2)
          var y = -(res.y * 180).toFixed(2)
          var z = (res.z * 180).toFixed(2)
          var top = 86 + Number(y)
          var left = 86 + Number(x)
          if (top < 0) {
            top = 0
          }
          if (top > 170) {
            top = 170
          }
          if (left < 0) {
            left = 0
          }
          if (left > 170) {
            left = 170
          }
          that.setData({
            x: x,
            y: y,
            z: z,
            top: top,
            left: left
          })
          if (top > 76 && top < 105 && left > 76 && left < 109) {
            that.setData({
              regionBG: "#82ec82",
            })
          } else {
            that.setData({
              regionBG: "#f04f4f",
            })
          }
        })
      }
    })

},
onUnload: function () {
    this.setData({
      isOnAccelerometerChange: false
    })
    wx.stopAccelerometer({
    })
    wx.stopGyroscope({
    })
},

代码中onUnload为生命周期中监听页面卸载，停止监听陀螺仪数据和停止监听加速计数据

代码可直接使用！！！