微信开发HTML5轻游戏中的几个坑
发表于 09:40|
来源深海的博客|
摘要：基于微信开发的HTML5游戏，开发者需要克服哪些坑呢？又该如何推广呢？本文转自深海的博客，他分享了具体开发实现过程中，基于微信的Html5 WebApp需要注意哪些细节以及如何用代码实现。
【编者按】现如今微信为各种移动Web的小应用提供了肥沃的土壤，于是乎形形色色的应用孕育而出。人人都可以做开发，但不是每个人都能开发出好的应用，在开发过程中开发者会应注意哪些“坑”呢？本文转自，他分享了在具体开发实现过程中基于微信的Html5 WebApp需要注意的细节以及如何用代码实现。&全文如下：不同于传统的手游商店下载模式，HTML5 手机网页游戏是可以直接运行在微信内置的浏览器里。这段时间团队一直在做微信端的一些产品设计和开发，当然也包含一定的运营工作。做过的东西也不少，微名片、微抢票、微活动、微招聘等一些小case。今天想说的是我们在微信中被玩的最活跃的轻游戏--微刮奖，这东西可以被用来刮书、刮门票、刮套餐，还有客户要用来刮电话费。先上图，感知一下具体样子：而我想分享的是我们在具体开发实现过程中，基于微信的Html5 WebApp需要去克服的一些坑：这个小游戏的基本规则是：限定用户每天刮书次数是2次 （自由刮一次和分享后再刮一次），每天都可刮奖为此，我们希望实现的思路首先是限定在只能使用微信中玩，实现代码如下：if (!HttpContext.Current.Request.Browser.IsMobileDevice)
var result = new RedirectResult("url", true);
filterContext.Result =
if (string.IsNullOrEmpty(HttpContext.Current.Request.UserAgent))
var result = new RedirectResult("url", true);
filterContext.Result =
if (HttpContext.Current.Request.UserAgent.IndexOf("MicroMessenger") == -1)
var result = new RedirectResult("url", true);
filterContext.Result =
}这招通过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);
}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./connect/oauth2/authorize?appid={0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect", Weixin_AppKey, Weixin_GetOpenIDCallback, ReturnUrl);
　　　　#endregion至此，在微信中解决如何判断当前用户的唯一性问题，基本上完全可以搞定。针对这套方案唯一存在的风险就是微信的接口的通畅性和稳定性。当然，在整个开发过程中还有很多其他问题需要一一克服，比如，微信分享后回调的实现，相应很多朋友都要用，还比如这种小游戏我们甚至需要支持grps下流程访问，不可能那些很大的游戏框架，这怎么搞等等问题，这些打算后面再慢慢写些文章分享，今天的东西够多了，先歇歇去。原文出自：由CSDN和《程序员》杂志联合主办的&&将于8月23日在北京举行，主办方还邀请了来自于一线的微信开发商技术负责人或资深工程师从企业应用开发高级篇、智能客服与LBS、微信支付、微信上的HTML5社交应用、微信小店开发等角度为与会者带来实战分享（&&）。目前报名处于优惠票价阶段，通过申请加入CSDN CTO俱乐部即可享受8折购票价格（票款中均含午餐），在前完成付款的同学还将免费获赠微信开发图书一本（两选一，活动现场发放）。光开发出一款产品还不行，还需有得到有效的推广，那么如何利用免费的方式来推广呢？前Zynga中国总经理、云智联CEO田行智将带来《》的主题分享，解读《碰碰里》是如何验证0推广、无任何激励手段，但却拥有每天100K 自然增长的微信HTML5应用。欢迎大家到现场与田行智深度沟通。目前，&（持续关注更新）。另外，主委会还开设了&，欢迎技术精英自荐和互相推荐，也可以直接联系&。此外，主办方还特别开设了&（&）现在就去&。微信开发者QQ群：（已满）和微信开发者② QQ群：，欢迎加入交流。相关阅读：&关注&，了解更多研发资讯，参与互动讨论；当然您可以向我们推荐更多有趣、有质量的文章。&
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章虽然很不情愿，但还是要提前祝有情人终成眷属/doge
经过了大量的爆料轰炸，现在我们已经觉得今年即将到来的“iPhone 8”浑身都是卖点了。...
行业规范不断提升，外卖平台所投入的运营成本会更高，这势必会导致外卖行业的动荡甚至...
虽然三星和LG这些强大的对手已经在虎视眈眈，但梦想还是要有的。
即使苹果有开发汽车的打算，也不会在近期内跟我们见面。
说不定下一次就要预测iPhone 8可能会卡顿了，分析师还是好当。
在过去的 2016 年里，苹果公司一直都在不断为旗下的 Apple Maps 地图服务添加全世界各...
苹果：如果你非要当什么动手达人，出问题了不要找我们。
主人公在分裂的记忆之中不断穿行，尽管周围的一切都是如此的熟悉，但她的脑海中依然没...
威锋网曾经报道了由Blue Wizard打造的游戏新作《远离杀戮营地（Slayaway Camp）》即将...
本作的故事讲述了粗心的蕾拉·格林博士在实验时释放了无数的恐怖生物，为了弥补她犯下...
本作在移植的过程中对原有版本进行了一定的修改，使之能够更适应移动端玩家的操作习惯...
近日在苹果商店当中上架的《场景管理员（Stagehand: A Reverse Platformer）》中玩家...
【地牢探险很萌很喜感：Dungeon Tails】这款游戏没有血腥场面更没有恐怖敌人，剩下的...
《女王历险记 2：身世之谜》作为一款经典游戏的续集作品，本身定位还是与系列作品比较...
台湾友讯科技公司已经在欧洲市场推出了兼容 HomeKit 的 Omna 180 高清安全摄像头。
总之开心就好，不过应该也会有不少人喜欢这些手机壳的吧~
苹果还是自己造显示器吧，感觉其它公司不是这么靠谱。
不如一起入手吧，如果你真的不会选的话~
现在搜索关键字只能看到所找寻的产品已不再提供等字样。至于下架的原因，目前尚无任何...
一个保护壳就可以买两台 iPhone 7，你会买吗?
第一代还没买呢，就要出第二代了吗？
也就是说，Apple Pencil 2能兼容更多苹果设备就好了~
手机2个微信，玩腾讯游戏时老是用小号进入的，怎么更换大号登陆游戏啊？
注册时间 最后登录
在线时间55 小时 UID
主题帖子人气
青苹果, 积分 101, 距离下一级还需 99 积分
手机2个微信，玩腾讯游戏时老是用小号进入的，怎么更换大号登陆游戏啊？
注册时间 最后登录
在线时间55 小时 UID
主题帖子人气
自己顶下！！！！
注册时间 最后登录
在线时间251 小时 UID
主题帖子人气
注册时间 最后登录
在线时间55 小时 UID
主题帖子人气
注册时间 最后登录
在线时间379 小时 UID
主题帖子人气
用微信分身版上大号，原版上小号，游戏就关联大号了
注册时间 最后登录
在线时间893 小时 UID
主题帖子人气
用微信分身版上大号，原版上小号，游戏就关联大号了
注册时间 最后登录
在线时间55 小时 UID
主题帖子人气
用微信分身版上大号，原版上小号，游戏就关联大号了
谢谢大侠！！！
威锋旗下产品
Hi~我是威威！
沪公网安备 29号　|　沪ICP备号-1
新三板上市公司威锋科技（836555）
增值电信业务经营许可证：
Powered by Discuz!