ホームページ > 記事 > ウェブフロントエンド > JS+H5 を使用して WeChat シェイクを実装する方法
JS+H5 を使用して WeChat シェイクを実装する方法
- php中世界最好的语言オリジナル
- 2018-05-24 09:48:062648ブラウズ
今回は、JS+H5 を使用して WeChat シェイクを実装する方法と、JS+H5 を使用して WeChat シェイクを実装する際の注意点について説明します。以下は実際的なケースです。
プロジェクトは最終的に予定通り開始されましたが、春節の前にWeChatのシェイクアクティビティと同様の新しいアクティビティが行われる予定です。 WeChat のパブリック アカウントにも取り組んでいますが、WeChat Shake インターフェイスを呼び出すのはまだ少し難しいです。これは、Shake の周辺機器、近くにいる人、および一連の赤い封筒のページしか提供していないためです。振る動作が全く違います。
実際、H5+JavaScriptで書かれたページは、携帯電話の画面の長さと幅を取得し、サウンドを追加することでシェイク効果を実現できます。
最初のステップは、電話を振ることで色の変化を実現することです
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>HTML5 手机摇一摇</title>
<script type="text/javascript">
var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');
if(window.DeviceMotionEvent) {
var speed = 25;
var x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion', function(){
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
}
lastX = x;
lastY = y;
}, false);
}
</script>
</head>
<body>
手机摇一摇，改变屏幕颜色。
</body>
</html>
これは主に電話のDeviceMotionEventイベントです
第2ステップ、WeChatシェイクジェスチャー
が追加されます最初のステップと比較して、シェイク ジェスチャはシェイク イベントを変更します。作成する次のページに入るか、コントローラー イベントをトリガーするかにかかわらず、シェイク アクションの後に必要なメソッドを追加するだけです。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>摇一摇</title>
<link rel="stylesheet" href="plug-in/liuliangbao/shake/css/shake.css" rel="external nofollow" >
<link rel="stylesheet" href="plug-in/liuliangbao/shake/css/myDialog.css" rel="external nofollow" >
<script type="text/javascript" src="plug-in/liuliangbao/shake/js/jquery.min.js"></script>
<script type="text/javascript" src="plug-in/liuliangbao/shake/js/howler.min.js"></script>
<script type="text/javascript" src="plug-in/liuliangbao/shake/js/fastclick.js"></script>
<script type="text/javascript" src="plug-in/liuliangbao/shake/js/myDialog.js"></script>
<script type="text/javascript">
var SHAKE_THRESHOLD = 1000;
var last_update = 0;
var last_time = 0;
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;
var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load();
var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load();
var curTime;
var isShakeble = true;
function init() {
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
$("#cantshake").show();
}
}
function deviceMotionHandler(eventData) {
curTime = new Date().getTime();
var diffTime = curTime - last_update;
if (diffTime > 100) {
var acceleration = eventData.accelerationIncludingGravity;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) {
shake();
}
last_x = x;
last_y = y;
last_z = z;
}
}
function shake() {
last_time = curTime;
$("#loading").attr('class','loading loading-show');
$("#shakeup").animate({ top: "10%" }, 700, function () {
$("#shakeup").animate({ top: "25%" }, 700, function () {
$("#loading").attr('class','loading');
findsound.play();
//在此为摇动之后的事件，这里为调用ControllergoShakeResult方法
window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}";
});
});
$("#shakedown").animate({ top: "40%" }, 700, function () {
$("#shakedown").animate({ top: "25%" }, 700, function () {
});
});
sound.play();
}
//各种初始化
$(document).ready(function () {
Howler.iOSAutoEnable = false;
FastClick.attach(document.body);
init();
});
</script>
</head>
<body>
<table id="container">
<tbody>
<tr>
<td class="container" colspan="2">
<p id="shake">
<img src="plug-in/liuliangbao/shake/images/inner.png" class="inner">
<img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_up" id="shakeup">
<img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_down" id="shakedown">
</p><p id="loading" class="loading"></p>
</td>
</tr>
<tr>
<td>
您今天还可以摇<input id="shakeCount" name="shakeCount" value="${leftcount}">次
</td>
</tr>
<tr>
<td>正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。</td>
</tr>
</tbody>
</table>
</body>
</html>
場合によっては、別の方法を使用して必要な機能を実現できる場合があります。添付画像: デモの元の効果は次のとおりです:
改訂後
この記事の事例を読んだ後、あなたは方法を習得したと思います。さらにエキサイティングなことについては、他の点に注意してください。関連記事はphp中国語サイトにあります！
推奨読書:
JS+CSS3で画像バインディングマウス移動イベント増幅を行う
以上がJS+H5 を使用して WeChat シェイクを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：WeChat ミニプログラムの開発方法次の記事：WeChat ミニプログラムの開発方法