微信開發Html5輕遊戲中的幾個坑

全文以下：

不一樣於傳統的手遊商店下載模式，HTML5 手機網頁遊戲是能夠直接運行在微信內置的瀏覽器裏。

這段時間團隊一直在作微信端的一些產品設計和開發，固然也包含必定的運營工做。作過的東西也很多，微名片、微搶票、微活動、微招聘等一些小case。

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

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

而我想分享的是咱們在具體開發實現過程當中，基於微信的Html5 WebApp須要去克服的一些坑：這個小遊戲的基本規則是：限定用戶天天刮書次數是2次 （自由刮一次和分享後再刮一次），天天均可刮獎爲此，咱們但願實現的思路首先是限定在只能使用微信中玩，實現代碼以下：

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的判斷思路貌似網上你們也用的比較多，不用卻依然存在挺多坑：

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

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

2. 高級問題：有高人直接使用一些插件工具，僞造MicroMessenger的UserAgent，這樣理論上就能夠在任何能夠打開網頁的瀏覽器中玩了，解決此問題，咱們利用的是微信的sdk中接口：僅當用戶在微信中使用時執行控件初始化刮獎操做，不然其餘終端瀏覽就會一直處於loading狀態。

dataForWeixin.callback = function () {
            //一些初始化的操做
}

關於微信的接口你們直接閱讀原文，這邊不直接貼代碼出來了，否則貼不下。

上面的思路作了不少事，但對咱們的業務規則來講還有一個很致命的bug沒有解決。

這個bug就是隻要用戶手動清除微信中的cookie和緩存信息，而後從新進入活動，就能無限次刮獎，理論上是百分百中獎了。這是因爲個人規則將判斷當前微信用戶是否刮過獎的判斷依據放在了cookie中，貌似除此之外也沒有其餘辦法。想利用openid，但咱們的微信訂閱號，若是從朋友圈過來的話都沒法獲取openid，仍是依然存在上訴問題。

 爲了解決這個問題，最後咱們終於找到了一條思路，借用微信服務號的受權接口，基本思路以下：

用戶進入頁面loading=》程序調用咱們另一個微信服務號的受權接口，返回openid=》將openid存入cookie（若不存在或過時，則從新執行前面步驟）=》根據openid從數據庫判斷本期活動颳了幾回，同時，這個過程會自動判斷用戶是否在微信中玩遊戲，不然回調將一直處於loading狀態。整個過程使用下來，還比較流暢。這邊貼一下受權相關的代碼：

#region 微信受權
public ActionResult WeixinLogin(string CurrentUrl)
{
    string url = WeixinOAuth2.Authorize(Server.UrlEncode(CurrentUrl));
    return RedirectPermanent(url);
}

public ActionResult WeixinCallback()
{
    if (!string.IsNullOrEmpty(Request["code"]))
    {
        // 獲取AccessToken參數
        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"]));
        //從新跳轉到回調頁面，保持騰訊登陸相同風格
            return Redirect(url);
    }
    return View();
}
/// <summary>
/// 受權請求頁面
/// </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

至此，在微信中解決如何判斷當前用戶的惟一性問題，基本上徹底能夠搞定。針對這套方案惟一存在的風險就是微信的接口的通暢性和穩定性。

固然，在整個開發過程當中還有不少其餘問題須要一一克服，好比，微信分享後回調的實現，相應不少朋友都要用，還好比這種小遊戲咱們甚至須要支持grps下流程訪問，不可能那些很大的遊戲框架，這怎麼搞等等問題，這些打算後面再慢慢寫些文章分享，今天的東西夠多了，先歇歇去。