首先：最重要的是 该设备需要支持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元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
