【工作笔记】微信公众号页面摇一摇+触发音效

需求是微信公众号页面能支持摇一摇且能够触发音效。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
<title>摇一摇</title>
<script src="${ctx}/static/js/jquery-1.10.1.min.js"></script>
<script src="${ctx}/js/jweixin-1.1.0.js"></script>
<script>$(function(){var haveContent = "$!{haveContent}";if(haveContent != "" && haveContent != null){// 换行处理var element = $("#remark");var temp =  element.html().replace(/\n/g,'<br/>');element.html(temp);}
});window.οnlοad=function(){init();}
function init(){//判断移动浏览器是否支持运动传感器事件if(window.DeviceMotionEvent){//添加一个事件监听器window.addEventListener('devicemotion',deviceMotionHandler,false);}else{alert('not support mobile event');}
}function autoPlayAudio(){wx.config({// 配置信息, 即使不正确也能使用 wx.readydebug: false,appId: '',timestamp: 1,nonceStr: '',signature: '',jsApiList: []});wx.ready(function() {document.getElementById('musicBox').play();});
}

// 摇一摇相关
var i = 1;
var f = 1;
var yqcount = 1;var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数window.onload = function(){init();}
var SHAKE_THRESHOLD = 2500;//定义一个摇动的阈值
var last_update = 0;//定义一个变量记录上一次摇动的时间
//定义x、y、z记录三个轴的数据以及上一次触发的时间
var x = 0, y = 0, z = 0, last_x = 0, last_y = 0, last_z = 0;//运动传感器处理
function deviceMotionHandler(eventData){//获取含重力加速var acceleration = eventData.accelerationIncludingGravity;var curTime = new Date().getTime();//获取当前时间戳var diffTime = curTime - last_update;if(diffTime>100){last_update = curTime;//记录上一次摇动的时间x = acceleration.x;//获取加速度X方向y = acceleration.y;//获取加速度Y方向z = acceleration.z;//获取加速度垂直方向var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;//计算阈值if(speed > SHAKE_THRESHOLD){ if(f==1 && yqcount>0){autoPlayAudio();var mid = "${mid}";var state = "${state}";var token = "${token}";f = 0;}   }//记录上一次加速度last_x=x;last_y=y;last_z=z;}
}
</script>
</head>
<body><div class="shake"><div class="shakebox"><img id="shakeimg" src="${ctx}/images_yaoyiyao/yaohand1.png"></div><div class="gets"><a>请摇一摇您的手机</a></div>#if($!{content} != "")<div style="padding: 2rem 1.2rem 1.2rem 2rem;color:#fff;text-align: left;font-size: 0.8em;"><p>活动说明</p>  <p id="remark">$!{content}</p></div>#end</div><div style="display:none;" id="voiceDiv"><audio id="musicBox" preload="load" controls="controls" src="${ctx}/static/music/5018.wav"/></div>
</body>
</html>

其中公众号页面摇一摇方法如上，遇到的问题是ios不能触发<audio>标签的play()方法，网上查找了资料，说ios必须得用户与页面进行交互才能触发，比如点击之类的，安卓手机没有这样的问题。

找了好久，一般的方法都是加监听，但是没用，最终解决方法是引入微信的js，然后在方法中这样写：

function autoPlayAudio(){wx.config({// 配置信息, 即使不正确也能使用 wx.readydebug: false,appId: '',timestamp: 1,nonceStr: '',signature: '',jsApiList: []});wx.ready(function() {document.getElementById('musicBox').play();});
}

这里wx.config涉及的参数不需要正确配置，wx.ready中调用<audio>标签的play()方法，即可在摇一摇的时候触发音效。

【工作笔记】微信公众号页面摇一摇+触发音效相关推荐

关于微信公众号页面获取code进行微信授权登录
关于微信公众号页面获取code进行微信授权登录前言提示:本文章为个人平时开发中的一些坑,对于新手可以耐心看一下,如果您感觉可以的话,请点个小星星再走吧,多谢了~~~ 提示:以下是本篇文章正文内容( ...
微信公众号页面模版怎么添加文章推荐功能
微信公众号中发布的文章可以添加推荐的文章,该怎么添加文章推荐功能呢?下面我们就来看看详细的教程. 微信公众号页面模版怎么添加文章推荐功能? 1.登录微信公众平台,选择"功能"--& ...
微信公众号页面如何跳转至关注公众号页面
微信公众号页面如何跳转至关注公众号页面 1.获取微信公众号biz字段 a.点击公众号历史文章,在浏览器中打开 b.鼠标右键,查看网页源代码 c.复制红框的字段即为biz字段 2.拼接biz字段成完 ...
vue微信公众号页面分享
vue微信公众号页面分享 utils=>share.js const wx = require("weixin-js-sdk"); // 这块因为我们业务是必须在公众号里面的 ...
微信公众号页面跳转手机QQ
微信公众号页面跳转手机QQ mqqwpa://im/chat?chat_type=wpa&uin="+qqNum+"&version=1 此代码只能在手机浏览器点击 ...
移动端微信公众号页面开发中使用了footer标签导致页面错位
移动端微信公众号页面开发中使用了< footer>标签导致页面错位之前也用过这个标签没出现过此类问题在微信开发者工具中发现把footer 改成div 样式就正常了
微信公众号页面支付接口java,[Java教程]微信公众号支付（三）：页面调用微信支付JS并完成支付...
[Java教程]微信公众号支付(三):页面调用微信支付JS并完成支付 0 2015-09-15 15:00:30 一.调用微信的JS文件 1.首先要绑定[JS接口安全域名],"公众号设置&q ...
H5页面跳转关注微信公众号页面
实现点击就跳转到关注公众号的页面,如下图:如果已关注,就会是发消息,如果未关注,发消息的按钮就会是关注实现步骤: 1.登录微信公众号后台,F12打开网页调试模式 2.打开Sources,搜索:uin ...
如何在微信中(微信公众号页面)给Vue单页应用设置标题
楼主最近在微信公众号H5页面,刚好遇到了这个问题,以此记录下第一次写好紧张,谢谢各位的支持! 本人的开发环境是vue-cli2创建的项目,由于是vue的项目,所以每个页面的标题设置就成了问题,刚度娘 ...

【工作笔记】微信公众号页面摇一摇+触发音效

【工作笔记】微信公众号页面摇一摇+触发音效相关推荐

最新文章

热门文章