微信日志現實搖一搖抽簽

這一節我們簡單介紹一下在微信日志中實現搖一搖抽簽功能的實現。

搖一搖抽簽的實現主要是借助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;
});

 通過以上代碼就可以實現搖一搖抽簽功能的實現

---

 

 以上只是實現了微信抽簽的功能。

在微信日志中如何實現呢，我們采用用戶發送“抽簽”，我們返回抽簽鏈接的方式實現這個功能。

這個實現方法在第一篇文章中已經介紹過，在次我們就不再多做介紹。

 

實現的效果圖如下（ 簽文內容是在網上隨便找的，如侵權立刪）

 

 

對於以上功能的實現感興趣可以添加微信號（dinghing）一起討論，共同開發。

以上。