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

微信开发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研发频道,了解更多研发资讯,参与互动讨论;当然您可以向我们推荐更多有趣、有质量的文章。 

首份“2014年移动外语学习行业报告”等你下载 《近匠》Ayla联合创始人张南雄:物联网发展的三个阶段 神器 VisuAlgo:通过动画学习算法和数据结构 【工具推荐】QWrap——开源的前端JavaScript框架 老外看中国:移动应用UI设计的十大精髓 HTML5正名记:两家机构的博弈与一种标准的诞生 电池技术为何停滞不前?革新技术尚未出现 如何设计优雅的移动游戏? 前方高能!盘点2014年最颠覆三观的智能硬件 俄罗斯当局封杀GitHub,理由是教唆自杀 裁员110人、关闭工作室,Rovio重组求出路! 全Swift开发、代码开源!有钳的Firefox for iOS 详解开源游戏开发框架HaxePunk的主要特性 《程序员》杂志休刊通知 2014 TOP50最具价值CTO获奖名单揭晓! TIOBE 2014年12月编程语言排行榜:R和Swift成为年度语言候选者 免费增值应用正在“杀死”游戏开发者? 直接Mark!开源的DevOps开发工具箱 Apache Mesos联合创始人Benjamin Hindman:谈分布式应用现状 直觉不靠谱!使用移动应用分析的七个巧妙方法 屏蔽、挖角与丑闻,Uber的“创收神器”泡沫 蚁视科技发布会:三大产品与四大概念技术 盘点VS2015 预览版的5个新特性 低能的“智能” 你就是明星,第一届IBM RockStar正式启动! Kubernetes:Google分布式容器技术初体验 方法可以复制 AngularJS资源集合 那些年,微信走过的开放之路 从YunOS话阿里移动互联网云生态布局 Mobile First!苹果联合IBM发布10款企业级App iOS8.1.1越狱又惹急苹果!扒一扒黑客与苹果的斗争史! 关于组件的停靠 用VB.NET连接数据库老是连不了,快精神分裂了,救命啊! 关于SendMessage(高分相送,紧急) 急!!!高手进! 在查找结果中如果某一字段的值相等,只取出其中一条的问题! squid的安装问题???????????????????? SQL语句问题? 冒昧求救,光驱不能使用,不能boot 我的主机总收到外面发的广告信息? 高分求助急!!! 见鬼了,我添加一个TServerSocket控件,然后编译出现:Declaration terminate incorrectly 有谁知道用哪款打印机比较好呢? 按钮BitBtn1上有图片,在图片上写字的问题。(在先给分!) cystal reports 8.5 english显示繁体问题,急,等待 Unix下用什么源代码检测工具比较好? 我的电脑出什么问题了?各位帮帮忙 界面导航如何分类? 怎样得到本机的网卡号??? %¥#问个小问题,知道的都来抢分啊 谁知道哪儿有支持认证的SMTP组件下载? 有什么软件能查看PE文件的? ADO问题!!!! 100分求购最简单的串口程序!需要详细注释! 怎么给大家份呀?to wyz_csdn等(500分诚征wav 转换到MP3的源程序(VC++的例子)) 在directshow中,不知道怎样对播放的画面的亮度进行控制? 如果深愛的人要離開你,是變心還是死亡好一點?(讨论) 贴了二次为什么没有人指教? 戒水快两年了,如今回来看看,物不是人非啦 新手一问 关于datagrid 修改数据的问题,帮我看看,多谢 谁有这两本书,请帮忙发到我的邮箱里,100分相送 到底应该怎么办? 大家好,如何打开DLL文件? 建议成立一个程序员协会 关于IE中图片的保存 VB 语言支持问题 高分求李维《delphi5.xDELPHI5.X ADO/MTS/COM+高级程序设计》示例源码!!!! 请yangshu进来!给妳点分!!!倒分! 请教各位如何实现dbgrid中按住shift多选的问题? 请问把sql-server7中的数据文件copy出来行吗? 找不到类,请大家帮忙解决,谢谢 异常处理问题 怎样恢复被损坏的"本地用户和组" 小弟在线等待,一小问题,,大家来帮忙?? 求jsp树的原代码 最好是jsp+js+xml 执行效率要高。(从数据库中动态生成的)在线 关于多层结构中事务处理的问题. VB6.0升级到VB.NET的问题。 在ASP中使用ActiveX Control ADOTable表名如何在运行时“递进” 这样的待遇能招到人吗? 不好意思,问个技术问题。其他版实在没人气!只好来这问! 二氧化碳不从毛细血管进入肝细胞的原因 傅雷在第一封信中对儿子寄予了怎样的期望 吾尝终日不食 终夜不寝 已死无益 不如学也 同种物质的分子性质相同,不同种物质的分子性质不同 这句话对吗 了解傅雷这封家书是在什么情况下写给儿子的.2,傅雷想通过这封书信告诉儿子什么 子曰:吾尝终日不食,终夜不寝,以思,无益,不如学也. 同种物质的分子性质相同,不同物质的分子性质不同.这句话对吗 傅雷在这封信中对儿子寄予了怎样的期望' 用烤箱时烤鸡翅的油滴到加热管上要紧吗? 同种物质的分子性质相同、不同种物质的分子性质不同、这种说法对吗、为什么、 傅雷先生的信写给哪个儿子《傅雷家书》 孔子曰:吾尝终日不食,终夜不寝,以思无益,RT.并讲明了什么学习道理?温故而知新的“温故”和“知新”顺序能否调换?为什么?“学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知而不愠, 同种物质的分子性质相同,不同种物质的分子性质不同判断对错,不要太深 联合国吧世界上的国家分为两大类一是.2是.中国属于哪一类 宋太祖杯酒释兵权的目的是 “同种物质的分子性质相同,不同种物质的分子性质不同”这句话正确吗?为什么?这是初三化学书的习题 文言文中“为所结构” 除表被动,意思是? 北宋建立后,宋太祖杯酒释兵权的主要目的是什么? "同寝,中夜闻鸡鸣"包括怎样的成语 联合国把世界上的国家大致分为两大类,一是什么,二是什么.我们中国属于什么 为什么宋太祖要“杯酒释兵权” 为什么二氧化碳不能穿过毛细血管? θ=arctan(4/3)=53.13° 怎么算出53.13°的 怎样改变共射放大器的偏置电路来改变组合放大器的性能 co2不从毛细血管进入胰腺组织细胞的原因是?答案说co2不从毛细血管进入胰腺组织细胞的原因是胰腺产生co2,且浓度高.胰腺怎么会产生co2,为什么要产生co2?毛细血管不就是淋巴吗?最好不都是要 世界有几个字 赵匡胤为什么杯酒释兵权? 用酚酞作指示剂 用酚酞作指示剂 盐酸滴定Na2co3 达到滴定终点 离子浓度关系为什么达到滴定终点时恰好完全反应生成NaHco3和Nacl? 谁能给我看一个世界上笔画最多的字? 宋太祖 杯酒释兵权 那些权臣为什么听他的呢? 工业上制备纯硅反应的热化学方程式如下:SiCl4(g)+2H2(g)⇌Si(s)+4HCl(g);△H=+QK工业上制备纯硅反应的热化学方程式如下:SiCl4(g)+2H2(g)⇌Si(s)+4HCl(g);△H=+QKJ/mol(Q> 古文中的“以”翻译成“把”表什么?比较翻译成“用”表方式.比如 A=arctan1/2 工业制备纯硅的反应为SiCl4(g)+2H2(g)=Si(s)+4HCl(g);△H=+240.4J/mol,生成的HCl 通入100ml/mol 的NaOH溶液恰好反应,则反应过程中( )(填吸收或释放)的热量为( )kj.需要两空的详解哦,不求多,但要易 钠和酸反应时是不是也先跟水反应先的啊 现有某钢样10g,在充足的氧气中燃烧后,生成二氧化碳0.22g,求钢样的含碳量比率写出方程式及主要过程 液化气热水器在用个几分钟后为什么火会熄灭后马上又自动点燃,并如此重复,是怎么回事? 文言文中被动句往往会有哪些标志? 它的主谓宾有什么特点? 韩信,张良,萧何各是哪个时代的人,成就是什么RT 找一个成语含有寝 睡觉( ) 钠先和水反应还是先和酸反应? 大家认为张良;萧何;韩信,你会更信任谁?我最喜欢张良,信任他简单或具体说明原因 7、8、9、10、11 文言文 为表被动时这时候为连带的介词结构 做状语么?例句 吾从板外相为应答 y=arctan(1-x^2)/(1+x^2)这个算不算复合函数答案是dy=[-2x/(1+x^4)]dx 但是我认为求微分应该是arctanu求导再乘du,但是du应该有等于u求导乘dx,可是看答案的意思好像没有再算du,而是直接用arctanu求导乘dx ( 足量钠钠与盐酸反应中,先与酸反应还是先与水反应,化学方程式怎么写,写两个还是合在一起写,什么样的两个方程式可以合在一起,最好举个例子, 英语翻译《三峡》“素湍绿潭,回清倒影. 请问y=arctan(1-x),求y' 由古文《孙权劝学》引出的成语是什么?一定要准确无误! 奥尔良烤鸡翅的做法我想用烤箱做奥尔良烤鸡翅,佐料怎么拌? ∫∫(D)arctan y/x dxdy.D:1≤x^2+y^2≤4,y≥0,y≤x 孙权劝学和祖逖北伐中的成语 1、一块蔬菜基地,种着4种蔬菜,其中西红柿有105亩,占总面积的35%,另外三种蔬菜,黄瓜90亩,芹菜45亩,青菜60亩.问另外三种蔬菜占总面积的百分之几?2、 y=2x*arctan(y/x),求y‘’ Arctan的反运算怎么算不用科学计算器 口算 比如arctan1=45‘ 那arctan6.441=多少度 吾尝终日不食,终夜不寝,以思,无益,不如学也.的意思 做饭时若要时柴草燃烧更旺 可将柴草架空 其原因是? arctan(-1)=-π/4,怎么算的? 终夜不寝的寝的意思 柴草燃烧释放的是生物能吗 李某某案31号二审开庭 受害人心情未《三国演义》连环画法文版在法国上架马凯会见比利时首相迪吕波沃尔玛3年欲设新址110个查尔斯不想当国王? 英媒爆王储担心被《中国人看白俄罗斯》首发 获赞民间外希腊疑遭拐卖女童证实身份 其母曾企图英国王储查尔斯否认说过“当国王像蹲监韩调查显示 面试官平均14分钟决定是日媒称4架中国军机同一天越过冲绳飞向专家:旅新大熊猫嘉嘉可能已进入性成熟揭秘网络相约自杀群体:低龄化 渴望得巴西警方要求传讯美国信息业大腕专家:旅新大熊猫嘉嘉可能已进入性成熟俄学者:不要对伊核谈判前进步伐抱过高河岸边那些粉色\"小花\"竟是福寿螺冷空气吹开雾霾带来降温 这两天早晨只经济与环境如何共存? 专家称中国污染婚嫁礼服与传统丝绸邂逅 中华嫁衣创意欧盟方面积极评价中欧经贸高层对话美报分析中国“见死不救”因何屡见不鲜赢在中原实盘理财竞技大赛前任两访河南现任心向往之潮妈要当“网络女主播”百万大河千万河粉南水北调郑州段已安排应急联动工作演出开始了每份卷要过四关主观题也要网上评菜鸟牵手中国邮政快递业将广设自提点擦肩而过打酱油?没意思!搅搅局?挺有趣!寻迹中原古竞技搞不掉的“教父”河南:政府发布的信息要让群众听得懂国台办主任本月下旬应邀访台哎哟这是谁家小可爱?给自己道歉廉政漫画大赛启动“空中菜园”不应成“法外之地”晨钟(陈中)教育集团赴南阳慰问殷晓非夏日冲凉好舒爽和4G看球,比现场直播快一步
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘