Shake the WeChat applet
Method definition:
let shakeInfo = {
openFlag: false,// Whether to turn on shake, ***** Note: If it is a global monitor for applet, it is true here by default shakeSpeed: 110,//Set the threshold, the smaller the more sensitive it is, the more sensitive it is. shakeStep: 2000,//The interval after the shake is successful lastTime: 0,//This variable is used to record the last time the shaking time x: 0,
y: 0,
z: 0,
lastX: 0,
lastY: 0,
lastZ: 0, //This set of variables records the values corresponding to the three axes x, y, and z respectively and the last value};
function openShakeEvent() {
= true;
}
function closeShakeEvent() {
= false;
}
function shakeOk() {
closeShakeEvent();
setTimeout(function () {
openShakeEvent();
}, );
}
/**
* Determine whether it is a shake
*/
function shake(acceleration, successCallback) {
if (!) {
return;
}
var nowTime = new Date().getTime(); //Record the current time //If the time of this shaking is at a certain interval from the time of the last shaking, it will be executed if (nowTime - > 100) {
var diffTime = nowTime - ; //Record time period = nowTime; //Record this shake time and prepare for the next calculation of shake time = ; //Get the x-axis value, the x-axis is perpendicular to the north axis and positive to the east = ; //Get the y-axis value, the y-axis direction is positive = ; //Get the z-axis value, the z-axis is perpendicular to the ground, and is positive upward // Calculation The formula means the distance of movement within unit time, that is, the speed we want. var speed = ( + + - - - ) / diffTime * 10000;
//(speed)
if (speed > ) { //If the calculated speed exceeds the threshold, then the user will be considered to have successfully shaken it successCallback();
}
= ; //Assign value to prepare for the next calculation = ; //Assign value to prepare for the next calculation = ; //Assign value to prepare for the next calculation }
}
Method call, add the following code to the onLoad homepage page of the applet startup:
/**
* Lifecycle function-listen to page load
*/
onLoad: function(options) {
//
(function(acceleration) {
(acceleration, function() {
();
(); // Here we call the code executed after the shake is successful });
});
}
If the applet is monitored globally, the above code can be implemented. If you just configure and specify a few pages to listen, you need to do the following code on the listened page:
onShow: function() {
();
},
onHide: function() {
();
}
This way, your code will not be executed when you jump to a non-listening page
Supplement: Let’s take a look at the WeChat mini program to implement the shake gravity sensing API
The WeChat mini program does not provide a shake API interface, but provides a gravity-induced API "(CALLBACK)". We can use this method to simulate the WeChat shake function. The code is as follows:
Page({
onShow: function () {
(function (e) {
()
()
()
if ( > 1 && > 1) {
({
title: 'Shake successfully',
icon: 'success',
duration: 2000
})
}
})
},
onHide: function(){
}
})
However, if the applet needs to enable tabbar, enabling the gravity sensing API in this way will cause all pages below the tabbar to monitor gravity sensing data, resulting in the simulation shake and shake results on all pages. This is not what we want. We just want to allow one of the pages under the tabbar to obtain gravity sensing data. Then we need to add a judgment on whether it is on the current page, and enable the monitoring gravity sensing API based on the judgment results. The code is modified as follows:
Page({
isShow: false,
onShow: function () {
var that = this;
= true;
(function (e) {
if(!){
return
}
()
()
()
if ( > 1 && > 1) {
({
title: 'Shake successfully',
icon: 'success',
duration: 2000
})
}
})
},
onHide: function(){
= false;
}
})
Summarize
The above is the WeChat mini program development shake function introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!