Vue实现摇一摇功能(兼容ios13.3以上)

最近做了个摇一摇类似的功能，使用的是shake.js，但在ios13.3之前的版本中可以触发摇一摇，之后的版本需要兼容，需要制作一个让用户能手动点击的弹框，才能使用户授权动作与方向的权限。（需使用https协议）

<van-popup v-model="isTip" class="popInfo" :close-on-click-overlay="false">
 <div class="mainBody">
 <h3 class="systemTip">温馨提示</h3>
 <div class="confirm">
 由于ios系统需要手动获取访问动作与方向的权限，为保障游戏的正常进行，请在访问提示中点击允许。
 </div>
 </div>
 <button class="bottomButton" @click="handleInit">
 知道了
 </button>
</van-popup>

shake.js

//引入shake.js
created(){
 this.initShake()
 const isAction = JSON.parse(localStorage.getItem('getAction'))
 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,".");
 if (parseFloat(version) >= 13.3 && !isAction){
 localStorage.setItem("getAction",true)
 this.isTip = true
 }
 }
},
methods:{
 initShake(){
 this.myShakeEvent = new Shake({
 threshold: 15, // 摇动阈值
 timeout: 1000 // 事件发生频率，是可选值
 });
 this.myShakeEvent.start();
 window.addEventListener('shake', xx);
 },
 handleInit(){
 this.isTip = false
 this.ios13granted()
 },
 ios13granted() {
 if (typeof DeviceMotionEvent.requestPermission === 'function') {
 DeviceMotionEvent.requestPermission().then(permissionState => {
 if (permissionState === 'granted') {
 this.initShake() //摇一摇
 } else if(permissionState === 'denied'){// 打开的链接不是https开头
 alert("当前IOS系统拒绝访问动作与方向。请退出微信，重新进入活动页面获取权限。或直接点击抽签桶参与活动")
 }
 }).catch((error) => {
 alert("请求设备方向或动作访问需要用户手势来提示")
 })
 } else {
 // 处理常规的非iOS 13+设备
 alert("处理常规的非iOS 13+设备")
 }
 },
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript html5摇一摇功能的实现

    通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份. 知识要点 1.DeviceMotionEvent     这是html5支持的重力感应事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html 事件介绍: deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角. devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系

  • JS实现微信摇一摇原理解析

    本文为大家分享了JS实现微信摇一摇的原理,供大家参考,具体内容如下 实现原理: 1.微信摇一摇事件需要有硬件支撑,必须要求手机中有陀螺仪 2.在JS中给window添加ondevectionmotion事件.该事件在手机晃动,即手机中的陀螺仪发生旋转,该事件会触发 3.触发ondevectionmotion事件,会产生一个事件对象,通过该对象中的键值(accelerationIncludingGravity)来获得该重力加速器对象 4.重力加速器对象中含有陀螺仪的坐标,通过重力加速器对象.x -

  • JavaScript+H5实现微信摇一摇功能

    JavaScript+H5实现微信摇一摇功能

    项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动.也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对于我们的需求只需要摇一摇这个动作却是大相径庭. 其实H5+JavaScript写出来的页面,通过获取手机的屏幕长和宽,以及添加声音等就可以实现摇一摇的效果. 第一步,实现手机摇动改变颜色 <!doctype html> <html> <head> <meta char

  • Vue实现摇一摇功能(兼容ios13.3以上)

    Vue实现摇一摇功能(兼容ios13.3以上)

    最近做了个摇一摇类似的功能,使用的是shake.js,但在ios13.3之前的版本中可以触发摇一摇,之后的版本需要兼容,需要制作一个让用户能手动点击的弹框,才能使用户授权动作与方向的权限.(需使用https协议) <van-popup v-model="isTip" class="popInfo" :close-on-click-overlay="false"> <div class="mainBody"&g

  • iOS实现“摇一摇”与“扫一扫”功能示例代码

    iOS实现“摇一摇”与“扫一扫”功能示例代码

    "摇一摇"功能的实现: iPhone对 "摇一摇"有很好的支持,总体说来就两步: 在视图控制器中打开接受"摇一摇"的开关; - (void)viewDidLoad { // 设置允许摇一摇功能 [UIApplication sharedApplication].applicationSupportsShakeToEdit = YES; // 并让自己成为第一响应者 [self becomeFirstResponder]; } 在"摇一摇

  • iOS实现微信朋友圈与摇一摇功能

    iOS实现微信朋友圈与摇一摇功能

    本Demo为练手小项目,主要是熟悉目前主流APP的架构模式.此项目中采用MVC设计模式,纯代码和少许XIB方式实现.主要实现了朋友圈功能和摇一摇功能. 预览效果: 主要重点 1.整体架构 利用UITabBarController和UINavigationController配合实现.其中要注意定义基类,方便整体上的管理,例如对UINavigationController头部的颜色,字体和渲染颜色等设置.以及对UITabBarController的底部的渲染等. [self.navigationB

  • 微信公众号 摇一摇周边功能开发

    ①申请开通摇一摇功能 申请开通摇一摇周边功能.成功提交申请请求后,工作人员会在三个工作日内完成审核.若审核不通过,可以重新提交申请请求.若是审核中,请耐心等待工作人员审核,在审核中状态不能再提交申请请求. 接口代码如下: http请求方式: POST(请使用https协议)https://api.weixin.qq.com/shakearound/account/register?access_token=ACCESS_TOKENPOST数据格式:json POST数据例子: { "name&q

  • HTML5使用DeviceOrientation实现摇一摇功能

    HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.deviceMotion:封装了运动传感器数据的事件,可以获取手机运动

  • Android实现摇一摇功能

    实现"摇一摇"功能,其实很简单,就是检测手机的重力感应,具体实现代码如下: 1.在 AndroidManifest.xml 中添加操作权限 2.实现代码 package com.xs.test; import android.app.Activity; import android.hardware.Sensor; import android.hardware.SensorEvent; import android.hardware.SensorEventListener; impo

  • Android编程使用加速度传感器实现摇一摇功能及优化的方法详解

    本文实例讲述了Android编程使用加速度传感器实现摇一摇功能及优化的方法.分享给大家供大家参考,具体如下: 目前很多应用已经实现了摇一摇功能,这里通过讲解该功能的原理及实现回顾一下加速度传感器的使用: 1.首先获得传感器管理器的实例 sensorManager = (SensorManager) context.getSystemService(Context.SENSOR_SERVICE); 2.通过传感器管理器获得加速传感器 accelerateSensor = getSensorMana

  • Android利用传感器实现微信摇一摇功能

    本文实例为大家分享了Android微信摇一摇功能的实现方法,供大家参考,具体内容如下 import java.util.ArrayList; import java.util.List; import java.util.Random; import android.app.Activity; import android.app.Service; import android.content.res.Resources; import android.hardware.Sensor; impo

  • Android 微信摇一摇功能实现详细介绍

    Android 微信摇一摇功能实现,最近学习传感器,就想实现摇一摇的功能,上网查了些资料,就整理下.如有错误,还请指正. 开发环境 Android Studio 2.2.1 JDK1.7 API 24 Gradle 2.2.1 相关知识点 加速度传感器 补间动画 手机震动 (Vibrator) 较短 声音/音效 的播放 (SoundPool) 案例: 我们接下来分析一下这个案例, 当用户晃动手机时, 会触发加速传感器, 此时加速传感器会调用相应接口供我们使用, 此时我们可以做一些相应的动画效果,

随机推荐