这一节我们简单介绍一下在微信日志中实现摇一摇抽签功能的实现。
摇一摇抽签的实现主要是借助JS进行页面跳转实现的。
抽签的签文可以在自己的微信公众号中事先写好，然后将URL记录下来，在JS跳转中导入便可以实现。
逻辑图如下：
?点击链接跳转到主界面（index.html）
?摇一摇手机（点击手机）跳转到抽签JS（index.js）
?随机结果选择微信公众号中已写好的文章
主界面的实现简单代码如下（index.html）：
<div class="do">摇一摇手机</div>
<div class="cover result">
<div class="item">
<div class="sprite a1"></div>
</div>
</div>
<div class="cover decode">
<div class="inner"></div>
</div>
<script src="zepto.min.js"></script>
<script src="index.js"></script>
index.js便是实现跳转的文件。
JS代码的实现简单如下：
jumpToDecode = function(){ var urls = [ "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "hhttp://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd", "http://mp.weixin.qq.com/s?__biz=MzAxMjI5MDA2NQ==&mid=210931297&idx=1&sn=5db97d77031ac4d34512d6dc9c0f019d#rd" ]; var jumpTo = urls[parseInt(Math.random() * urls.length)]; window.location = jumpTo; }
摇一摇手机的实现如下：
$(‘.do‘).click(start);
//摇一摇
$(window).on(‘deviceorientation‘, function(e) {
if (isStarted) {
return true;
}
if (!lastAcc) {
lastAcc = e;
return true;
}
var speed = e.alpha + e.beta + e.gamma - lastAcc.alpha - lastAcc.beta - lastAcc.gamma;
if (Math.abs(speed) > 50) {
start();
}
lastAcc = e;
});
通过以上代码就可以实现摇一摇抽签功能的实现
以上只是实现了微信抽签的功能。
在微信日志中如何实现呢，我们采用用户发送“抽签”，我们返回抽签链接的方式实现这个功能。
这个实现方法在第一篇文章中已经介绍过，在次我们就不再多做介绍。
实现的效果图如下（ 签文内容是在网上随便找的，如侵权立删）
体验效果可扫描以下二维码，回复抽签即可体验。
目前该公众号已经集成了聊天机器人，抽签，热脸识别的功能。大家可以随便感受。
如果对于以上功能的实现感兴趣可以添加微信号（dinghinh154）一起讨论。
以上。