首先:最重要的是 该设备需要支持H5的新特性DeviceMotion和DeviceMotionEvent 。...devicemotion h5提供的dom事件,提高设备的加速度的信息,其中包含 x,y,z 三个坐标方向的加速度 DeviceMotionEvent 返回设备的有关加速度和旋转的信息 //运动事件监听
<script type="text/javascript"> var color = new Array('#fff', '#ff0', '#f00', ...
微信推出后,他的摇一摇功能非常的火爆,没事来微信摇一摇加加好友,我们可不可以借鉴一下微信的摇一摇功能,让手机访问网页的时候,只要手机摇一摇,网页背景就会自动随时换一个网页背景。...具体想要用摇一摇的功能思路已经确认的了,现在就是来实现代码的了。我们现在是用HTML5实现摇一摇的功能。...来实现更多摇一摇的功能。...下面我再分享另外一段js实现的方法,大家可以对比一下: 用javascript实现手机摇一摇 if(navigator.userAgent.indexOf('iPhone')>-1) { var...- last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { alert('摇一摇
公司准备开年会了,年会活动用了一套别人的系统,根据测试,有些游戏的摇一摇功能在IOS上无法使用,为了修复该功能,踩了一些坑,特此记录如下: 1....="content-security-policy"> IOS系统中H5...页面实现摇一摇功能 button { width: 200px;...三个方向上次的值 var lastX, lastY, lastZ; // 上一次摇动的时间 var lastTime = 0; // 用户摇一摇的功能
《Android开发笔记(四十四)动态UI事件》)、媒体播放事件(参见《Android开发笔记(五十七)录像录音与播放》)、浏览器加载、交互与下载事件(参见《Android开发笔记(六十四)网页加载与JS...这个功能最有名的应用就是微信里的“摇一摇”了,用户通过摇晃手机来寻找周围的人;类似的业务还有摇奖、玩游戏等等。..."); //系统检测到摇一摇事件后,震动手机提示用户 mVibrator.vibrate(500); } } 前置摄像头的感应 博主的手机比较廉价,支持的感应器不多...代码示例 下面是摇一摇、光线与距离感应的效果截图: ?..."); //系统检测到摇一摇事件后,震动手机提示用户 mVibrator.vibrate(500); } } } else if (sensorType == Sensor.TYPE_LIGHT
图片懒加载 图片懒加载也叫图片延迟加载。通常用于图片比较多,并且页面高度有好几屏的网页。...利用缓存 缓存分很多种,有客户端缓存和服务端缓存,客户端缓存主要包括http缓存和h5离线缓存;服务端缓存主要包括redis缓存和CDN缓存。...使用cdn来存放html、css、js、图片等前端静态资源,也是一种缓存优化方式。 cdn是一个为了使用户就近获取内容,提高资源访问速度的一种内容分发网络,主要由内容分发技术和内容缓存设备组成。...举个例子:2015年春晚的摇一摇红包。我们来看下摇一摇红包里面有几个功能: 摇红包->拆红包->红包实时入账 这个功能一开始时,逻辑是这样的:用户摇一摇,拆完红包后,红包是实时入账的。...但是由于参与人数较多,很可能会造成网络拥塞,许多用户可能连摇一摇红包界面都进不去,为了减少请求次数,缓解服务器压力,后来采取了优雅降级的方案,把红包实时入账功能改成异步的形式,红包金额在7天之内入账,这样金额就可以分批入账了
1摇一摇效果图 效果如下:界面有点丑,勿吐槽哈~关键是后面我们如何去实现这功能。 ?...3如何使用传感器 因为本文是为了实现一个仿微信摇一摇的功能,而实现这个功能用到的是加速度传感器。所以我们就以加速度传感器来讲解具体的实现过程。...作为程序员,直接上微信摇一摇的核心代码,相信可以更直接了当的介绍传感器的具体用法,程序中重点的语句,我也已经注释在代码后面。...@Override public void onSensorChanged(SensorEvent event) { //判断条件成功后,执行摇一摇的效果...onSensorChanged: "+x+":"+y+":"+z); if (x>10||y>10||z>10) { //摇一摇成功
接下来你将会看到这些玩法: 基于传感器: 类别 玩法或适用场景 陀螺仪、重力感应 体感游戏、摇一摇、全景图/AR转换角度、转动手机制造视差效果 地理位置 提供周边生活服务、与运动结合、上班打卡功能、外勤人员的工作监控...除上表外还有一些目前还不太能用的H5能力,如手机震动、光线传感器、距离传感器等,由于边幅原因,暂不作展开介绍,读者可以自行查找相关资料。部分案例如没有贴上二维码,是因为该案例已下线了。...陀螺仪、重力感应 这类交互在体感游戏中比较常见,如控制射箭的方向、挥剑、打乒乓球等,而在H5中则可用于摇一摇、控制赛车左右前进、检查手机是否平躺/竖直、全景图/AR转换角度等,也可以用于制造视差效果(如王者荣耀的登录界面...案例: 降温摇可乐: 该H5在模拟摇可乐的情景,玩家需要不停地摇动手机,尽快使可乐喷出来。个人认为可以换另一种玩法,让朋友互相传递手机摇,谁摇爆了可乐就算输。 ?...手势操作可用于放大查看图片、对图片进行拖拽/放大/旋转等编辑、手势解锁、也可以用于游戏上,如拼图游戏时拖拽、旋转拼图碎片。 在实现上,H5有一个手势操作库hammer.js,可以实现常用的手势操作。
上一篇写了怎样在线匹配歌词,http://blog.csdn.net/huweigoodboy/article/details/39878063,如今来讲讲摇一摇功能开发。...相同用了一个Service去实现摇一摇。...一,加速度感应器 在这里须要设置一个速度阈值和时间间隔,控制一定的时间间隔才干触发第二次震动,还有感受速度太小也不去onShake()。 1)得到sensorManager。...vibrator.vibrate(500);震动多少毫秒 或者设置一个震动周期的数组 vibrator.vibrate(new long[]{100,200,100,200}, -1); //...停止,震动。
waveAnimation .waveBottom { animation: move_wave 2s linear infinite; } 页面布局 为了让用户进来一眼就能知道是可以摇一摇的...,我们需要加一个摇一摇的动图,放在最显眼的位置。...摇一摇,摇到什么吃什么 进入页面就需要开始监听用户摇动手机的动作,所以需要把监听代码放到 onShow 生命周期中。...监听摇一摇的同时,为了避免跳出当前页之后还在监听,所以需要判断是否停留在当前页,所以需要用到 getCurrentPages方法获取当前页的路由。...摇出随机值之后,需要给用户一个反馈信息,所以用了 uni.vibrateLong 方法来给一个长震动,让用户手机震动500ms 随机值可以自定义,想吃什么就添加什么,摇到什么就吃什么!
不过他在微信里其实不算新鲜技术,早在“摇一摇”功能上线时,微信就支持通过摇一摇找附近IBEACON设备,只不过现在结合到小程序的开发能力中的话,这想象空间就突然别的特别大了。...(至于是什么,你留言我就告诉你) 震动API 官方发文没有提到这个API,这个API的意思是让小程序调用手机的震动命令,支持短震(15ms)API和长震(400ms)API,可以自定义调用,也就是说可以做到...,反复震、规律震、不规律震,反正可以让你的手机变成一个振动的棒了,今天520,不研究表白,就研究震动呗!...正经,既然能震动的话,有些有意思的应用能用小程序玩了,大家还记得这个么? ? 只是抛砖引玉一下,有什么更好的想法有待网友们挖掘。...小程序导出的思维导图应该不会那么糊了 提供了一个可以保存联系人信息到系统通信录的API 现在可以预授权了 现在保存图片可以直接调用接口进行保存,不用先预览图片再长按保存了 现在还能保存视频到手机里了 修正了一大堆
, 其实js发展这么多年,常见的功能在github上都是可以找到的, 下面我就给大家拿出我收藏多年的"救命插件"!...excel-js (xlsx转换) var workbook = XLSX.utils.table_to_book(document.getElementById('table')); https:...//github.com/SheetJS/js-xlsx jsPDF (生成pdf) var doc = new jsPDF(); doc.text('Hello world!'...(监听手机震动) var myShakeEvent = new Shake({ threshold: 15, timeout: 1000 }); window.addEventListener...('shake', ()=>{ // 摇晃触发 }, false); https://github.com/alexgibson/shake.js提示: 适合用来做"摇一摇"的活动页面活游戏 dayjs
H5营销活动平台采用P3-Weixin插件开发框架,开发微信H5活动,插件以JAR形式存在,支持独立部署,解决H5活动,用户量大,并发高的问题。...(提供成熟的分布式解决方案) 特点 采用插件模式开发H5营销活动,独立部署,解决微信活动大用户、高并发问题。...微信H5活动插件列表 微信砍价活动 P3-Biz-gzbargain 摇一摇送卡券 P3-Biz-shaketicket 九宫格活动 P3-Biz-jiugongge 斧头帮砍价...摇一摇送卡券-效果图 ? 开发文档 ?...jeecgframework/p3/cg/util/CodeToolUtil.java 2.配置文件:P3-Web/src/main/resources/p3-cg-config.properties H5
,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。...var speed = res.speed; // 位置精度 var accuracy = res.accuracy; } }); 8.摇一摇周边...//开启查找完成后的回调函数 complete:function(argv){ } }); 备注:如需接入摇一摇周边功能,请参考:申请开通摇一摇周边 (2)...wx.onSearchBeacons({ //回调函数,可以数组形式取得该商家注册的在周边的相关设备列表 complete:function(argv){ } }); 备注:上述摇一摇周边接口使用注意事项及更多返回结果说明...,请参考:摇一摇周边获取设备信息 9.界面操作 (1).关闭当前网页窗口接口 wx.closeWindow(); (2).批量隐藏功能按钮接口 wx.hideMenuItems({ // 要隐藏的菜单项
> arg0, View view,int position, long id) ) 2、新建listview0.xml文件 放置一个ImageView,用于显示图片。...Toast.makeText(this, "有待开发", Toast.LENGTH_LONG).show(); break; } return true; } 番外:添加摇一摇换图片功能...2、获取系统服务 在OnCreate函数中 //传感器 sensorManager = (SensorManager)getSystemService(SENSOR_SERVICE); //震动...SensorManager.SENSOR_DELAY_NORMAL); 4、解除监听 重载OnPause函数 sensorManager.unregisterListener(this); 5、摇一摇响应事件...= changeImg(imgs); imageView.setImageDrawable(drawable); /*响应事件结束*/ //摇动手机后,再伴随震动提示
02 QQ 空间小游戏上线双人 PK 玩法 腾讯再对 H5 小游戏出手布局,QQ 空间小游戏平台上线双人 PK 玩法。在进入 QQ 空间内小游戏页面后,可以看到首页新增的「双人 PK」模式。...QQ 空间作为最早布局 H5 游戏的国内顶级平台,小游戏月活跃已突破 2 亿,上线新玩法后势必引入更多流量。 ?...这里有四条可能的出路 微信小程序 输入框限制字数 微信小程序 for循环添加样式1 微信小程序 类似弹出菜单特效,从右向左滑出 微信小程序 从本地相册选择图片或使用相机拍照chooseImage()和预览图片...【附源码】小程序初窥之简单查单词 违规小程序:封停超2000个 多涉售假涉黄违规经营 新增“社交红包”类目的通知 微信小程序之状态管理B 微信小程序之小技能篇(一) 微信小程序之状态管理A 小程序:图片和文字合成一张图片...深度剖析,张小龙微信背后的产品价值观 产品案例:小程序的登录注册体系设计 【每日出击运签】小程序“踩坑”总结 第一个摇一摇小程序?在Nodes里摇一摇 日活过亿的跳一跳奇迹能否复制?
/plugin/layui/css/layui.css" rel="stylesheet"> 2...--摇一摇内置脚本--> function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity...} last_x = x; last_y = y; last_z = z; } } //监听摇一摇的动作...--摇一摇内置脚本--> function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity...} last_x = x; last_y = y; last_z = z; } } //监听摇一摇的动作
微信正在加速编织它的商业生态网络,在微信用户、微信支付均已形成规模之后,微信又开辟了一个新战线:摇一摇周边。昨天我定了一杯咖啡送货员直接拿着一个设备,让我摇一摇抢红包,这是微信最新推出的功能。...看新闻报道,五一节前,在上海港汇恒隆广场购物中心,微信与SK-II推广了“摇一摇”周边功能,双方还在广州广百百货、北京王府井举办相似活动,以“摇一摇”做本地O2O闭环电商的微信商城上线在即。...原始动作进化新花样 用户在商场特定区域摇一摇之后,就可以收到商家推送的商品、活动、优惠信息,这些信息与微信H5、公众号、支付、卡券等已有商业内容打通。...从最初小众的配对找人到公众场所的加好友,到春节期间的摇一摇红包、摇一摇电视节目,再到今天摇一摇附近的商家,“摇一摇”正在被赋予更多可能性。...现在看来,摇一摇,或者别的方式比如NFC同样被纳入考虑范围,谈不上谁取代谁,但至少在某些场景下摇一摇更有效。
今天我们就来说一下H5手机页面的特效吧;都2022年还H5?没办法H5实在太深入人心了,特别是在微信开放了外连接H5又变得重要了。所以就说一下最近开发H5的一些经验。...3、手机的重力感应与陀螺仪应用 现在能上H5的基本都是智能手机,一般情况下都带有重力感应与陀螺仪;那这2个有什么用?可以感应到手机的角度和移动的速度。...举个例子:摇一摇其实就是用到这2个的数据。...这个有一个开源的组件Parallax.JS【http://matthew.wagerfield.com/parallax/】在这里我就不展开讲解了,感兴趣的可以留言或自己去看看,这个我也用过一下,感觉比较容易上手和实现...最后说一下吧,小的H5应用直接上jq或jq mobile。。。好维护;当然现在流行VUE也行,不过感觉vue有点广。。见人见智吧。
导出网页或者pdf更容易分享 支持18种转场动画,可以设置单页动画 支持单页背景图片 多种模式:overview模式,双屏模式,socket远程控制,摇一摇换页,使用ipad控制做分享更酷哦~ 可以使用画板...socket控制 方法一:使用start命令行 nodeppt start -c socket 在页面按键【Q】显示控制url的二维码和控制链接(需要隐身窗口打开),手机上可以使用左右touch滑动和摇一摇切换下一页...controller=socket 在页面按键【Q】显示控制url的二维码和控制链接(需要隐身窗口打开),手机上可以使用左右touch滑动和摇一摇切换下一页 启用postMessage控制 默认使用...zoomin [slide] # 封面样式 ## h1是作为封面用的,内部的都用h2 [slide style="background-image:url('/img/bg1.png')"] # 背景图片...极客模式:查看源码的nodeppt.js,相信你会找到牛逼的手机互动(摇一摇换页)功能 查看项目目录ppts获取更多帮助信息 更多demo,查看 ppts 目录的demo 快捷键 Page:
领取专属 10元无门槛券
手把手带您无忧上云