微信开发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.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);
　　　　#endregion至此，在微信中解决如何判断当前用户的唯一性问题，基本上完全可以搞定。针对这套方案唯一存在的风险就是微信的接口的通畅性和稳定性。当然，在整个开发过程中还有很多其他问题需要一一克服，比如，微信分享后回调的实现，相应很多朋友都要用，还比如这种小游戏我们甚至需要支持grps下流程访问，不可能那些很大的游戏框架，这怎么搞等等问题，这些打算后面再慢慢写些文章分享，今天的东西够多了，先歇歇去。原文出自：由CSDN和《程序员》杂志联合主办的&&将于8月23日在北京举行，主办方还邀请了来自于一线的微信开发商技术负责人或资深工程师从企业应用开发高级篇、智能客服与LBS、微信支付、微信上的HTML5社交应用、微信小店开发等角度为与会者带来实战分享（&&）。目前报名处于优惠票价阶段，通过申请加入CSDN CTO俱乐部即可享受8折购票价格（票款中均含午餐），在前完成付款的同学还将免费获赠微信开发图书一本（两选一，活动现场发放）。光开发出一款产品还不行，还需有得到有效的推广，那么如何利用免费的方式来推广呢？前Zynga中国总经理、云智联CEO田行智将带来《》的主题分享，解读《碰碰里》是如何验证0推广、无任何激励手段，但却拥有每天100K 自然增长的微信HTML5应用。欢迎大家到现场与田行智深度沟通。目前，&（持续关注更新）。另外，主委会还开设了&，欢迎技术精英自荐和互相推荐，也可以直接联系&。此外，主办方还特别开设了&（&）现在就去&。微信开发者QQ群：（已满）和微信开发者② QQ群：，欢迎加入交流。相关阅读：&关注&，了解更多研发资讯，参与互动讨论；当然您可以向我们推荐更多有趣、有质量的文章。&
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章如何在微信公众平台上做HTML5小游戏？
每一个做微信运营的小伙伴都有这样的烦恼，老板要求做活动增粉，又不舍得砸钱，拿着吸引度一般的奖品，纠结每个月怎么变着花样撩粉丝。传统的转发集赞如今又有被封号的风险，评论区评论点赞，大家担心多一个人知道就多一个竞争者，活动根本推广不出去，做H5小游戏定制费用上万，只能依赖免费平台，因为人数限制，最后一场活动下来引来的粉丝只是两位数。。。伤心地打开朋友圈，人家的H5游戏又刷爆啦！
在做微信H5小游戏之前，我们先要知道哪些游戏是能有效吸粉的。
1、以营销为主要目的的游戏，简单易上手是必须的，不然大妈怎么为你疯狂？但也不能极端地上来就甩红包，点开就没了，这样没有可玩性。
2、H5游戏不过多占用用户时间。微信用户一般没有在朋友圈给一个游戏预留很长时间，不然要APP干嘛呢。游戏步骤太复杂，用户会失去耐心。
3、H5游戏机会要多，满足用户“这次不行，再来一次”的心理，不知不觉中让用户“停不下来”。最后来个诱导分享，比如“我在XX游戏中获得了XX分，你敢挑战一下吗”之类的，炫耀什么的用户最喜欢了。
了解H5小游戏的套路后，在不懂程序代码的前提下，要做HTML5小游戏，除了找专门的游戏平台，其实还可以选择一些自主建站工具。目前市面上一些建站工具已经率先开发了营销功能，像推出的小游戏。
易企玩是建站宝盒新推出的一系列免费H5互动小游戏，由专业团队根据市场专门研发，集趣味性、耐玩性、互动性、分享性于一体，传播力度打，能满足企业多种商业营销行为。
目前易企玩小游戏共推出四款，包括《数钱大战》、《宠物对对碰》、《我要萌妹子》、《抓住大白》。用户只需选择任意一款，按照宝盒提示对游戏参数进行设置，人数完全不受限制，没有额外花费，还可选择在游戏元素中植入品牌！设置完成后保存，在活动后台扫描二维码就能进入游戏，开启趣味的营销旅程。在手机游戏页面上复制链接，就能直接链到微信公众号，全程不涉及程序代码的问题！
虽然一些专门的微信游戏平台的游戏很多，但是能广泛传播的也就那几种，价格嘛，用过的人都懂的。而上面这些HTML5游戏，都是在购买建站宝盒的时候赠送的，不用再额外花钱购买。一套建站宝盒才2010元/年，从平台搭建到营销推广，一步到位，告别第三方平台依赖。傻瓜式操作，马上开启你的吸粉之路！免费试用：
更多建站&互联网行业资讯，请关注微信公众号：耐思尼克（iisp-com）
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
1010元包域名、主机、建站系统，免费SEO、O2O推广
全网覆盖式营销，轻松对接云计算、大数据、移动互联网技术
今日搜狐热点扫一扫 享优惠
iisp3366365
如何在微信公众平台上做HTML5游戏
总部地址: 珠海市吉大景园路6号第七层
&销售 400-622-8200
技术 400-622-8300
微信 iisp3366365
耐思尼克诚意为:用户提供网络服务||百姓网公众号微信扫码关注百姓网小程序微信扫扫立即体验扫码下载手机客户端免费抢油卡、红包、电影票您正在浏览信息，点击查看更多服务微信公众号开发,微信游戏开发,HTML5开发&服务内容：联系：(南京)联系时，请一定说明在百姓网看到的，谢谢！见面最安全，发现问题请举报其他联系：1.网站设计开发
想让你的网站在电脑，平板电脑，手&&机上都能顺利浏览吗？如果想要达到这种效果，在以前只能根据不同平台开发不同的版本，成本高，维护性差。我们可以给你提供解决方案，一个版本就可以。
近日，一款名为&围住神经猫&的小游戏火爆于微信朋友圈。该游戏7月22日14时上线，上线24小时内表现较为一般，独立玩家数(IP)仅为23.4万，流量(PV)仅为86.3万，但在随后一天爆发，上线48小时IP数据窜升到241万，PV达到1026万。我们可以为您量身定制属于您自己品牌的微信游戏，说不定下一个火爆朋友圈的微信游戏就是您的了。我们还可以开发基于微信的活动，譬如：抽奖，刮刮卡，排队系...1.网站设计开发
想让你的网站在电脑，平板电脑，手&&机上都能顺利浏览吗？如果想要达到这种效果，在以前只能根据不同平台开发不同的版本，成本高，维护性差。我们可以给你提供解决方案，一个版本就可以。
近日，一款名为&围住神经猫&的小游戏火爆于微信朋友圈。该游戏7月22日14时上线，上线24小时内表现较为一般，独立玩家数(IP)仅为23.4万，流量(PV)仅为86.3万，但在随后一天爆发，上线48小时IP数据窜升到241万，PV达到1026万。我们可以为您量身定制属于您自己品牌的微信游戏，说不定下一个火爆朋友圈的微信游戏就是您的了。我们还可以开发基于微信的活动，譬如：抽奖，刮刮卡，排队系统等。只要您想不到，没有做不到。
3.新浪微博,腾讯微博
开发微博上的app，活动网站，让微博的粉丝们助你一臂之力吧。(如果您的受众面向世界，我们同样具备开发facebook和twitter的app的经验）。百姓网提醒您：1）接受服务前请仔细核验对方经营资质，勿信夸张宣传和承诺&
2）任何要求预付定金或付款至个人账号的行为，均可能存在诈骗风险，请提高警惕。小贴士：本页信息由用户及第三方发布，真实性、合法性由发布人负责。详情请阅读
信息设置为“搞定了！”状态后，其他用户将无法查看您的联系方式。您确认搞定了这条信息吗？重新发布后可使用“刷新”将发布时间更新为最新时间，并将信息排到第一页。商户推广合作加盟服务支持合作伙伴|&| 沪公网安备16号7&G:86&GM:93
描述：请填写描述手机号：请填写手机号请填写手机号上传图片：打开微信，扫一扫右侧二维码，即可完成绑定 -->绑定后，您可以：1. 立即在手机上收到用户给您的留言2. 使用手机快速完成付费推广的续费动作3. 第一时间了解到百姓网付费推广最新的促销活动，以及享受微信端独特的促销活动4. 更快速地将信息通过微信分享给好友、同事、朋友圈5. 如果您是招聘类目用户，还能够第一时间接收到新简历通知下载APP无需登录实时接受私信提醒，联系更便捷！或点击下方先登录再进入私信联系阿里巴巴中国站和淘宝网会员帐号体系、《阿里巴巴服务条款》升级，完成登录后两边同时登录成功。
¥1.10
广东 深圳市南山区
总成交14笔
重庆 重庆市
重庆 重庆市
重庆 重庆市
广东 广州市白云区
总成交66笔
广东 广州市番禺区
总成交17笔
重庆 重庆市
广东 广州市番禺区
四川 成都市高新区
广东 广州市天河区
四川 成都市高新区
重庆 重庆市
广东 广州市白云区
江苏 苏州市虎丘区
让千万商家找到您
感兴趣的产品
感兴趣的产品
感兴趣的产品
感兴趣的产品}