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

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

微软发布SQL Server 2014预览版,展示内存数据库技术 帮助软件开发者提高效率的10个小窍门 我想做个程序员:Technovation Challenge圆女孩编程梦想 未来我们开发的Google Glass应用将会是什么样? 独家:前RIM大中华区总经理刘征宇,加入Appconomy 用一个API搞定一切 Segment.io为移动开发者提供便利的分析数据分发服务 TIOBE 6月编程语言排行榜:JavaScript回归前十 《Kingdom Rush Frontiers》上线后 迅速抢占27个国家游戏榜首 移动周报:85后程序员,iOS开源项目,细数7天大事件! Instagram:从Redis到Cassandra 成本节省1/4 乐元素CTO凌聪访谈:游戏引擎技术选型之王道 iOS 7的新设计并非止于外表 WWDC 2013大会10大启示:正向开发者支付大量现金 云计算大会微软专场成功举办 Windows Azure公众预览版上线 IBM全球大裁员 在美国裁员已经开始 动动鼠标,决定“中国十大优秀开源项目”的归属 为改善Flickr 雅虎收购拍照应用开发商GhostBird 让你轻松学习新代码库的六个步骤 RESTful API 设计最佳实践 谷歌11亿美元豪购Waze原因:获取数据 争本地广告市场 为什么大家都要疯狂吐槽iOS 7的扁平化设计? 伟大的程序员是天生的,不是造就的 比Hive高效7倍 Facebook推新一代查询引擎Presto 未来的存储系统设计——PMC技术交流会举行 第五届中国云计算大会PPT尝鲜:十位专家分享的架构实践 “DIY”可穿戴设备:索尼开放智能手表固件 在微软的八个月里,我学到了这些 谷歌实习生每月都拿$6000,你呢? 【第五届中国云计算大会】由瓦特变比特输出,新疆要做中亚云服务中心 应用程序扩展性实现的十宗罪 图文:看谷歌实习生的惬意生活 excel中的两个问题:1、如何关闭userForm1窗口?2、如何在打开userForm1窗口时使主窗口最小化? Dll函数问题 咋判断用户点的四点能围成一个四边形? 网站中的某一页嵌入VB的AtiveX 控件,客户端能访问网站,但不能打开AtiveX控件。。。高分 请问怎么把 string 型转换成 System.Data.SqlDbType 型? 机器无法启动 主板有问题吗 高分请教 创建不了C#Web项目,急!!!(刚学C#) [求助] 用fopen函数读不出URL文件? 怎么判断listview是否有一个item被选中? 请说一下硬盘容量和内存容量的关系! ▄▅▆▇█ 水园的大背景离不开吵架 █▇▆▅▄ 请教mm有个问题! linux下的编程问题 以Oracle为例说明如何通过ODBC将数据库中的指定表导出到MDB数据库。(原创) 关于一种特殊按钮 SQL语句小问题!!在线等待! 想学ColdFusion 请看我的转载的贴子 Troj_Hacline.A是什么病毒? 关于XML的问题,150分赠送,急 dll问题。很简单。 感慨!!!(潜水一年,吐个泡,顺便发表一点意见) 帮个忙 怎么在Installshield中创建对话框,并操作ACCESS数据库? 连续给分:邮件服务器防病毒问题! 我想编译一个像API一样的dll 启动rose就出错,高手来看,100分 关于打印的一个问题 急!!!请提供一段设置Session的全部代码,谢谢!! 请问,从第二帧开始播放的代码的什么??? 老师要求编写五子棋的程序可是我实在想不出该怎么设定估价函数啊帮帮忙啊? 感觉压力比较大,活不下去,想跳楼自杀的进来侃侃 一个关于php提交表单的问题。 各位大侠,要命问题! 怎么在Installshield中创建对话框,并操作ACCESS数据库? win2000server的管理员密码让人改了,怎么办呀! 太气愤了,帮帮我? 用BDE连接MS SQL SERVER,为什么运行后出现未知用户名或密码的错误? datagrid中能不能进行统计 如何编写“outlook”风格的界面 如何实现flash截图?我研究了好久也不明白,希高手指点!(在线等待) 程序调用的DLL 在delphi中,用ADO如何实现将SQL中多表导出到一个Access中? 无聊啊无聊 想考软工???? Socket奇怪的问题! foxpro中如何实现按一按钮启动word和excel,并且直接弹出打开文件对话框? 关于分级权限管理(300分) 紧急求救!!!!!!!! 客户端web服务是否需要别的控件支持 帮帮我,朋友们请进.... 注塑模和冲压模那个更快挣钱 注塑模与冲压模有何区别 人非生而知之者后一句是什么? 冲压模和注塑模的区别是什么~那个比较难!在说一下两个的前景~然后在说一下那个比较难搞~还有个没有说清楚~那个比较难点 缓冲溶液的缓冲容量与( )和( )有关? 人非生而知之者的下一句是什么 如图,方格纸中△BEC的三个顶点分别在小正方形的顶点上,请你在图中在画一个顶点都在格点上的三角形与△BEC全等 画出图来 在空气中燃烧木片和木炭各有什么现象? 怎样计算 木片夹住木块的弹力?我觉得这里的弹力和摩擦力的方向根本是不一样的啊? 最近比较火的事情是什么?最近娱乐圈有什么比较火的事情吗?还不是特别清楚. 带电粒子在磁场中得偏转的一道题如图所示,真空中有(r,0)为圆心,半径为r的圆柱形匀强磁场区域,磁场的磁感应强度大小为B,方向垂直于纸面向里,在y=r的虚线上方足够大的范围内,有方向水 踩爆气球为什么很爽? 现在全世界最关注的事情是什么 “芜湖市三山区峨桥茶市”翻译成英文 踩爆气球的感觉? 世界上所有注入印度洋的河流有哪些主要的河流 4条就行了 安徽省芜湖市团结一村门面房四幢1号 英文怎么翻译呢 踩爆气球都用到了什么力?请各位ggjj速回答. 用长,宽,高分别是3厘米,1厘米,1厘米的小木条拼成一个正方体,至少需要这样的小木条()条 为什么人们会产生爱情 (化学问题)把什么滴入水中能使泡沫融化,泡沫是否和脂肪有相同成分.鱼油中是否含有这种成分?为什么有的鱼油能融化,有的鱼油不能融化,区别是不是里面有特殊化学成分我说的是垫冰箱电视 一根长4米宽2厘米厚1.8厘米的木条一个立方要多少根 风能最早利用在什么上? 人非生而知之者 之的意义 关于一道数学题,关于轴对称的要求合情合理,不超出七年级范围如图,△ABC中,ABPC-PB. 英语翻译芜湖翻译公司哪家最好? 爱……恨……真的是相对吗爱恨是什么啊 如果把南极的企鹅养在我们居住的地区,要注意什么问题?现在回答,有急用! 南亚三条大河是那三条? 有好多的时候,都会觉得会恨什么东西,看这个东西其实却不是心里想恨 巧而相反是心里爱的 ,那这个到底是怎么回事呢,是不是爱到了最后都会变成恨? 能不能把南极的企鹅放到北极去养? “双袖龙钟泪不干”的前一句是什么? 恨只是因为爱而产生的吗?有亲情,友情.爱情.恨只是因为爱来的吗? 把南极的企鹅移养到我们的居住地区应注意什么? 为什么 人们会产生爱情. 如何将做脱脂奶时提取的脂肪块,溶化回牛奶中? 如果把沙漠中的仙人掌和南极的企鹅移居到福建这种温暖的地方,要注意什么问题? 双袖龙钟泪不干 龙钟的意思 英语翻译 妹妹可以摸哥哥的身体吗 双袖龙钟泪不干是何意?运用了什么修辞手法,有什么作用 这道题怎么做?为什么这么做?翻译? 求大神帮忙,急用 望车友们说下十分浪~荡的对我大秀胴体的妹妹,给我吧大神们,三天两头我要要出差去别的城市,无聊的时候不知道如何打发呢,上次看过网吧隔壁的大叔看那些很好看的网络女的演绎哦,可是自 ,双袖龙钟泪不干.上一句是什么 英语翻译Thought the window,you can snow------ ------- the sky 鸡也需要氧气对吧.小妹有问鸡也需要氧气,对吧,如果是的,那我想问,其实当鸡还是蛋的时候就有生命迹象了,那个时候它就不需要氧气吗,这哺乳动物不一样的是孩子在肚子中有妈妈给氧,那鸡 双袖龙钟泪不干 人非生而知之者的下一句? 春蚕到死丝方尽 蜡炬成灰泪始干用了什么修辞手法要说具体 巧克力加热融化后加入牛奶能凝固吗?10:1 人非生而知之者,( ) 一鼓作气,(人非生而知之者,( ) 一鼓作气,( ),三而( ) 第一个答对给好评! 春蚕到死丝方尽 蜡炬成灰泪始干是什么修辞手法 牛奶里面加上融化了的巧克力加热之后打出泡沫的那个东西叫什么来着如题~~~ 爱的深恨的就深对吗 春蚕到死丝方尽 蜡炬成灰泪始干运用的修辞手法我在网上查到了竟然有拟人、比喻、谐音、双关、对偶这么几种.但我思来想去,比喻、谐音、双关在哪里?还有这句话到底是比喻还是拟人?请 融化巧克力的時候能加牛奶嗎? 为什么爱得很深,而最后也恨得更深? 怎样确定带电粒子在磁场中的偏转方向比如 一个电子水平向右运动 加以垂直于运动方向的磁场 怎样偏转 为什么细小的木片比大块的木棒要容易燃烧从燃料充分燃烧的因素解释 为什么嫩江不是松花江源头要算长白山为源头 国际新闻早报:土耳其出动战机拦截叙利Netfix测试4K超清视频 或于明中马友好合作关系不断向前推进--访中菲报:中国海基核威慑仍受制第一岛链克里中东之行访埃及 停留数小时修复两美国务卿克里访问埃及 承诺美将与埃过伊朗最高领袖称美是微笑的敌人 对核谈美研发新型间谍机 可一小时内到达全球泰国芭堤雅发生游船沉没事故 造成中国如何确保机密数据安全?把密码藏在潜意港媒:设计师为《人民日报》新大楼辩护中国如何从西方垃圾中获益港报:“伙伴关系”成中国重要外交工具浙江普陀山大型翡翠观音宝像开雕(图)广州高端相亲会测谎仪上阵 许多女性表温州两干部停车救人被撞身亡 被追授“赣州副市长否认脐橙染色 记者暗访揭染孙杨涉嫌无证驾驶 被交警带走或面临1珠三角乒乓争霸赛明年规模扩大 奖励金英超门将开场13秒进球 还是英超距离菲律宾副总统:人质事件总统不可代表整11月2日非农周现货白银、原油重大事印度艺术家创作沙雕哀悼俄坠机遇难者.蚝油豆干3400点我们早已成功清仓!沐银添金:如何做一个短线”交易大师“贼胆忒大 带着到赃车去金寨县一派出所生存模式为什么没有使用此命令的权限内蒙古组建新兴产业创业投资引导基金桃园机场跑道频出状况 官员:引进电脑范长龙会见我军参加第六届世界军人运动穆之同志“以新华社为家” 深切缅怀朱苏宁物流不玩人海战术 智能模式引领电西班牙华人女店主在自家店内险遭性侵宝姿之后 女装行业发展现状及前景分析新宠物桂花精灵宠物详解 三大宠物之一污水处理市场化运作 PPP新模式前景程怡如:美联储明年3月才加息?PVP更甚一筹 玉面剑魔属性培养不可注意:乌云蔽日终有时 次新股需辨别真盖亚天赋加点 自由之战盖亚新版本天赋公会副本:荣誉之塔2层 捡到你不想再
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘