您當前位置：首頁 > 互聯(lián)網(wǎng) > 微信開發(fā)HTML5輕游戲中的幾個坑

微信開發(fā)HTML5輕游戲中的幾個坑

來源：程序員人生發(fā)布時間：2014-09-17 20:46:52 閱讀次數(shù)：3328次

【編者按】現(xiàn)如今微信為各種移動Web的小應(yīng)用提供了肥沃的土壤，于是乎形形色色的應(yīng)用孕育而出。人人都可以做開發(fā)，但不是每個人都能開發(fā)出好的應(yīng)用，在開發(fā)過程中開發(fā)者會應(yīng)注意哪些“坑”呢？本文轉(zhuǎn)自深海的博客，他分享了在具體開發(fā)實現(xiàn)過程中基于微信的Html5 WebApp需要注意的細節(jié)以及如何用代碼實現(xiàn)。

全文如下：

不同于傳統(tǒng)的手游商店下載模式，HTML5 手機網(wǎng)頁游戲是可以直接運行在微信內(nèi)置的瀏覽器里。

這段時間團隊一直在做微信端的一些產(chǎn)品設(shè)計和開發(fā)，當然也包含一定的運營工作。做過的東西也不少，微名片、微搶票、微活動、微招聘等一些小case。

今天想說的是我們在微信中被玩的最活躍的輕游戲--微刮獎，這東西可以被用來刮書、刮門票、刮套餐，還有客戶要用來刮電話費。

先上圖，感知一下具體樣子：

而我想分享的是我們在具體開發(fā)實現(xiàn)過程中，基于微信的Html5 WebApp需要去克服的一些坑：這個小游戲的基本規(guī)則是：限定用戶每天刮書次數(shù)是2次（自由刮一次和分享后再刮一次），每天都可刮獎為此，我們希望實現(xiàn)的思路首先是限定在只能使用微信中玩，實現(xiàn)代碼如下：

code_snippet_id="434848" snippet_file_name="ptcms_1406254033_0.js">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; }

這招通過UserAgent的判斷思路貌似網(wǎng)上大家也用的比較多，不用卻依然存在挺多坑：

1. 初級問題：iOS和主流Android機器沒問題，但碰到Windows Phone，就直接在微信中跳出去無法玩。原因是微信中默認的UserAgent是MicroMessenger，在這些機器的微信版本中不存在，所以為了解決Windows Phone，我們加入了如下代碼：

code_snippet_id="434848" snippet_file_name="ptcms_1406254033_1.js">　var useragent = HttpContext.Current.Request.UserAgent.ToLower(); if (useragent.IndexOf("Windows Phone".ToLower()) != -1) { base.OnActionExecuting(filterContext); return; }

2. 高級問題：有高人直接使用一些插件工具，偽造MicroMessenger的UserAgent，這樣理論上就可以在任何可以打開網(wǎng)頁的瀏覽器中玩了，解決此問題，我們利用的是微信的sdk中接口：僅當用戶在微信中使用時執(zhí)行控件初始化刮獎操作，否則其他終端瀏覽就會一直處于loading狀態(tài)。

code_snippet_id="434848" snippet_file_name="ptcms_1406254033_2.js">　dataForWeixin.callback = function () { //一些初始化的操作 }

關(guān)于微信的接口大家直接閱讀原文，這邊不直接貼代碼出來了，不然貼不下。

上面的思路做了很多事，但對我們的業(yè)務(wù)規(guī)則來說還有一個很致命的bug沒有解決。

這個bug就是只要用戶手動清除微信中的cookie和緩存信息，然后重新進入活動，就能無限次刮獎，理論上是百分百中獎了。這是由于我的規(guī)則將判斷當前微信用戶是否刮過獎的判斷依據(jù)放在了cookie中，貌似除此以外也沒有其他辦法。想利用openid，但我們的微信訂閱號，如果從朋友圈過來的話都無法獲取openid，還是依然存在上訴問題。

為了解決這個問題，最后我們終于找到了一條思路，借用微信服務(wù)號的授權(quán)接口，基本思路如下：

用戶進入頁面loading=》程序調(diào)用我們另外一個微信服務(wù)號的授權(quán)接口，返回openid=》將openid存入cookie（若不存在或過期，則重新執(zhí)行前面步驟）=》根據(jù)openid從數(shù)據(jù)庫判斷本期活動刮了幾次，同時，這個過程會自動判斷用戶是否在微信中玩游戲，否則回調(diào)將一直處于loading狀態(tài)。整個過程使用下來，還比較流暢。這邊貼一下授權(quán)相關(guān)的代碼：

code_snippet_id="434848" snippet_file_name="ptcms_1406254033_3.js">#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)頁面，保持騰訊登錄相同風格 return Redirect(url); } return View(); } 　　　　/// <summary> /// 授權(quán)請求頁面 /// </summary> /// <param name="flag">0為獲取微信基本信息 1為獲取微信openid接口</param> /// <returns></returns> public static string Authorize(string ReturnUrl) { string url=string.Format("https://open.weixin.qq.com/connect/oauth2/authorize?appid={0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect", Weixin_AppKey, Weixin_GetOpenIDCallback, ReturnUrl); return url; }　　　　　　#endregion

至此，在微信中解決如何判斷當前用戶的唯一性問題，基本上完全可以搞定。針對這套方案唯一存在的風險就是微信的接口的通暢性和穩(wěn)定性。

當然，在整個開發(fā)過程中還有很多其他問題需要一一克服，比如，微信分享后回調(diào)的實現(xiàn)，相應(yīng)很多朋友都要用，還比如這種小游戲我們甚至需要支持grps下流程訪問，不可能那些很大的游戲框架，這怎么搞等等問題，這些打算后面再慢慢寫些文章分享，今天的東西夠多了，先歇歇去。

原文出自：深海的博客

由CSDN和《程序員》雜志聯(lián)合主辦的 2014年微信開發(fā)者大會將于8月23日在北京舉行，主辦方還邀請了來自于一線的微信開發(fā)商技術(shù)負責人或資深工程師從企業(yè)應(yīng)用開發(fā)高級篇、智能客服與LBS、微信支付、微信上的HTML5社交應(yīng)用、微信小店開發(fā)等角度為與會者帶來實戰(zhàn)分享（議程）。目前報名處于優(yōu)惠票價階段，通過申請加入CSDN CTO俱樂部即可享受8折購票價格（票款中均含午餐），在8月1日前完成付款的同學(xué)還將免費獲贈微信開發(fā)圖書一本（兩選一，活動現(xiàn)場發(fā)放）。

光開發(fā)出一款產(chǎn)品還不行，還需有得到有效的推廣，那么如何利用免費的方式來推廣呢？前Zynga中國總經(jīng)理、云智聯(lián)CEO田行智將帶來《怎樣打造百萬級自然增長的微信HTML5應(yīng)用？》的主題分享，解讀《碰碰里》是如何驗證0推廣、無任何激勵手段，但卻擁有每天100K 自然增長的微信HTML5應(yīng)用。

歡迎大家到現(xiàn)場與田行智深度溝通。目前， 2014微信開發(fā)者大會首批講師和議程已經(jīng)出爐（持續(xù)關(guān)注官網(wǎng)更新）。另外，主委會還開設(shè)了講師和話題公開征集平臺，歡迎技術(shù)精英自薦和互相推薦，也可以直接聯(lián)系 @CSDN付江@CSDN陳秋歌。