H5摇一摇 iOS设备不灵敏

移动端H5制作安卓和IOS的坑持续更新...

移动端H5制作安卓和IOS的坑持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来,持续收集更新,于己利人,抛砖引玉. 1. ios系统手机无法自动播放BGM 这个是苹果系统限制,默认不允许自动播放音频,往往需要点一下触发play()事件才能播放. 那么我们在页面onload后触发播放事件: document.getElementById('music').play(); 到这里一

h5页面在不同ios设备上的问题总结

1.日期问题对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种类型的时间. `let date = new Date('2019-02-28 18:33:24'); // null` 解决方案是,转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了 replace(/\-/g, "/") 2.键盘收起,页面卡住,不回落 ios12上,发现键

H5 DeviceMotionEvent 事件制作“摇一摇效果”

摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件先讲怎么使用,具体的原理在后边补充第一步:捕捉重力加速度 var acceleration = eventData.accelerationIncludingGravity; 第二步:监听函数并执行. var SHAKE_THRESHOLD = 800; var last_update = 0; var x, y, z, last_x, last_y, last_z; if ((window.DeviceMotionEv

H5实现摇一摇技术总结

摇一摇遇到的问题一.如何对摇晃效果进行反馈刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像微信的摇一摇一样,摇晃过程中,会有上下移动的动画,这里加入了周围金币做跳跃运动的动画. 二.摇晃不灵敏,需要用力摇晃手机才行摇晃灵敏度是个不太好控制的量,即要求不是很灵敏,比如,不能稍微碰一下就摇晃了,也不能使劲摇才能摇中,这就需要对X.Y.Z轴上的加速度进行合理利用,这里是几种

H5摇一摇遇到的问题

一.如何对摇晃效果进行反馈刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像微信的摇一摇一样,摇晃过程中,会有上下移动的动画,这里加入了周围金币做跳跃运动的动画. 二.摇晃不灵敏,需要用力摇晃手机才行摇晃灵敏度是个不太好控制的量,即要求不是很灵敏,比如,不能稍微碰一下就摇晃了,也不能使劲摇才能摇中,这就需要对X.Y.Z轴上的加速度进行合理利用,这里是几种网上常见的处理方式

iOS开发传感器（加速计、摇一摇、计步器）

一.传感器 1.什么是传感器传感器是一种感应\检测周围环境的一种装置, 目前已经广泛应用于智能手机上传感器的作用用于感应\检测设备周边的信息不同类型的传感器, 检测的信息也不一样 iPhone中的下面现象都是由传感器完成的在地图应用中, 能判断出手机头面向的方向一关灯, iPhone会自动调整屏幕的亮度打电话时, 人脸贴近iPhone屏幕时, 屏幕会自动锁屏... ... 二.各种传感器 1.传感器的类型iPhone内置的传感器有运动传感器\加速度传感器\加速计(Motion/Accelero

iOS开发——高级篇——传感器（加速计、摇一摇、计步器）

一.传感器 1.什么是传感器传感器是一种感应\检测周围环境的一种装置, 目前已经广泛应用于智能手机上传感器的作用用于感应\检测设备周边的信息不同类型的传感器, 检测的信息也不一样 iPhone中的下面现象都是由传感器完成的在地图应用中, 能判断出手机头面向的方向一关灯, iPhone会自动调整屏幕的亮度打电话时, 人脸贴近iPhone屏幕时, 屏幕会自动锁屏... ... 二.各种传感器 1.传感器的类型iPhone内置的传感器有运动传感器\加速度传感器\加速计(Motion/Accelero

用vue 写h5页面-摇一摇

vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目准备插件(包):依赖的第三方的插件(后续会完成如何写vue插件的方法)shake.js ,github地址: https://github.com/alexgibson/shake.js 我使用的github 项目要点赞(现在要养成习惯) 使用:在vue的一个组件里使用这个插件. 接下来我们看这个插件提供的api,灵

IOS中微信摇一摇声音无法播放解决办法

在IOS中第一次调用play方法播放音频会被阻止,必须得等用户有交互动作,比如touchstart,click后才能正常调用,所以可以在摇一摇之前提醒用户点击一下开始游戏的按钮或者给用户一个弹窗,用户点击的时候播放一个超级短的无声音文件,之后替换src,这样再调用play方法就可以了. 代码如下如: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /

h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角.devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标.其还提供了设备在坐标系中的自转速率.若可行的话,事件应该提供设备重心处的加速信息.compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件. 5

HTML5摇一摇（上）—如何判断设备摇动

刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签"的小例子来谈一谈HTML5中如何调用手机重力感应的接口演示demo:"摇一摇,万福签" 什么是重力感应说到重力感应有一个东西不得不提,那就是就是陀螺仪,陀螺仪就是内部有一个陀螺,陀螺仪一旦开始旋转,由于轮子的角动量,陀螺仪有抗拒方向改变的特性,它的轴由于陀螺效应始终与初始方向平行,这样就可以通过与初始方向的偏差计算出实

ios UIWindow 错误使用导致无法接收motionEnded（摇一摇）函数

今天遇到一个问题,第一次运行程序时,- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event函数无法调用,第二次就好了.找了1天,终于找到了原因.在第一次运行时,显示了一个帮助页面,而这个页面当时是使用再加一层UIWindow来实现的,显示时调用了makeKeyAndVisible这个函数,导航结束后,也没有把原始的window设置为key.在ios8上没什么问题,但是在ios9上,原始的window就无法接收mo

iOS开发——高级技术&摇一摇功能的实现

摇一摇功能的实现在AppStore中多样化功能越来越多的被使用了,所以今天就开始介绍一些iOS开发的比较实用,但是我们接触的比较少的功能,我们先从摇一摇功能开始在 UIResponder中存在这么一套方法 - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_0); - (void)motionEnded:(UIEve

iOS摇一摇功能、震动功能、简单的摇动动画、生成二维码图片与发送短信等几个功能

有一个开锁的功能,具体的需求就类似于微信的"摇一摇"功能:摇动手机,手机震动,手机上的锁的图片摇动一下,然后发送开锁指令.需求简单,但用到了许多方面的知识. 1.摇一摇相对这是最简单的功能了. 在viewController的viewDidLoad中加这两句代码,或者在你想开始监听"摇一摇"这个功能的时候,添加这两句代码: // 允许摇一摇功能 UIApplication.shared.applicationSupportsShakeToEdit = true /

H5地理位置信息、微信摇一摇

geolocation window.navigator.geolocation 1.getCurrentPosition() // 获取当前的位置信息 2.watchPosition() // 监视位置变化,和1参数一样 3.clearWatch() // 清除位置监视 1.getCurrentPosition(s, e, p) success回调 (必须) error回调 options参数需要FQ // 特别注意,chrome需要在连上vpn的时候才能获取到 var success =

IOS端的摇一摇功能

//微信的摇一摇是怎么实现的~发现原来 ios本身就支持 //在 UIResponder中存在这么一套方法 - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_0); - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event __OSX_A

H5实现的手机摇一摇

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="status"></div> </body> <script> var shake=4000, last_update=0, count=0, x=y=z=

IOS中摇一摇实现截屏(可实现问题反馈的功能)

有一段时间没有更新博客了,今天更新一篇关于最近工作中用到的一个功能,先简单描述一下:我们知道,测试人员在测试客户端产品时,当出现问题或者BUG的时候,都得先对页面截图,然后从相册中选择截图,加上一段描述放到TD库或者直接通过邮件发给开发人员,以方便开发人员进行修改,过程繁琐.通过下面功能的介绍,您可以很方便的让测试人员遇到BUG的时候,摇一摇设备,然后自动截图并保存到应用的沙盒之中.截图保存到沙盒之后,您可以自定义一个问题反馈的页面,对问题进行描述(描述可使用第三方平台,如讯飞语音,实现语音录入

iOS几个功能：1.摇一摇；2.震动；3.简单的摇动动画；4.生成二维码图片；5.发送短信；6.播放网络音频等

有一个开锁的功能,具体的需求就类似于微信的“摇一摇”功能:摇动手机,手机震动,手机上的锁的图片摇动一下,然后发送开锁指令.需求简单,但用到了许多方面的知识. 1.摇一摇相对这是最简单的功能了. 在viewController的viewDidLoad中加这两句代码,或者在你想开始监听“摇一摇”这个功能的时候,添加这两句代码: // 允许摇一摇功能 UIApplication.shared.applicationSupportsShakeToEdit = true // 并让自己成为第一响应者 s

IOS 摇一摇的方法

● 监控摇一摇的方法 ● 方法1:通过分析加速计数据来判断是否进行了摇一摇操作(比较复杂) ● 方法2:iOS自带的Shake监控API(非常简单) ● 判断摇一摇的步骤:实现3个摇一摇监听方法 ● - (void)motionBegan:(UIEventSubtype)motion withEvent: (UIEvent *)event /** 检测到摇动 */ ● - (void)motionCancelled:(UIEventSubtype)motion withEvent:(UIEven

H5+JS实现手机摇一摇功能

在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息). 而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果. 现在把完整代码记录下: //运动事件监听 if (wi

H5摇一摇 iOS设备不灵敏

热门专题