The requirements require that the page click the button to shake or shake the phone to trigger the lottery.
The page will be displayed in the WeChat mini program + APP;
I found some methods on the Internet. WeChat SDK does not provide a shake method to call the H5 page, so I took the following method:
h5 code determines whether the running environment is APP or non-APP
1.In the APP
To be on the safe side, call the shake method provided by the APP to H5 (need to negotiate with the developer on the APP side). H5 directly calls the method. After the shake is triggered, the shake method must be closed, otherwise the shake method will be drawn after the draw. Shaking the phone will still trigger it.
2. Not within the APP
Using shake.js, the code is as follows:
/*
* 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 detect
this.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 values
this.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;
};
//开始监听 devicemotion
Shake.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.3
DeviceMotionEvent.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+设备")
}
}
//停止监听 devicemotion
Shake.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 registered
currentTime = 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;
}));Introduced into h5 page
<script type="text/javascript" src="shake.js"></script> //创建实例
var myShakeEvent = new Shake({
threshold: 12 // 摇动阈值
});
// 监听设备动作
myShakeEvent.start();
//添加一个监听事件
window.addEventListener('shake', function () {
// start();
console.log('摇一摇')
}, false);Notice:
1. This method will not be triggered during local joint debugging, because the link to the h5 page must start with https://... to trigger (this is a special pitfall), and WeChat has adjusted its policy, and the link to the h5 page must use SSL encryption. certificate.
2. Shake can be triggered in versions before iOS 13.3. Later versions need to be compatible, and a pop-up box that allows users to manually click is needed to allow users to authorize actions and directions. (requires https protocol)
If it really doesn’t trigger, then ask the designer to add a dot-by-dot style. If it really doesn’t trigger when shaking the phone, then use tap-to-dot to trigger it.
3. About the shake sound effect
If it is a method thrown by the calling APP, it may have its own sound effects (it depends on how the APP developer defines the method)
If it is not a method thrown by the calling APP, it can be triggered in the following ways:
Sound effect: https://download.csdn.net/download/tt18473481961/87512465
<audio preload="" id="sing"><source src="images/sing.mp3" type="audio/mp3"></audio>
#sing {
display: none;
}
var sing=document.getElementById("sing");
sing.play();4. Regarding some iOS phones, there is no sound when shaking the play() method.
Bind a touchstart event (it can be tied to the first clicked element. It is best to remove it after only one use. Binding to touchend can also be done theoretically, but it must be click to be effective. Touchend will not work after sliding. .), call it .load(), and then call it in other methods .paly()to play the sound smoothly.
var sing=document.getElementById("sing");
$(".start").on("touchstart",function(){ // 为了解决iOS手机不点击摇一摇按钮直接调play()不发出声音
console.log('touchstart-播放音频',document.getElementById("sing"))
sing.load()
sing.pause()
})
// 在其他方法中嗲用音频播放
sing.play(); // 播放声音