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

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

布局O2O Facebook推出实物礼品卡 iSuppli:微软Surface RT实际销量远低于出货量 业界前三甲:App Store两个刷榜者,站了出来 极客无极限 一行HTML5代码引发的创意大爆炸 将服务器“弃”之荒野? 微软玩转露天数据中心 Dropbox:我们现在关注“内容” 而不仅仅是文件存储 访Teradata Aster Mayank Bawa:抛弃无效数据,让分析走向大众化 谷歌Chrome或新增通知中心 与Google Now整合 传言称HBO节目将登陆苹果Apple TV? Crashlytics被收购,应用崩溃报告服务要火了? 微软公布WP7.8完整功能 诺基亚率先升级 BlackBerry 10或许不仅仅是一剂强心针 一周消息树:专访蒋彪:JavaEE是企业级开发首选 移动周报:从封闭到开放,iOS生态系统要变天? 游戏平台上:Win7已跌破70% Ubuntu突破1% 不再那么传奇 扎克伯格时代或结束 微软应该联手Firefox OS,打造破坏性生态系统 中美IT人才俱乐部第一期:硅谷经验面面观 中国第四季度Android和iOS智能手机出货量高达98% 开发者眼中的代码审查“真相” 互联网产品设计的12个理念 Pair、Between、小恩爱:妹纸装个情侣应用吧? 横跨四大操作系统:3DMark将挑战所有智能设备 美国碰壁欧洲得意 华为获CERN青睐 应用数据分析新标准:Flurry增应用崩溃分析功能 Twitter被黑客入侵,25万用户信息可能被窃 16亿美元超级计算机项目助力解读人脑 卡巴斯基发现新型Android恶意软件 可入侵Windows 谷歌发布基于B-Tree的C++模板库 开源产品系列:高性能Web框架Zend Framework LiFi是否会取代WiFi? 电话拨号问题请教 100分 怎样读取数据库中的二进制数据? 急啊~fread的第二个参数忽略回车,怎么办? 为什么photoshop的调色板里只有一种颜色,急,在线 redhat linux8.0中文版有没有中文的帮助文档 Linux Apache+PHP+MySQL的配置问题?? 马上登陆geniusbible.yeah.net网站 我问一个简单问题 各linux都什么优点 这段代吗怎么写? 分乃身外之物,顺便问一个问题。 在delphi中怎么样把字符串的前后空格去掉 有没有人用vss做版本控制的?? 摩托遇到怪事~~决定研究一下~~有兴趣看看拉~~ 求救:哪位有NotesSQL 2.06 email:frank@southsundin.com API ATCS10_SCO505版本,免费的类似TUXEDO消息中间件,欢迎大家使用!!! what is the MAPI? 一个关于子窗体的问题?请大家帮忙,在线等待! 如何做浮动窗体! 一个不是很难的问题。我却很难哟 请教关于访问Jbuilder7中数据库的问题(急) 突然想到的一个问题,请问大家在认真思考问题的时候都习惯做些什么动作? 在SDI程序中,如何在“框架类”中得到“文档类”的指针? 经常看到图片的上传到数据库,以及如何显示的问题,并且在另一个页面实现指定位置显示多个图片!我整理了,需要来登记! 招聘程序员!!!! 各位老大:请帮助!!!!! 请假两天要扣掉薪水的百分之几? JSP通过JDBC连接ORACLE的问题!!! 简单问题,vb得块注视是什么? 为什么mingw和DJGPP. 的主页总是上不去?? 五笔怎么装?装在什么目录下? 最远的距离 请教关于访问Jbuilder7中数据库的问题(急) JSP通过JDBC连接ORACLE的问题!!!!!!!!!!!!!!! 打印机状态,在线等待,万分火急 modelmaker6这东西是做什么的,那位前辈知道 NOTES在用久了之后,邮箱会变的巨大,几百MB,但即使我将邮件删除,其邮件文件还是那么大,怎么可以让它缩小? 我为程序中的职工设了一个序号,人数有多少序号就有多少。可以一眼就看出有多少人。可是当我在离职表中删除职工时。序号跟着被删除。删除 关于sql的难题。 请问如何用SQL语句更改一个表的字段长度,其他都不变. jsp读取oracle8.1.6数据表中的中文,读出为?,着急啊。 上个100帖子已结,现在再拿100分求从导入到数据库的代码,各位老大帮忙看看。 怎样用程序设置文件夹共享? VB中,怎样实现C中的continue? 注册表与记录登录密码 更新表中某字段的值 请问如何实现像delphi编辑器那样,当输入了关键字后会变成粗体或其它的颜色? 有人需要Delphi调用水晶报表的例子吗? 关于ADO+SQL Server2000数据库备份的问题! vb.net应用程序! it,speak,become,English,that,I,get,the,could,was,I,could,job连词成句 被人类砍伐了的森林有哪些?请写出名称. 有没有初三的政治书最好是有笔记的? I Speak Because I Can 歌词 如果人类过度砍伐森林,会给森林的生态系统造成什么影响? 现在橡胶多少钱一公斤?我有个亲戚他家好多橡胶,请问现在哪位哥哥姐姐知道那东东多少钱一公斤?鞠躬~ 用2根长都是16分米的铁丝分别围一个长方形和正方形 我要起个好听的英文网名 油墨用开钛白粉69 改用龙莽996可以吗 英语翻译1、Landed fee deliver to the destination place2、Certificate of the material and the certificate of possible treatment of surface 3、How man is the produts you could refund the mold charge? 砍伐森林会对人类和动植物 的生活产生哪些影响 龙组词有哪些 第3、4、5题, where do you come from?where do you come foom? 23分米长的铁丝围成长方形,要求长方形和宽都是整分米数,怎样围成的长方形面积最 2 3 4题我做的对不对 英语翻译 用12分米的铁丝围成长和宽都是整分米数的长方形,面积最大的是多少平方分米,面积最小的是多少平方分米 高中物理竞赛试题 急一质量为m的炸弹一速度v飞行,其内部的炸药产生能量e,使此炸弹分为两半,一半的质量为另一半的k倍.若两半仍能沿着原方向前进,试分别求其速率 英语翻译 英语填空题求助,有图 “你”左边的那个单人旁念什么呢?3Q 每年有多少亩森林被砍伐 历史(上册):北京师范大学出版社政治(全一册):人民教育出版社要期末测试题,越多越全越好, 诠能组什么词 被砍伐的森林占所有森林的多少 印刷纸的种类印刷纸可以分为哪几种 诠字怎样组词?组一个就够了. 想给男朋友改个通讯录备注 ,要英文的.大家都知道那个最大限度是14个字母我准备在前面打两个空格 ,所以就只剩12个字母了最好要一个句子 请附上翻译 什么是非涂布印刷纸?我在写一篇关于造纸的论文,如果大家有更好的文章或名人名言或关于造纸的书籍,请多多告诉我给我,请与27日前发表给我! 诠换偏旁组词 有关电功率的计算题目.某电灯上标有 “220V 40W”.(1)把该电器接入110V电源中,计算此时的实际功率.(2)把该电灯和“220V 25W”的电灯并联在220V电源中,哪只灯更亮?为什么?(3)把该电灯和 印刷纸按用途可分为哪些类别? 五句形容人一心一意的古诗,求 2,4, “电话簿”英文怎么说? 一心一意这种形式的词语 请检查1.2.4.5. 电话本的英文是什么 一心一意类的词语比如一心一意 王字旁加个月字念什么字 森林采伐用机械定义就是这个,帮了个忙的啊,就这几天要交了. 我国古代发明较早的化学工艺有A造纸,指南针,制火药,冶炼钢铁 B制青铜器 制火药,印刷术,烧瓷器C制青铜器,冶炼钢铁,烧瓷器,制火药,D冶炼钢铁,指南针,造纸,印刷术 王字加个月字念什么?那为什么字典里没有啊 我要的是那种硬的橡胶的密度,最好是市场上常用的,价格便宜的.密度 密度? 指南针和印刷术是谁发明的·Y 电热地膜的工作原理是什么? 龙怎么组词 i know you want me翻译成西班牙语. 电热水袋的工作原理,及其中的化学药物是什么 请问:保持的近意词,成果的进意词,思考的进意词! It was because I could speak English that I got the job我想问一下这个句子各部分的结构(成分)分别是什么?这个句子的用法是it作形式主语?还是其他什么用法, 填空题1,3两题 砍伐森林后会导致水患,那么森林防止水患的原因有哪些 It was becauce I could speak English that I got the job.请问句中的that作什么? 填空题第2.3.4题 橡胶价格什么时候会上涨啊?现在的橡胶价格还不如青菜白菜价格,真是苦了我们这些胶农了,没法过日子了 It was beause I could speak English that I got the job.分析句子成分, 请问第3道填空题怎么做? 橡胶价格还会涨吗
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘