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

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

投资可再生能源:Google 2亿美元投资风力农场 构筑商业生态系统 阿里巴巴集团全面变革组织架构和管理体系 美国众多银行网站遭DDoS攻击 疑似伊朗所为 构建高可扩Web架构和分布式系统实战 CES2013 AMD发布移动处理器路线图和环绕计算概念 对话Linus Torvalds:大多黑客甚至连指针都未理解 PaaS玩家们,怎么演好自己的角色? Apple高管表态:低端机绝不是iPhone的未来 Web开发人员应该知道的IE 10兼容性问题 一周消息树:CES2013揭幕 科技巨头纷纷发力 2012专利排行榜 IBM位列第一、Google增长最快! 微软赞黑客并称Windows RT越狱非安全漏洞所致 周报第46期:GitHub历史上最糟糕宕机事故回放及反省 著名计算机黑客Aaron Swartz自杀身亡 移动周报:移动互联网行业技术趋势前瞻 旁门左道:让移动游戏下载量暴涨的邪门功夫 可植入身体:“可穿戴计算”时代来临 Web服务器份额:Apache仍居首,Nginx将超IIS 防税务欺诈:挪威财政部将开源收银机代码 响应式设计实战:3人+1.5个月 IE10优化版cnBeta诞生记 不听乔布斯劝告:“不专心”的Google照样干得好 躲过一劫!苹果不锁杂志类APP介绍截图 Oracle发布软件更新修复Java漏洞 设计师将吞噬工程师吗? 开源产品系列:小巧灵活的Web框架web.py Windows Server 2012 VHDX格式揭秘 Rovio将赶超Zynga 成为全球最受欢迎游戏公司 Netflix基于AWS的大数据平台Hadoop架构解析 微软开始提供Windows Embedded测试版系统 Aaron Swartz自杀原因存疑 引发互联网连锁反应 重金吸引开发者 BlackBerry10应用36小时增1.5万 在MFC中出现libcmtd.lib(crt0.obj) : error LNK2001: unresolved external symbol _main错误的可能有几种,如何解决? 有没有对音箱价格了解的,也许你懂一点就能回答我的问题。 求助:如何设置Jet OLEDB:Database Password的属性 .mdb数据库的字符型字段不能超过50个字符,但是我要存入更长的字符于一个字段该怎么办呢? 我只安装了Rose,Vss,却常有提示:虚拟内存不足,我在“设置”中改为499mb,还是没用 HtmlInputFile的缺陷,还可以用什么控件或方法来做? 问一下wdl格式的文件用什么软件可以打开? 先来的得分。OVERRIDE 和 OVERLOAD 的区别究竟是什么?谢谢! ip地址的添加, 大家看看什么原因出错???SOS 又是一个巨简单的问题,怎么偶老是问这样的问题? 为何会这样? 谁能帮我用PB做一个学籍管理系统 大家都来发表意见:我因为职业道德问题,被迫辞职 谁能开导开导小弟,各位大哥帮帮忙吧。我真没得混了。 在VB中如何把图片存储到SQL Server 的数据库中 请问CDialogBar用鼠标拖动改变其大小(这时其大小并没变化)时,将触发什么事件? capboy:为什么我加入了memfile.h后编译回出这样的错误: 我为什么在2000svr下,安装realserver7.0,装不上???(请高手帮忙。) 如何编写象datagrid一样的控件?大家给点建议。 jb6中怎么象JDK中一样编译类哦? 关于非阻塞通信的一个问题!(BSD系统,非WSA...) 哪里有power builder 8.0正式版的下载 我为什么在2000svr下,安装realserver7.0,装不上???, 想用opengl作动画,那本书好?谢啦! 如何才能实现类似PHOTOSHOP的标尺? 有没有方法可以获得所有的消息常量? 各位大虾,请问如何抓屏,就是只抓窗口内容的那种,感激不尽 这样define有什么好处? 对同不端口能不能用多个socket与多台机器建立通信?? 如何判断DataSet中是否为空~!! 求用TAPI通讯示例! 一个很好的访问统计系统,但是希望高手能修改的更完善一点 ACCESS的问题 大家都是怎么管理记录的唯一性的啊? 苦恼………… 怎样截获窗口的最小化、最大化、关闭按钮和双击窗体的标题栏的响应事件??? 如何判断DataSet中是否为空~!! 有没有人在用或会用FreeBSD,能不能回个话? 哪里有pb8.0正式版下载? crystal report 8.0装完之后,为什么在PROJECT ADD里找不到crystal report? ListView的背景怎么改变?要求显示的内容为透明的? 我想找个工作,请指教! 重复这个字符为什么不能运行呢? 能不能这样访问property? 大型的邮件系统,支持5万用户 菜鸟求助 command.exe vs cmd.exe;regedit.exe vs regedt32.exe区别?fat32上能装win2000? VC中怎么调用template类。。,知道者请进 capboy:麻烦你能再发一个用memfile例子改写的网络播放器的例子给我吗? 今天心情好,问题基本解决,散分! vb中怎么样将excel模板保存成以今天的日期为名的excel文件 如何在文件夹下放一个.htm文件,使得打开文件夹时需提供密码才能打开? 浓硫酸在加热条件下才与铜发生反应.二氧化锰在加热条件下才与浓盐酸发生反应.浓硫酸、浓硝酸在加热条件下才与碳发生反应.……………………………………………………某些氧化剂在加 请问:食用少量石灰对人体有害吗? 为什么滑动摩擦力和拉力无关? 氧化剂,发生氧化反应, 石灰场发石灰时散发出的白烟是什么?对人体或环境有害吗? 旅馆房间内电话号码有可能不是当地的号码么为什么 我住在北京的一家旅馆内 但房间内电话号码归属地却是南京呢? 老人该配模拟助听器还是数字助听器? 下列变化中,必须加入氧化剂后才能发生反应的a Fe2O3---Fe B Fe--FeCl3c HCl--NaCl d MnO2--MnCl2 如图所示,水平拉力F是19.6牛顿,刚好能使196牛顿的物体在水平桌面上匀速前进,求桌面对物体滑动摩擦 逆战爆炸箭头好还是燃烧箭头好我喜欢玩PVE 你们觉得哪个好 总觉得两个都好 下列反应需要加入氧化剂才能发生的是A.Br2→NaBrO B.K2O→K2CO3 C.K→KOH D.Cl2→HCl可是为什么A不对?急·· 数字编码 这个方程怎么解. 初三化学的各种燃料燃烧的公式只要燃料的例如酒精什么的,不要其他的! 石灰对人体有害吗 逆战大都会怎么可以开出燃烧箭头或者爆炸箭头?不知道的别瞎说! 大神们来快(1) (3)题 如图,用10牛的力拉重为100牛的物体在水平地面上以2m/s的速度匀速前进,物体与地面的摩擦力为物重的0.24倍则拉力的功率为?w,装置的机械效率为? 逆战大都会打狗有多少几率打出燃烧箭头 英语四级的成绩单上的身份证号码错了,这张成绩单还有效吗? 亚硝酸钠 吃多少会死鸡吃了亚硝酸钠会怎样? 用水平拉力使重为100牛的物体以0.5米/秒的速度匀速前进.已知物体与地面间的摩擦力是20牛.Q;(1)在一分钟内拉力使物体移动了多少距离(2)拉力的大小.需要点过程,越快越好, 1、2、3题 平房墙壁上白色的类似石灰渣的是什么,对身体有坏处吗 强氧化剂与强还原剂不一定能发生反应,能不能举一个例子啊? 刷墙(用石灰)对身体有害吗? 墙壁为什么要涂石灰?墙壁涂石灰除了美化还要什么作用? 求目前所有的强氧化剂和强还原剂 房间放生石灰对身体有害吗? 光子有无质量? 强氧化剂还原剂求浓硫酸与铜的反应方程式 石灰粉有吸潮作用吗,为什么电箱里放石灰粉 光子是什么东西,有质量吗要回答确切 一物体以1m/S的速度做匀速直线运动,摩擦力是10N,当速度增加到5m/s时摩擦力是多少?求救! 人类最终会进化成什么样子呢? 光子的大小光线由光子构成,一个光子究竟有多大?应该如何描述它的体积和密度? 求四级成绩!忘记准考证号了!是否可以通过身份证号查询到? 人类还会进化吗?会进化成什么样子?我用手机提问的 假设光是由光子组成的,那光子的生命周期是多长,光子的运动轨迹,光子的能量,质量,体积等等 能不能帮忙查以下四级成绩?准考证号忘了,身份证号行不行? 人类回进化成什么样子?人类会进化成什么样?是科学家说的矮矮的,头大脚小吗? 光子有质量吗?物体接近光速时,质量变为无限大,所以惯性为无限大,要改变它原来的运动状态就要对其施加无限大的力,所以任何有质量的物体都不可能超过光速.但是,由波粒二象性可知光可以 英语四级忘了准考证,用身份证号,可以查成绩吗?印象中,上次查四级成绩的时候(在99宿舍网),好像可以用身份证号查询,是准考证和身份证二者选一.我想知道用只用身份证号码可不可以查询 求大神帮忙做一道线性代数题?急 光子是否具有质量和体积 农药和水的质量比是1:10.现有这种药水共22千克,农药和水分别有几千克? 大学线性代数!第一第二题, 地理求大神解答! 10年12月英语四级忘记准考证号码 怎样通过身份证号码转换 山东省 第三题,线性代数的题目,求大神帮忙 这分别是哪三座城市 用身份证号查询四级准考证号江苏省 准考证号忘了有这样的网站吗 线性代数题,如图. 亚硝酸钠食用多了会怎样 我的四级证丢了,准考证号码都忘了,只有身份证,能查到成绩和准考证号码? 求大神做个线性代数题, 农药的危害 (要全!)一定要多,越多越好. 生石灰和水再一起为什么会变热? 数字编码有哪些 正确使用农药有何益处,滥用农药有什么危害只要重点间简短
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘