说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

微信开发HTML5轻游戏中的几个坑

HTML文档下载 WORD文档下载 PDF文档下载
基于微信开发的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 = 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下流程访问,不可能那些很大的游戏框架,这怎么搞等等问题,这些打算后面再慢慢写些文章分享,今天的东西够多了,先歇歇去。

原文出自:深海的博客


由CSDN和《程序员》杂志联合主办的 2014年微信开发者大会 将于8月23日在北京举行,主办方还邀请了来自于一线的微信开发商技术负责人或资深工程师从企业应用开发高级篇、智能客服与LBS、微信支付、微信上的HTML5社交应用、微信小店开发等角度为与会者带来实战分享( 议程 )。目前报名处于优惠票价阶段,通过申请加入CSDN CTO俱乐部即可享受8折购票价格(票款中均含午餐),在8月1日前完成付款的同学还将免费获赠微信开发图书一本(两选一,活动现场发放)。

光开发出一款产品还不行,还需有得到有效的推广,那么如何利用免费的方式来推广呢?前Zynga中国总经理、云智联CEO田行智将带来《怎样打造百万级自然增长的微信HTML5应用?》的主题分享,解读《碰碰里》是如何验证0推广、无任何激励手段,但却拥有每天100K 自然增长的微信HTML5应用。

欢迎大家到现场与田行智深度沟通。目前, 2014微信开发者大会首批讲师和议程已经出炉(持续关注官网更新)。另外,主委会还开设了 讲师和话题公开征集平台,欢迎技术精英自荐和互相推荐,也可以直接联系 @CSDN付江@CSDN陈秋歌 。

此外,主办方还特别开设了 “微信公众平台优秀开发商”征集评选活动( 更多详情)现在就去 投票。微信开发者QQ群:375106712(已满)和微信开发者② QQ群:369742525,欢迎加入交流。

相关阅读:

  •  微信开发者大会柳峰:公众平台开发入门详解(教程)
  • 微信公众平台开发教程新手解惑40则
  • 2014微信开发者大会议程公布 8月1日前购票8折优惠并赠书
  • 以招行为例,深圳云软黄榕振谈微信公众帐号企业应用高级开发
  • 微信开发者大会讲师介绍:柳峰与你一起玩转公众平台应用开发
  • 如何打造百万级自然增长的微信HTML5应用
关注 @CSDN研发频道,了解更多研发资讯,参与互动讨论;当然您可以向我们推荐更多有趣、有质量的文章。 

程序员遇到Bug后的30种常见反应 扎克伯格豪掷3000万美元购四套房 梅耶尔和拉里佩奇也居于此 IBM研究人员:仅200条微博 就可构建人格剖析图 MDCC重磅讲师:Pebble CEO Eric Migicovsky 历届中国大数据技术大会PPT精粹(一) 通讯也“跨界”:几行代码,API+SDK,用PaaS实现移动互联 MIT风景线:丝绸雕塑、VR代码、机器人、智能按钮及保时捷 深度学习新算法,完成字里行间的情绪识别 如何在开发项目里和难缠的程序员合作? 移动周报:七大无需编程的DIY开发工具 手把手教学,用jQuery Mobile创建Web App 别惊讶,Android绿色机器人标志灵感来自于卫生间标识 Google TV更名为Android TV 智能电视的路不好走 CTO如何避免决策失控(四)——通盘考虑 做到技术业务不分家 重塑世界!历届MDCC重磅嘉宾演讲大回顾 从贝佐斯的14句言论看商业成功之道 5大宠物可穿戴式设备 Google CIO Ben Fried谈内部工具文化 【开源专访】Fourinone创始人彭渊:打造多合一的分布式并行计算框架 API优先架构或者胖瘦服务器之争 Windows Phone 8迎来Update3更新:支持更大屏幕 更多磁贴 AMD院士站台 异构计算与OpenCL编程师资培训首站清华开讲 Twitter、Square开创者Jack Dorsey的奇趣人生 利用CSS、JavaScript及Ajax实现图片预加载的三大方法 经典电影里的数学 15亿美元!软银联合GungHo收购手游巨头Supercell Oracle“炮轰”开源:称其永远无法在军事领域取得一席之地 零客户端:下一代计算分布模型 苹果聘奢侈品公司巴宝莉CEO Angela Ahrendts为零售主管 看看你会几个?9大最火的移动开发技能 为了进一步拴住用户:传亚马逊与HTC合作开发智能手机 我的超星不能用了!!! 十万火急:PDF文件修改 大哥们,能否告诉小弟,在 ms sql server2000中如何修改 sa 用户的口令.. 作为初学者,每天的问题太多了?帮我看一下下面的小问题 我上午53,下午58.该不会下马吧????/我相知道什么时候才能知道是否已经Pass,什么时候下证? 有关DELPHI6中使用SKINENGINE??? C++ Builder中多国语言的问题 在哪下载到Exchange 2000 Server Resource Kit? 快捷方式损坏怎样修复? bluesky069(菜鸟一族)你帮助我把那个PBL放到蛛蛛的信箱好不好呢?让大家都可以下在的! 请问哪里有w32dsm.exe的教程??? 潘译<>印刷错误百出,令人不忍卒读... LISTBOX的问题?请高手帮忙!!高分向送! 帮我想想这个主键该怎么建SQL SERVER7 如何将控件,恢复init()到初始状态 急救:装有SCO UNIX的硬盘克隆后不能启动系统,怎么办? 如何在FTP的目录下再新建目录?我初学网络编程, 怎样设置ScrollView中的ScrollBar不可见? 有关comboBox问题??????急!急!!! 有那位朋友对ADO控件调用T-SQL的链接服务器或存储过程的命令有所了解,或知道怎样取链接服务器的相关信息 真诚的向大家请教一个问题!!先谢谢了 redhat linux7.2安装完成后,怎么没有工具栏 已知manager是employee的子类,那么这么写Employee epy=new Manager()为什么合法? 第五次提出这个问题:如何通过DELPHI调用SQL SERVER 过程向SQL SERVER 存入图象。 为什么我在新闻聚焦中发表不了评论? 在VB里怎样用ADO存贮Access的Memo型字段? 誰有在PB下用powersock做的聊天程序? SQL的好书是什么呀?难道就没有人有体会? vb怎样格式化硬盘?? 做个《曹操传》之类的游戏需要多少投资? 关于sfc(系统文件扫描)的问题 高分求解,大虾请进 买了java程序员大本营的请进!!!! 请大家陈说学msce的前途 如何使用ProgressBar casting在java中是什么意思啊? querymode 查询器不稳定吧? 各位兄弟姐妹,在长沙拿3K是个什么水平,和沿海比怎么样,还需不需要跳槽? 想知道用程序免费发手机短信吗? 请问各位软友哪里有介绍C++Builder控件属性,方法和事件的资料。 高分相赠!!!求解我爱背单词2001共享版注册码!!! 我的XP不能上网了,添加163连接最后总说无法更新通讯簿,不能成功 如何添加纪录? 想学如何用程序发手机短信吗? 请问过滤条件filter怎么用?? 使用微软SQL Server的Select时,怎么写才能检索从N条-M条的记录(也就是说直接检索,而不是全部检索后取其中的一部分.) 如何通过程序得到系统的所有热键。谢您了。 关于CSICO防火墙515-R的问题?急 想知道在程序中如何发手机短消息吗? 求助在VC中怎样用串口控件MSComm1??(我在VB和DELPHI中用过,但不知道在VC中怎样用) 怎么给char months[12][4]赋值...... 反函数的公式与运用方法? 五点作图法 几何作图法 java中怎样绘制正弦函数图象?原题:在文本框中输入函数y=sin(ax)中a的值,点击draw按钮画出函数图形.求大虾指点. 移动测速电子狗工作原理 固定测速预警原理了解了 那么移动测速原理是什么呢 哪位高手解答下 谢谢 3相4线120平方电缆1米多重? 正弦函数高一数学 塑料转子流量计的工作原理是什么? 120平方300米铜电缆180千瓦能用么 一道高一数学题 有关正弦函数图象如图为f(x)=Asin(wx+y) (0,根3)(2π/3,0)w>0,0 铜的电阻率是几? 120平方380电缆20米距离可多少千瓦中央空调用 一台发电机,输出的功率为8000KW,所用的输电线的电阻是15欧,当发电机的输电电压为100KV时.求导线上的电流,输电线上的损失的电压与电功率. LZB玻璃转子流量计的工作原理是什么啊? 煤焦化产生的黄烟是什么物质 1500千瓦功率,距离500米,电压380伏,需要用多大的五芯电缆? 反函数到底有几种表达式? 五点法作图一定要先列表吗? 中国哪里盛产硅铁,锰铁回答的地方可以两者都盛产也可以单独盛产某一种(具体到某个省) 互为反函数的运算法则有什么关系 2.5平方电线可以承受多少安培电流?同样,多少瓦的功率? 哪里可以出口锰铁我想出口大量锰铁,请问哪里可以办? 汽车的空气流量计坏了,发动机会出现什么问题?具体最好,谢谢 1平方的电线可以走几个安培的电流?同样1KW 大致走几个安培的电流? 锰铁是什么样的 汽车空气流量计有故障为什么会加不起油? 270平方电缆可以承受1000安培的直流电流吗 什么是65锰铁? 汽车空气流量计有哪几种空气流量计主要有____._______.______.______四种~ 高炉喷煤热滞后现象是怎么回事? 三角函数图像中的五点作图法如果是y=sin(2x+6/π)的那五个点怎么求,要详细过程 汽车空气流量计空气流量计是做什么用的,国内有什么公司做这个东西做的比较好的. 单片机delay函数延迟时间计算,delay(80);为什么是600us左右?函数定义void delay(unsigned int t){while(t--);}主函数中delay(80);为什么是600us左右? 三角函数f(x)=Sin(2x+2分之根号3)的五点法作图怎么求点 汽车空气流量计作用? 120平方毫米铜电缆承受多少安电流 三角函数画图的问题我知道sinA的图要用五点法来画,但是如果变成 2sin(A+2)之类的就不会画了,不知道要怎么列表,可以告诉我这类题要怎么列表画图吗? 已知功率,电压怎么计算需要多少平方的电线的公式 高炉上料为什么是不连续的 放了一批矿或者焦炭总要隔断时间才上? 70平方规格的铝芯电线/缆 电流电压 反函数求法Y=1/X+1的反函数要有过程 怎么根据功率查电线规格 65锰铁的65是什么含义就是高碳锰铁65# 和高碳锰铁75#的数字表示什么意思? 120KW“电加热”要用多大的电缆线工程用电 ..最好有画图说明,某海岛上一个观察哨A在上午11时测得一轮船在海岛北偏东60度的C处,12时20分测得轮船在海岛北偏西60度的B处,十二时四十分轮船到达海岛正西方五千米的E港口,如果轮船始终 氮化锰铁是什么最好讲一下氮化锰铁研究现状. 串联电加热电缆主要在什么情况下使用? 已知f(1+cosx)=cos^2 x,求作函数f(x)的简图 三角函数 五点法 求φ 120KW用多大电缆 我有三个箱子 每个箱子大概是40KW 三个是120KW 每个箱子分用多大电缆!我都用220V电压不用380的··3个箱子都用220V的电压设备都是220V的.我现在跑了一根电缆4X70的铜芯电缆!不知 高炉冶炼主要技术经济指标有哪些 三角函数五点法怎样确定那五点? 总功率120KW,进线需要多少平方MM的电缆,又需要多少A的空气开关? 3. 高炉冶炼希望高效能,低消耗,产品质量好,请简要总结高炉强化冶炼有哪些手段,采用这些手段的科学依据 电缆压降具体计算,3*95+1*50电缆,传输1000米,电流按150A算,或者是3*70+1*35电缆,末端带一个160的变压器,变压器主要是解决压降问题,问变压器应该怎么选择,变压器后带一个75KW电机,4个5.5KW电机,变压 煤干馏→(箭头上下分别为Cao,电炉)可以得到乙炔吗煤干馏之后经过什么样的反应可以得到乙炔?条件有氧化钙和电炉 高炉冶炼铬铁的方法 一台200KW的电机 同样的负荷 用660V和1140V的电压电机线圈通过的电流一样大吗.电缆是400米 70平方毫米的我认为660和1140电机线圈通过的电流是同样大 可是为什么用660是电机温度有点高 用1140是 煤干馏→(箭头上下分别为Cao,电炉)可以得到乙炔吗煤干馏之后经过什么样的反应可以得到乙炔?条件有氧化钙和电炉08上海高考化学第28题 高一数学正弦函数的图像与性质 寻一种的橡胶绝缘电缆线!电缆线能过的电压220V,电流150A!多股单芯的电缆线!隔离变压器变出来的是220V,再加个电阻箱,调一下电阻,150A不就出来了!要安全可靠,还得不能用硬线!麻烦!
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn