利用uniapp实现手机摇一摇H5项目
最近做项目遇到一个需求，就是在微信小程序中嵌入一个H5页面，这个页面主要是一个活动页面功能也就是一个摇一摇抽奖，原本我以为是一个很简单的东西，但是最后做出来头发又是掉了一层,希望我的这篇文章可以帮助到一些朋友。
其实H5实现摇一摇效果，我查了好多资料，不管是使用shake.js还是一些别的第三方库，都是使用了HTML5的DeviceOrientation特性。它提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）但DeviceOrientation特性的一个问题就是兼容性，特意查了DeviceOrientation在移动端的兼容性，发现并没有Chrome，而移动端浏览器大多都是Chrome内核。
既然不支持那只好在想别的办法，最后我想想到了调用HTML5PLUS中的API直接调用手机的硬件能力，可行是可行，可是如果这样做最后必须把它打包成APP，还是不可取，最后灵光一现，uniapp既可以调用手机硬件能力，又可以发布成H5,简直完美，然后赶紧去查了uniapp,查看了API之后，发现了能解决我问题的API，就是这个。
最后使用uniapp写了一遍，发布成H5，部署到服务器上测试，完美解决！没有任何浏览器兼容问题，不过需要注意的是必须使用https访问，否则还是有问题。
利用uniapp实现手机摇一摇H5项目相关推荐
- 基于uni-app+uni ui考勤打卡H5项目 定位打卡，日历打卡记录，考勤记录，绩效（地图位置）等
基于uni-app+uni ui考勤打卡H5项目 功能点:定位打卡,迟到,外勤,日历打卡记录,请假,出差,补卡,考勤记录,绩效(地图位置)等: 前言 提示: 1.该项目所有数据基于前端为数据,后期可直 ...
- android+腾讯地图h5,在uniapp H5项目中使用腾讯地图sdk
这里主要针对的是H5,小程序或app都有现成的sdk可以使用: 本人是用uniapp在做微信公众号的h5页面,其中需要把经纬度信息转化成文字描述的位置信息,在腾讯地图开发平台上申请了一个key,然后下 ...
- H5项目如何打包成APP
开发uni-app的编辑器HBuilderX可以将H5项目打包成APP,相信很多小伙伴还不知道这个功能.下面将介绍下如何将H5打包成APP. HBuilderX下载链接:https://www.dcl ...
- H5监听摇一摇和手机倾斜事件（重力感应）
摇一摇功能(DeviceMotion) 摇一摇功能是很多原生APP都可以实现的功能,如微信中的摇一摇找好友,QQ音乐中的摇一摇换歌等.它们都是利用了手机加速传感器提供的API,当监听到手机加速变化的事 ...
- 摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:if (win ...
- 苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖，html5devicemotion...
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion 摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的 ...
- 利用html5实现类似微信的手机摇一摇功能
利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2 ...
- php用手机摇一摇,H5做出手机摇一摇功能的实现步骤
今天教大家用HTML5来在网页里实现一个很炫酷的功能,手机摇一摇.如果你之前做过手机端的开发,可能对于这样的功能非常了解.但是下面,我们将在Web上首次实现这个功能. 方向事件deviceorient ...
- 利用html5实现类似微信的手机摇一摇功能-计算摇动次数
1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2. deviceMotion:封装了运动传感器数据的事件 ...
- 利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (wi ...
最新文章
- Awesome Projects (汇聚全球所有
- 架构设计之「服务限流」
- java se 6u111_linux下查看已经安装的jdk 并卸载jdk
- Queue接口中add()与offer()，remove()与poll()，element()与peek()方法区别
- jzoj3301-[集训队互测2013]家族【并查集,暴力】
- DirectXInput
- ups一直响是什么原因_UPS的完整形式是什么？
- 装修时水电如何开槽？沟槽如何封堵？有哪些防止沟槽开裂的方法
- 基于STM32开发板和Web网页的蔬菜大棚温湿度、光照等变化的动态柱形图表
- 超详细的抖音养号上热门技巧，看完这一篇就够了
- 蓝牙耳机连接 win10音量异常
- 数据分析神器Alteryx
- 好用的浏览器，与Google Chrome同内核
- c语言程序 强制关机程序,怎么用C或者C++编写一个电脑强制关机程序
- mysql中高阶玩法系列（六）
- java 三点定位_GPS定位系统(三)——Java后端
- js typeof undefined
- 马小妹的Android之旅——Android四大基本组件之Activity
- mysql常用命令orderby_mysql常用命令小结
- 阿里首席风险官刘振飞：聚安全人之力 为全社会赋能