html5编游戏好难,分享微信开发Html5轻游戏中的几个坑
現(xiàn)如今微信為各種移動(dòng)Web的小應(yīng)用提供了肥沃的土壤，于是乎形形色色的應(yīng)用孕育而出。人人都可以做開(kāi)發(fā)，但不是每個(gè)人都能開(kāi)發(fā)出好的應(yīng)用，在開(kāi)發(fā)過(guò)程中開(kāi)發(fā)者會(huì)應(yīng)注意哪些“坑”呢？本文轉(zhuǎn)自深海的博客，他分享了在具體開(kāi)發(fā)實(shí)現(xiàn)過(guò)程中基于微信的Html5 WebApp需要注意的細(xì)節(jié)以及如何用代碼實(shí)現(xiàn)。
全文如下：
不同于傳統(tǒng)的手游商店下載模式，HTML5 手機(jī)網(wǎng)頁(yè)游戲是可以直接運(yùn)行在微信內(nèi)置的瀏覽器里。
這段時(shí)間團(tuán)隊(duì)一直在做微信端的一些產(chǎn)品設(shè)計(jì)和開(kāi)發(fā)，當(dāng)然也包含一定的運(yùn)營(yíng)工作。做過(guò)的東西也不少，微名片、微搶票、微活動(dòng)、微招聘等一些小case。
今天想說(shuō)的是我們?cè)谖⑿胖斜煌娴淖罨钴S的輕游戲--微刮獎(jiǎng)，這東西可以被用來(lái)刮書(shū)、刮門(mén)票、刮套餐，還有客戶要用來(lái)刮電話費(fèi)。
先上圖，感知一下具體樣子：
而我想分享的是我們?cè)诰唧w開(kāi)發(fā)實(shí)現(xiàn)過(guò)程中，基于微信的Html5 WebApp需要去克服的一些坑：這個(gè)小游戲的基本規(guī)則是：限定用戶每天刮書(shū)次數(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)題，但碰到Windows Phone，就直接在微信中跳出去無(wú)法玩。原因是微信中默認(rèn)的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)題：有高人直接使用一些插件工具，偽造MicroMessenger的UserAgent，這樣理論上就可以在任何可以打開(kāi)網(wǎng)頁(yè)的瀏覽器中玩了，解決此問(wèn)題，我們利用的是微信的sdk中接口：僅當(dāng)用戶在微信中使用時(shí)執(zhí)行控件初始化刮獎(jiǎng)操作，否則其他終端瀏覽就會(huì)一直處于loading狀態(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從數(shù)據(jù)庫(kù)判斷本期活動(dòng)刮了幾次，同時(shí)，這個(gè)過(guò)程會(huì)自動(dòng)判斷用戶是否在微信中玩游戲，否則回調(diào)將一直處于loading狀態(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();
}
///
/// 授權(quán)請(qǐng)求頁(yè)面
///
/// 0為獲取微信基本信息 1為獲取微信openid接口
///
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
至此，在微信中解決如何判斷當(dāng)前用戶的唯一性問(wèn)題，基本上完全可以搞定。針對(duì)這套方案唯一存在的風(fēng)險(xiǎn)就是微信的接口的通暢性和穩(wěn)定性。
當(dāng)然，在整個(gè)開(kāi)發(fā)過(guò)程中還有很多其他問(wèn)題需要一一克服，比如，微信分享后回調(diào)的實(shí)現(xiàn)，相應(yīng)很多朋友都要用，還比如這種小游戲我們甚至需要支持grps下流程訪問(wèn)，不可能那些很大的游戲框架，這怎么搞等等問(wèn)題，這些打算后面再慢慢寫(xiě)些文章分享，今天的東西夠多了，先歇歇去。
原文出自：深海的博客
總結(jié)
以上是生活随笔為你收集整理的html5编游戏好难,分享微信开发Html5轻游戏中的几个坑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： html 字段大小,html td标签
- 下一篇： android 两足机器人,基于Andr