uni-app H5页面实现摇一摇功能（兼容ios和安卓）

最新推荐文章于 2024-07-08 10:44:23 发布

阳关下的小L

最新推荐文章于 2024-07-08 10:44:23 发布

阅读量1.9k

点赞数

分类专栏：技术分享文章标签： uni-app web

本文链接：https://blog.csdn.net/qq_40026819/article/details/120371033

版权

技术分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

整理一下，前段时间开发公众号遇到了很多坑，在网上也搜索了不少教程，大部分都是基于原生的，而且坑也很多。废话不多少了，直接上代码

1.首先在data 中申明

data() {
		
			return {
				flag:0,
				shake : 3000,
				last_update : 0,
				x : 0,
				y : 0,
				z : 0,
				last_x : 0,
				last_y : 0,
				last_z : 0,
				
			}
		},

2.定义方法

methods:{
    deviceMotionHandler(eventData) {
				if(this.flag==0){
					var acceleration = eventData.accelerationIncludingGravity,
						currTime = new Date().valueOf(),
						diffTime = currTime - this.last_update;
								
					if (diffTime > 100) {
						this.last_update = currTime;
						this.x = acceleration.x;
						this.y = acceleration.y;
						this.z = acceleration.z;
						var speed = Math.abs(this.x + this.y + this.z - this.last_x - this.last_y - this.last_z) / diffTime * 10000
						if (speed > this.shake) {
							// alert("中奖了")
							//定义自己的方法
						}
						this.last_x = this.x;
						this.last_y = this.y;
						this.last_z = this.z;
					}
				}
				
			},
iosGrantedTips() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.indexOf("like mac os x") > 0) {
					var reg = /os [\d._]*/gi;
					var verinfo = ua.match(reg);
					var version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
					var arr = version.split(".");
					if (arr[0] > 12 && arr[1] > 2) { //对13.3以后的版本处理,包括13.3,

						DeviceMotionEvent.requestPermission()

							.then(permissionState => {

								if (permissionState === 'granted') {
									window.addEventListener('devicemotion', this.deviceMotionHandler, true)

								}
								//
							})

							.catch((err) => {

								//alert("用户未允许权限")

								//======这里可以防止重复授权，需要改动，因为获取权限需要点击事件才能触发，所以这里可以改成某个提示框===//
								alert("由于IOS系统需要手动获取访问动作与方向的权限，为了保证抽奖正常运行，请在访问提示中点击允许！")
								this.ios13granted()
								
							});

					} else { //13.3以前的版本
						window.addEventListener('devicemotion', this.deviceMotionHandler, true)
					}
				} else {
					// alert('安卓手机')
					window.addEventListener('devicemotion', this.deviceMotionHandler, true)
				}
			},
			ios13granted() {
				DeviceMotionEvent.requestPermission().then((permissionState) => {
					if (permissionState === 'granted') {
						window.addEventListener('devicemotion', this.deviceMotionHandler, true);
					}
				}).catch((error) => {
					alert(error)
				})
			},
        click(){
            this.iosGrantedTips() //这里一定是用户主动去点击按钮才能触发
        }
}

3.调用iosGrantedTips()这个方法就行了，注意苹果13.3+的手机这里一定是用户主动点击去调用的，放在页面初始化的函数中，会导致调用失败。

有啥不懂的欢迎浏览讨论