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

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

命途多舛的webOS,两度易主,生生死死多少回 Citrix全面开源XenServer 为了三十亿人的网络幸福:Google投资O3b发射网络卫星 Windows 8.1中IE 11开始支持WebGL和SPDY/3 微软Build 2013开发者大会:盘点Windows 8.1的15个重大更新 瞧!这是摩托罗拉移动新Logo,你有什么感觉? 专访UEditor创始人战毅:打造最佳的用户编辑体验 Eclipse 4.3 正式版发布 代号Kepler 为兴趣而生 七大编程挑战项目,你敢来吗? iOS 7辅助功能:左右摇头控制iOS设备 挑战传统关系型数据库:Facebook图形数据库TAO揭秘 揭秘“棱镜计划”幕后的技术 你更新了吗?Visual Studio 2013 Preview和.NET 4.5.1同时发布 你主要使用什么编程语言? 跨平台游戏开发工具App Game Kit或将新增更多强悍功能 移动应用推广的那些事儿:应用发现篇 DDoS攻击也能成为一种云计算服务 Netflix开源Hadoop集群调度工具:日处理近万作业、上千TB数据 传谷歌正开发自己的视频游戏主机和智能手表 AMD APU战略转型:全民四核,发力“云+端” 富士康自主研发智能手表 惹苹果发来订单 开发者眼中的iOS 7:重设计过程没想象中那么糟 游戏引擎Unity宣布免费支持Windows Phone 8及Xbox One 蝉游记王益善专访:7人小团队实现App 30万下载量 去除IE 10广告的两种方法 直接拿来用!最火前端开源项目(二) 工作变得简单又高效 试试这八个WebApp 移动周报:生于微信,疯狂猜图的推广经 DataTorrent 将数据分析速度从“实时”提升至“现在时” 华为FusionCube开启全球规模商用 黑暗架构:以最少时间完成系统升级并获客户认可的开发之道 關於框架 请版主帮忙(怎样将asp中的动态数据填充到有一定格式的EXCEL模板文件中) 一个简单的问题,急! 为大家吐血献上:余世维《成功人士讲座》录像 Tomact设置问题 很简单的“异常”问题 linux vi的绝对路径是什么? 为我即将离开PB和IT行业,散分! 今天是中秋节,还是单身的水友进来坐坐。 哪有Crysrept下载?? Session为什么掉了??急切等待!!! struts中一个页面如何显示多个FormBean? 过节了,散分,祝大家中秋快乐!!!!!! 請問TForm中相當於MFC中OnIdle()的event是什麼 数据库问题,急!!急!急!急!急! CISCO2600的ISDN拔号不会自动断线,怎么办? 谁知道怎么验证一个用户名和一个密码是不是在WINDOWS2000中添加过的?而且正确? 。。。谁能给我发一个“智能狂拼2”的下载连接地址 请求--网页评比规则? 在visual.net上无法调试存储过程。急。求救 asp加密程序 我用SQL server+DElphi中的ADO做数据应用程序,数据库备份后,怎样实现数据库的恢复? 贴子太多了,看不过来了,大力liuri出来讲讲 sqlserver 用 jdbc出错 ,Microsoft][SQLServer 2000 Driver for JDBC]Error setting up static cursor cache 如何在C#中用代码控制本地FTP服务打开和关闭?99分,中秋快乐. 关于dll的问题,在线求教 昨晚,我抱了我MM一下!开心呀!散分! 有什么软件可以使上网不受防火墙的限制? 一个C的图形函数,请问怎样用的? 数据库查询语句执行错误 web页面的activex控件怎么调用服务器上的动态连接库?? 中秋散分 【泰坦】祝大家中秋节快乐!(1) 纯jsp聊天室的页面刷新问题 这个MSDN是不是常说的那个MSDN资料库? 一句sql语句问题 【泰坦】祝大家中秋节快乐!(2) 我的触发器为什么没有响应啊。在线等啊 pb9.0+sql server 2000,怎样制作程序发布? pb给dll传递结构数组的问题。急!!! pb9.0+sql server 2000,怎样制作程序发布? 为什么关闭MSDEV的时候,会导致它占用90%以上的CPU时间??? 如何在代理中同時讓兩個套表同時結案 菜鸟问题:我想把一个CString类型转换成LPBYTE类型应该怎么弄? 如何在JRUN3.1中连接SQLSERVER, 我的web server用的是IIS5 怎么样在JSP中显示 WORD 或 WPS 格式的文件? 如何在servlet 中存储数组用javabean 取数组用JSP显示(在线等,急,谢谢) 如何使Response.Redirect "xxx.htm"打开的网页是满屏显示! 鄙视民工的人,给你讲个故事听。 庆祝中秋佳节,大散分~ 中秋节到了,与大家同庆,散点分!!!祝大家开心呀! 各地汛期时间如何确定 什么是汛期?汛期的持续时间与什么有关? 汛期一般什么时候开始? 囧都有什么含义 英语中怎样计算周末 若干辆车运送一批货物,若增加三辆,15趟完成,若增加七辆,10趟完成,现加1辆车,几趟运完可以用盈亏做还有一道:太空中有x和y两种细胞,一开始有一个x和20个y,一秒钟内一个x吃掉一个y,同时 为什么雄蜂的精子可以在蜂王体内存活一辈子?为什么雄蜂不采蜜?为什么雄蜂的精子可以在蜂王体内存活一辈子?为什么雄蜂不采蜜--它们不怕被其它蜂赶出蜂群这个唯一的家吗? 工作周总结怎么写啊?我是做工程的.稍微具体一点. 哪些地方会形成汛期?形成汛期的地方又有哪些地方容易有水灾? 请问海啸和洪水的区别海啸和江河上的洪水那些破坏力比较大. 北方汛期是什么时候 日本进行最大规模军事演习 日媒受压力大学生寝室里开小超市营业俩月被学校勒中国云计算产业发展及大数据应用高峰论农夫山泉派员举报《京华时报》 称实行20家网贷平台陷兑付危机 投资人面临疑百度帮新客户侵权 百度老客户状告百美国国务卿克里促埃及政府勿延长全国紧局势动荡民众对政治改革灰心 埃及再现缅甸发生沉船事故 载有70人船只仅8民调显示超3/4德国人认为美国国安局美国国务卿克里促埃及政府勿延长全国紧万和发布热水器6星级价值标准“节省保证金,就增加了流动资金”七尺男儿演活古代美人患病考生就诊绿色通道设立面包车坠河 司机乘客溺亡陶喆将娶小16岁圈外女友高尔夫公开赛开杆 成都球友57杆直呼520公里超长赛段 环塔车手们累疼了广州国际金融中心微信上线阳山中医院通过二甲评审意大利惊天冷林神奇我道传承重生成山都市养花人异世盗魁弑光狂神记霹雳寰宇之黄泉一本古书惹的祸紫炎心九界之门色季拉山旅游尼洋河旅游鲁朗林海旅游甘丹寺旅游少林寺旅游一线天旅游峻极峰旅游大法王寺旅游嵩岳寺塔旅游嵩阳书院旅游洛阳老街旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘