H5页面实现摇一摇(微信+APP内嵌入使用)
需求要求实现页面点击按钮摇一摇或者摇一摇手机触发抽奖。
页面会展示在微信小程序+APP中;
我在网络上找了一些方法,微信sdk中并未提供摇一摇的方法给H5页面调用,所以我采取以下方法:
h5代码判断运行环境是APP还是非APP
1.APP内
保险起见,调用APP提供给H5这边的摇一摇方法(要和APP端的开发人员协商),h5直接调用方法,摇一摇触发之后要关闭这个摇一摇方法,不然抽完奖之后摇一摇手机还是会触发。
2.非APP内
使用shake.js,代码如下:
/** Author: Alex Gibson* https://github.com/alexgibson/shake.js* License: MIT license*/(function(global, factory) {if (typeof define === 'function' && define.amd) {define(function() {return factory(global, global.document);});} else if (typeof module !== 'undefined' && module.exports) {module.exports = factory(global, global.document);} else {global.Shake = factory(global, global.document);}
} (typeof window !== 'undefined' ? window : this, function (window, document) {'use strict';function Shake(options) {//feature detectthis.hasDeviceMotion = 'ondevicemotion' in window;this.options = {threshold: 15, //默认摇动阈值timeout: 1000 //默认两次事件间隔时间};if (typeof options === 'object') {for (var i in options) {if (options.hasOwnProperty(i)) {this.options[i] = options[i];}}}//使用date防止重复调用this.lastTime = new Date();//accelerometer valuesthis.lastX = null;this.lastY = null;this.lastZ = null;//创建自定义事件if (typeof document.CustomEvent === 'function') {this.event = new document.CustomEvent('shake', {bubbles: true,cancelable: true});} else if (typeof document.createEvent === 'function') {this.event = document.createEvent('Event');this.event.initEvent('shake', true, true);} else {return false;}}// toast提示function showToast(str){$('.toast-box').html(str)$('.toast-box').show()var tempTimeOut = setTimeout(function(){$('.toast-box').html('')$('.toast-box').hide()clearTimeout(tempTimeOut)},5000)}//重置时间计时器Shake.prototype.reset = function () {this.lastTime = new Date();this.lastX = null;this.lastY = null;this.lastZ = null;};//开始监听 devicemotionShake.prototype.start = function () {this.reset();var ua = navigator.userAgent.toLowerCase();console.log('~~~~this.hasDeviceMotion~~~~~~~',this.hasDeviceMotion)if (this.hasDeviceMotion) {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,".");var arr=version.split(".");console.log('获取手机系统版本',version+'~~~~~~~'+arr[0]+"."+arr[1]+"."+arr[2]) //获取手机系统版本console.log('比较1111:',arr[0]>12,arr[1]>2,arr[0]>13||(arr[0]>12&&arr[1]>2))if (arr[0]>13||(arr[0]>12&&arr[1]>2)) { //对13.3以后的版本处理,包括13.3DeviceMotionEvent.requestPermission().then(permissionState => {if (permissionState === 'granted') { //已授权window.addEventListener('devicemotion', this, false);//摇一摇} else if(permissionState === 'denied'){// 打开的链接不是https开头showToast('当前IOS系统拒绝访问动作与方向,请"点击摇一摇按钮"参与活动')// console.log("当前IOS系统拒绝访问动作与方向。请退出微信,重新进入活动页面获取权限。")}}).catch((err)=>{showToast('当前IOS系统拒绝访问动作与方向,请"点击摇一摇按钮"参与活动')// showToast('苹果设备申请摇动权限')// ios13granted();// layer.open({// content: '<div style="height: 50px; text-align: center; padding-top: 20px">苹果设备申请摇动权限</div>',// btn: '允许',// // style: 'padding: 50px 30px;',// shadeClose: false,// yes: function(index){// ios13granted();// layer.close(index);// }// })});}else{ //13.3以前的版本console.log('ios13.3以前的版本')window.addEventListener('devicemotion', this, false);}} else {window.addEventListener('devicemotion', this, false);}}};function ios13granted() {if (typeof DeviceMotionEvent.requestPermission === 'function') {DeviceMotionEvent.requestPermission().then(permissionState => {if (permissionState === 'granted') { //已授权window.addEventListener('devicemotion', this, false);//摇一摇// var myShakeEvent = new Shake({// threshold: 12// });// myShakeEvent.start();// window.addEventListener('shake', function () {// start();// }, false); //摇一摇} else if(permissionState === 'denied'){// 打开的链接不是https开头showToast('当前IOS系统拒绝访问动作与方向,请"点击摇一摇按钮"参与活动')console.log("当前IOS系统拒绝访问动作与方向。请退出微信,重新进入活动页面获取权限。")}}).catch((error) => {showToast('当前IOS系统拒绝访问动作与方向,请"点击摇一摇按钮"参与活动')console.log("请求设备方向或动作访问需要用户手势来提示")})} else {// 处理常规的非iOS 13+设备console.log("处理常规的非iOS 13+设备")}}//停止监听 devicemotionShake.prototype.stop = function () {if (this.hasDeviceMotion) {window.removeEventListener('devicemotion', this, false);}this.reset();};//计算是否触发摇动Shake.prototype.devicemotion = function (e) {var current = e.accelerationIncludingGravity;var currentTime;var timeDifference;var deltaX = 0;var deltaY = 0;var deltaZ = 0;if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {this.lastX = current.x;this.lastY = current.y;this.lastZ = current.z;return;}deltaX = Math.abs(this.lastX - current.x);deltaY = Math.abs(this.lastY - current.y);deltaZ = Math.abs(this.lastZ - current.z);if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) {//calculate time in milliseconds since last shake registeredcurrentTime = new Date();timeDifference = currentTime.getTime() - this.lastTime.getTime();if (timeDifference > this.options.timeout) {window.dispatchEvent(this.event);this.lastTime = new Date();}}this.lastX = current.x;this.lastY = current.y;this.lastZ = current.z;};//事件处理Shake.prototype.handleEvent = function (e) {if (typeof (this[e.type]) === 'function') {return this[e.type](e);}};return Shake;
}));
在h5页面内引入
<script type="text/javascript" src="shake.js"></script>
//创建实例var myShakeEvent = new Shake({threshold: 12 // 摇动阈值});// 监听设备动作myShakeEvent.start();//添加一个监听事件window.addEventListener('shake', function () {// start();console.log('摇一摇')}, false);
注意:
1、本地联调的时候这个方法不会触发,因为h5页面的链接开头必须是https://…才会触发(这个特别坑),而且微信调整了政策了,h5页面的链接必须使用ssl加密的证书。
2、在ios13.3之前的版本中可以触发摇一摇,之后的版本需要兼容,需要制作一个让用户能手动点击的弹框,才能使用户授权动作与方向的权限。(需使用https协议)
如果实在不触发,那就让设计师增加一个点一点的样式,晃动手机实在不触发那就通过点一点触发
3.关于摇一摇音效
如果是调用的APP抛出的方法,那可能是自带音效的(要看APP开发人员是怎么定义的方法)
不是调用的APP抛出的方法的话,那可以通过以下方式触发:
音效:https://download.csdn.net/download/tt18473481961/87512465
<audio preload="" id="sing"><source src="data:images/sing.mp3" type="audio/mp3"></audio>#sing {display: none;
}var sing=document.getElementById("sing");sing.play();
4.关于部分ios手机摇一摇调用play()方法没有声音
绑定一个touchstart事件(可以绑给最先点击的元素,只用一次就移除的最佳,绑给touchend理论也可以,不过要click那样的才有效,滑动后才touchend的不起作用。。。),调用.load()
,之后在其他方法中调用.paly()
就可以顺利的播放声音了。
var sing=document.getElementById("sing");
$(".start").on("touchstart",function(){ // 为了解决iOS手机不点击摇一摇按钮直接调play()不发出声音console.log('touchstart-播放音频',document.getElementById("sing"))sing.load()sing.pause()
})
// 在其他方法中嗲用音频播放
sing.play(); // 播放声音
H5页面实现摇一摇(微信+APP内嵌入使用)相关推荐
- H5页面唤醒高德地图|百度地图App
H5页面唤醒高德地图|百度地图App 移动端H5页面唤醒app,若唤醒失败则跳转到应用商城下载. 唤醒前需要检测当前操作系统,不同的操作系统用不同的协议 我这里的需求是唤醒失败就跳转到网页版的地图,若 ...
- 促活用户新方式:在app内嵌入小游戏
当一个app产品上线后,就要长期开展运营工作,因为app能否持续生存且带来收益,取决于运营推广的效果.如果没有用户流量,那么这个app就是一个空壳,因此app运营工作就显得极为重要. 常见的运营推广方 ...
- h5页面启动安卓应用_H5唤醒App方式汇总
H5唤醒App方式汇总 最近在做扫码之后的h5页面唤醒App的功能,做下记录 唤醒方式列表URL Schemes chrome intent ios UniversalLink / android a ...
- H5分享h5页面、小程序到微信
1.H5分享h5页面(卡片链接形式)到微信 先去微信公众平台填写js接口安全域名 本来想用微信开发js-sdk的,但是做了半天好像没啥效果 概述 | 微信开放文档 (qq.com) 引入js文件:ht ...
- html 中返回上一步页面,(移动端)在APP中嵌入H5网页,返回上一步返回APP菜单首页...
H5页面中:返回上一步固定写法(前端实现:使用vue框架的返回上一步语法即可): methods:{ backforward(){ this.$router.back(-1); // 返回上一步 }, ...
- 如何从短信链接打开跳转到微信App内
运营做了一个活动,准备发送短信推广出去,结果问题来了,用户接收到短信后,点击短信里的链接,默认是用的系统浏览器打开的,但我们的活动是用微信支付啊~~~微信支付啊~~~ 系统浏览器里不支持啊!!! 如何 ...
- 浏览器打开微信公众号h5页面,增加cookie绕过微信授权登录
from selenium import webdriver from time import sleepdriver = webdriver.Chrome() #插入cookie需要与cookie相 ...
- 在H5页面中跳转到地图App,或者在本地App中加载的H5页面跳转到地图App,唤起App进行导航
在H5中使用地图导航 1.腾讯地图: 2.高德地图: 3.百度地图: 1.腾讯地图: 调用方式: http://apis.map.qq.com/uri/v1/marker?marker=coord:l ...
- h5页面点击进入关注微信公众号
原来 我以为是跳转不了的,后来发现自己太浅薄了.为了以后不忘记,进行一下记录,适合我这样的初学者.如果有大佬看到需要补充的,不胜感激 1.进入到你要跳转的公众号页面中,把链接复制发到pc微信上 2.电 ...
最新文章
- 淘宝天猫网站停止支持IE6、IE7浏览器,你还在用xp吗?
- 算法--------数组--------容纳最多的水
- VMware HA实战攻略之五VMwareHA测试验收
- cgroup代码浅析(2)
- 【Python】函数外定义变量并在函数内进行更新
- C语言课后习题(64)
- MFC 的几个常用函数,用来计算文件大小,下载速度,转换时间的
- 《Java核心技术 卷II》笔记——(12)安全加密
- J2EE框架技术(持续更新)
- Python Selenium IE 上传文件和 处理网页对话框showModalDailog模态对话框
- 微信小程序获取用户信息(附代码、流程图)
- ZYF loves set (lca+转化)
- 2020牛客国庆集训派对day1 ------ ABB(马拉车裸题 + 条件判断)
- OpenCV_basis
- postman生成时间戳,未来时间戳
- SuSe软件安装命令
- 二级c语言考试系统安卓,无忧考吧二级c语言考试系统下载
- 关于Aza-BODIPY染料系列,Aza-BODIPY-695/725
- 根据输入的正整数y所代表的年份,计算输出该年份是否为闰年 闰年的判断标准:
- 启科php淘宝客系统,关键词优化难易分析_SEO优化难度分析 - 站长工具
热门文章
- 南昌理工学院计算机科学与技术分数线,南昌理工学院2021年各省录取分数线预测 历年文理科分数线...
- 使用alpine镜像封装nginx 及php镜像
- 51单片机计算机设计报告,基于51单片机的计算器设计与制作.docx
- 计算机应用基础答案2010,计算机基础(Excel2010)试题及答案
- symbian os:描述符
- 用MATLAB进行大地测量学上的子午线弧长计算
- 基于LabView条件结构的LED数码管
- Win7 64位安装VS2010旗舰版出现错误...Microsoft Visual Studio 2010 64bitPrerequisites (x64)
- Python学习笔记:第四站 往哪走
- C语言gets_s, _getws_s函数了解