小程序的加速计的接口

wx.onAccelerometerChange(function callback)

监听加速度数据事件。频率根据 wx.startAccelerometer() 的 interval 参数, 接口调用后会自动开始监听。

参数

function callback

加速度数据事件的回调函数

参数

Object res

属性	类型	说明
x	number	X 轴
y	number	Y 轴
z	number	Z 轴

通过以上API我们可以得到下面一段代码，这块可以放到小程序onLoad中回调中

  wx.onAccelerometerChange(function (res) {const { x,y,z} = res;})

手机的xyz轴

那么 x y z,分别代表 x轴 Y轴 z轴哪在手机上上如何展示呢

从上图我们可以看到手机的坐标，那么假如我们有一条线为水平在手机中显示

数学知识

如上图，这样我们只要计算x与y的夹角就可以了，接下来怎么计算呢，我们用到两个数学知识

1. Math.atan2()

** Math.atan2()接受两个参数x和y,方法如下:**

angel=Math.atan2(y,x)
x 指定点的 x 坐标的数字。
y 指定点的 y 坐标的数字。
计算出来的结果angel是一个弧度值,也可以表示相对直角三角形对角的角，其中 x 是临边边长，而 y 是对边边长。

**2. 角度=弧度*180/Math.PI

清楚了上面两个知识那么我代码继续写

  wx.onAccelerometerChange(function (res) {const { x,y,z} = res;//根据公式计算出角度const rotateXY = Math.atan2(x,y) * 180 / Math.PI;// 这里角度就可以赋值到data上，视图层就可以调这个角度了this.setData({rotateXY: rotateXY})})

下面是wxml中的内容

<view style="width:600rpx; height:2rpx;background:red;transform:rotate({{rotateXY}}deg)">

扫码体验

好了，整体就结束了底部再添加上camera 就可以通过摄像头，来测量物体是否水平，以下图片可以扫码体验

web前端微信小程序水平仪，如何做水平仪相关推荐

web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
重磅：微信官方推出 Web 前端和小程序统一框架
大家好,我是你们的校长. 说实话,小程序真的是越来越火了.而市面上也有很多小程序的开发框架,尤其是针对 Vue 的,大家的想法很简单,就是想通过做 Web 的项目,能不能直接转换成小程序呢?这样,可以 ...
基于spring-boot的社区社交微信小程序，适合做脚手架、二次开发
代码地址如下: http://www.demodashi.com/demo/13867.html 1 概述笔者做的一个后端基于spring-boot的社区社交微信小程序,可以作为开发的脚手架,开发速 ...
制作自己的微信小程序要怎么做？
现在不少人都想要制作自己的微信小程序,不管是企业还是商家都在咨询相关的问题.那么制作自己的微信小程序要怎么做?流程和费用分别又是怎么样的呢?下面个大家一起来看看. 步骤一:要有自己的小程序账号首先我 ...
如何自建微信外卖平台_如何建立微信点餐平台微信小程序外卖怎么做
餐道(candao.com)3月15日观察:如今越来越多人使用微信小程序点餐,对于商家来说,这是一个新的业务拓展渠道.那么,微信小程序外卖怎么做呢?首先,我们需要建立一个微信点餐平台.下面小编就教大家 ...
如何制作一个微信小程序【微信小程序是怎么做的】
为什么现在这么多人使用微信小程序呢?因为微信小程序除了便捷易开发,公司企业可以用来做小程序展示官网,商家也可以做小程序商城,甚至个人也可以拥有自己的小程序.那么如何制作一个微信小程序?微信小程序是怎么 ...
微信小程序搭建怎么做？流程是怎么样？【小程序搭建】
随着微信的日益普及,小程序成为了企业必备的营销工具.而在这个过程中,企业也需要搭建一个自己的小程序来进行推广和销售产品或服务.那么微信小程序搭建怎么做呢? 流程一:小程序账号的注册注册小程序账号有两 ...
微信小程序怎么免费做
微信小程序怎么免费做,不用掏钱,不用说学什么代码什么的,什么都不用,我教你们一下,首先搜索这几个字,看到没有. 然后到这个页面,然后点立即注册啊,点这个小程序啊. 就开始注册邮箱密码,确认密码是吧?点 ...
Java后端服务器点餐系统的部署+前端微信小程序开发（13）
Java后端服务器点餐系统的部署+前端微信小程序开发(13) 编译运行小程序 1,本地调试这和你上面java的运行要保持一致,如果是本地的java项目运行你就用 localhost 后台Java直接 ...

web前端微信小程序水平仪，如何做水平仪