html5微信小游戏怎么开发
现如今，微信为各类移动Web小应用提供了良好的发展环境，形形色色的应用应运而生。虽然人人都能参与开发，但并非每个人都能开发出优质的应用。在开发过程中，开发者需要注意哪些“坑”呢？本文转载自深海的博客，分享了基于微信的HTML5 WebApp在具体开发实现过程中需要注意的细节以及代码实现方法。
一、HTML5微信小游戏特点
不同于传统的手游商店下载模式，HTML5手机网页游戏可以直接在微信内置的浏览器中运行。
近期，团队一直在进行微信端的产品设计、开发以及一定的运营工作，涉及的项目包括微名片、微抢票、微活动、微招聘等。今天主要介绍微信中活跃度较高的轻游戏——微刮奖，该游戏可用于刮书、刮门票、刮套餐，甚至有客户希望用于刮电话费。
下面先展示一下游戏的样子（此处省略图片展示，可自行想象）。
二、开发实现过程中的“坑”及解决办法
（一）限定游戏只能在微信中玩
这个小游戏的基本规则是限定用户每天刮书次数为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”不存在。为解决此问题，添加了如下代码：
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：只要用户手动清除微信中的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
至此，在微信中判断当前用户唯一性的问题基本得到解决。不过，该方案唯一存在的风险是微信接口的通畅性和稳定性。
三、后续待解决问题
在整个开发过程中，还有许多其他问题需要解决。例如，微信分享后回调的实现，很多朋友可能会用到；又如，这类小游戏需要支持GPRS网络下的流畅访问，不能使用大型的游戏框架，该如何处理等。后续会陆续撰写文章分享这些问题的解决办法，今天就先到这里。