這段時(shí)間團(tuán)隊(duì)一直在做微信端的一些產(chǎn)品設(shè)計(jì)和開發(fā),當(dāng)然也包含一定的營(yíng)運(yùn)工作。做過(guò)的東西也不少,微名片、微搶票、微活動(dòng)、微招募等一些小case。
今天想說(shuō)的是我們?cè)谖⑿胖斜煌娴淖罨钴S的輕遊戲--微刮獎(jiǎng),這東西可以被用來(lái)刮書、刮門票、刮套餐,還有客戶要用來(lái)刮電話費(fèi)。
先上圖,感知一下具體樣子:
?? ? ??
? ??
而我想分享的是我們?cè)谔囟ㄩ_發(fā)實(shí)現(xiàn)過(guò)程中,基於微信的Ht5 WebApp需要規(guī)則是:限定用戶每天刮書次數(shù)是2次(自由刮一次和分享後再刮一次),每天都可刮獎(jiǎng)
為此,我們希望實(shí)現(xiàn)的思路首先是限定在只能使用微信中玩,實(shí)現(xiàn)代碼如下:
if?(!HttpContext.Current.Request.Browser.IsMobileDevice) ????????????{???????????????? ????????????var?result?=?new?RedirectResult("url",?true); ????????????????filterContext.Result?=?result;??????????????? ?????????????????return; ????????????}???????????? ????????????if?(string.IsNullOrEmpty(HttpContext.Current.Request.UserAgent)) ????????????{???????????????? ????????????var?result?=?new?RedirectResult("url",?true); ????????????????filterContext.Result?=?result;???????????????? ????????????????return; ????????????}???????????? ????????????if?(HttpContext.Current.Request.UserAgent.IndexOf("MicroMessenger")?==?-1) ????????????{???????????????? ????????????var?result?=?new?RedirectResult("url",?true); ????????????????filterContext.Result?=?result;???????????????? ????????????????return; ????????????}
這招透過(guò)UserAgent的判斷思路貌似網(wǎng)上大家也用的比較多,不用卻依然存在挺多坑:
1、初級(jí)問(wèn)題:IOS和主流Android機(jī)器沒(méi)問(wèn)題,依然存在挺多坑:
1、初級(jí)問(wèn)題:IOS和主流Android機(jī)器沒(méi)問(wèn)題,依然存在挺多坑:
1、初級(jí)問(wèn)題:IOS和主流Android機(jī)器沒(méi)問(wèn)題,但碰到windows phone,就直接在微信中跳出去無(wú)法玩。原因是微信中預(yù)設(shè)的UserAgent是MicroMessenger
,在這些機(jī)器的微信版本中不存在,所以為了解決windows phone,我們加入瞭如下代碼:
var?useragent?=?HttpContext.Current.Request.UserAgent.ToLower();???????????? if?(useragent.IndexOf("Windows?Phone".ToLower())?!=?-1) ????????????{???????????????? ????????????base.OnActionExecuting(filterContext);???????????????? ????????????return; ????????????}
2、高級(jí)問(wèn)題:有高人直接高級(jí)問(wèn)題使用一些插件工具,偽造MicroMessenger的UserAgent,這樣理論上就可以在任何可以打開網(wǎng)頁(yè)的瀏覽器中玩了(感謝群友@阿寶的無(wú)私),解決此問(wèn)題,我們利用的是微信的sdk中接口:僅當(dāng)使用者在微信中使用時(shí)執(zhí)行控制初始化刮獎(jiǎng)操作,否則其他終端瀏覽就會(huì)一直處?kù)秎oading狀態(tài)。
dataForWeixin.callback?=?function?()?{????????????//一些初始化的操作 ????????}
關(guān)於微信的介面大家直接閱讀原文,這邊不直接貼程式碼出來(lái)了,不然貼不下。
?上面的思路做了很多事,但對(duì)我們的業(yè)務(wù)規(guī)則來(lái)說(shuō)還有一個(gè)很致命的bug沒(méi)有解決,也感謝@冰凍奶茶童鞋的積極反饋。
這個(gè)bug就是只要用戶手動(dòng)清除微信中的cookie和緩存信息,然後重新進(jìn)入活動(dòng),就能無(wú)限次刮獎(jiǎng),理論上是百分百中獎(jiǎng)了。這是由於我的規(guī)則將判斷當(dāng)前微信用戶是否刮過(guò)獎(jiǎng)的判斷依據(jù)放在了cookie中,貌似除此以外也沒(méi)有其他辦法。想利用openid,但我們的微信訂閱號(hào),如果從朋友圈過(guò)來(lái)的話都無(wú)法取得openid,還是依然存在上訴問(wèn)題。
?為了解決這個(gè)問(wèn)題,最後我們終於找到了一條思路,借用微信服務(wù)號(hào)的授權(quán)接口,基本思路如下:
用戶進(jìn)入頁(yè)面loading=》程序調(diào)用我們另外一個(gè)微信服務(wù)號(hào)的授權(quán)接口,返回openid= 》將openid存入cookie(若不存在或過(guò)期,則重新執(zhí)行前面步驟)=》根據(jù)openid從資料庫(kù)判斷本期活動(dòng)刮了幾次,同時(shí),這個(gè)過(guò)程會(huì)自動(dòng)判斷使用者是否在微信中玩遊戲,否則回呼將一直處?kù)秎oading狀態(tài)。整個(gè)過(guò)程使用下來(lái),還比較流暢。這邊貼一下授權(quán)相關(guān)的程式碼:
#region?微信授權(quán)??????? ?public?ActionResult?WeixinLogin(string?CurrentUrl) ????????{???????????? ????????string?url?=?WeixinOAuth2.Authorize(Server.UrlEncode(CurrentUrl));???????????? ????????return?RedirectPermanent(url); ????????}???????? ????????public?ActionResult?WeixinCallback() ????????{???????????? ????????if?(!string.IsNullOrEmpty(Request["code"])) ????????????{???????????????? ????????????//?獲取AccessToken參數(shù) ????????????????var?param?=?WeixinOAuth2.GetAccessToken(Request["code"]);???????????????? ????????????????string?url?=?string.Format("{0}#access_token={1}&openid={2}&expires_in={3}&state={4}",?ConfigHelper.GetValue("Weixin_Callback"),?param.access_token,param.openid,param.expires_in,?Server.UrlDecode(Request.QueryString["state"]));???????????????? ????????????????//重新跳轉(zhuǎn)到回調(diào)頁(yè)面,保持騰訊登錄相同風(fēng)格 ????????????????return?Redirect(url); ????????????}???????????? ????????????return?View(); ????????} ///?<summary> ????????///?授權(quán)請(qǐng)求頁(yè)面???????? ????????///?</summary> ????????///?<param name="flag">0為獲取微信基本信息?1為獲取微信openid接口</param> ????????///?<returns></returns> ????????public?static?string?Authorize(string?ReturnUrl) ????????{???????????? ????????string?url=string.Format("http://ipnx.cn/{0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect",?Weixin_AppKey,?Weixin_GetOpenIDCallback,?ReturnUrl);???????????? ????????return?url; ????????} #endregion
?至此,在微信中解決如何判斷目前使用者的唯一性問(wèn)題,基本上完全可以搞定。針對(duì)這套方案唯一存在的風(fēng)險(xiǎn)就是微信的介面的通暢性和穩(wěn)定性。
當(dāng)然,在整個(gè)開發(fā)過(guò)程中還有很多其他問(wèn)題需要一一克服,比如,微信分享後回調(diào)的實(shí)現(xiàn),相應(yīng)很多朋友都要用,還比如這種小遊戲我們甚至需要支持grps下流程訪問(wèn),不可能那些很大的遊戲框架,這怎麼搞等等問(wèn)題,這些打算後面再慢慢寫些文章分享,今天的東西夠多了,先歇歇去。
???更多分享微信開發(fā)Html5輕遊戲中的幾個(gè)坑?相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)! ??
熱AI工具

Undress AI Tool
免費(fèi)脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開發(fā)工具

SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)