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

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

Dart里程碑2发布 大幅提升dart2js性能 To Facebook:HTML5不好用?是你不会用! AWS推快照备份服务抵御宕机风险 靠谱吗? 微软品鉴会秀Windows 8电脑 上百款新设备年末上市 甩开外包,雄踞榜首:揭开“宫爆老奶奶”成功的秘密 IBM收购大数据公司StoredIQ 推动大数据传输能力 令人意外:前Windows部门总裁将去哈佛教书 舒迅:产品经理必读的九步法 独家爆料:Facebook移动客户端开发揭秘 一个独立开发者的自白:我如何在一年赚得60万美元 Dropbox收购Snapjoy 意欲打造媒体中心 2012世界“末日”:有经过正确的分析吗?! 23.5亿美元!谷歌出售摩托罗拉机顶盒业务 两家巨头相继放弃移动广告,移动广告形势堪忧? 应用洗牌,还能免费多久?Google推出iPad版Quickoffice 2012末日APP推荐 求生自救必备! Windows8上网利器 不卡死的IE10浏览器 为何Java程序员学习Clojure有优势? 我们是如何阅读代码的? “热水冷却”技术将主导美国国防部数据中心改造 程序员想玩转大数据:需要知晓的12种工具 2012年谷歌应用商店增长迅速 但苹果最赚钱 Apple微软Google都在竞购一家创业公司 违反新条款?苹果强行下架AppShopper 2012移动开发教程盘点:最棒的国外游戏开发站 重思JavaScript的好与坏 细数那些 NeXT 留给 OS X 的遗产 一张图让你知道大数据的生态系统 Camera360开放SDK:拍照和滤镜一行代码搞定 一周消息树:计算机将拥有五感 人类面临威胁? 通晓数学的人就可以当程序员吗? application.initialize完成了什么 高手来帮忙啊~ 看看java的魅力 如何通过自制程序的编辑框向现有一般应用程序编辑框传送内容? 窗口执行顺序问题,请多帮助,谢谢 如何自动取得server的日期和时间 怎样让文件指针指到文件末尾,必须skipline一行一行跳吗? 我想在菜单前添加图标,使用Bitmap属性但是为何只能载入*.bmp文件而不能使用*.ico文件,我只有*.ico的图标,请问该如何解决。 有新建一个文本文件并给其命名的函数吗,怎么用 我还真不懂呀? 这个COLTYPE是怎么用的呀?你说它怎么得到表中字段的类型呀? 有关存储器(ram,rom)的编址问题。以及32位或更多位芯片的问题。 一些汇编问题。想来问bcb的兄弟{bcb里好象有不少汇编高手} 救命:在安装了sco openserver之后,系统不能启动,先前安装的win98和win2k也不能。 请问如何进行URL译码??? 请问怎样截取一个string中的一段? 请问delphi做的exe最小可以到多少?怎么做? 我想请问一下WINGATE的具体怎样在WIN2000服务器版中进行设置。 ASP的同志们,能不能留一下QQ号码? 请问何处有破解ACCESS2000的程序或源代码呢? 请问要在TEdit.text组件文本串中找出当前光标在第几个字符上怎么办?谢谢! 请问关于dbImage控件的使用方法? 关于HDC及双缓冲的问题? xxxbird(*说你行,你就行,不行也行*),来领“我遇到几个怪问题。。。。。。”中的分 为什么ASP没法向SQL Server中写入数据?代码什么地方错了 大家帮忙找一下,找到我给50分 exe 捆绑机怎么做? 大家谈谈JSP的设计模式怎末了?我有个题目,设计好的大大有奖! 浏览器下的那个进度条是怎么弄出来的? C中的typedef struct和C++中的 struct有何区别? C中的typedef struct和C++中的 struct有 什么区别?谢谢 lastlove(本栏位广告招商中,欢迎投放!),jjdelphi(我真的不懂),jinesc(杂牌军)-(人民军队为人民) 开利息了 一个网页的原代码可以保存到字符串里吗? 有没有各种C++编译器都支持的字符串类型或字符串类? <@> 关于 ProcessMessages 一个想不如大家想,请各位帮忙想个主页的名字吧。 女友23岁,她会选择前途还是爱情?-----一个VB程序员的痛苦 如何实现应用程序与动态库通信??? ----myxfang----偶来贷款了!!!--- myxfang(大富翁银行~业务员~~),都给你了,我可把赌注都压到你身上了 我存钱,没人受理吗?银行业务员在哪? CMainFrame主框架是用来干什么的? myxfang(大富翁银行~业务员~~),我已经结账了,到哪里去取贷款? 怎么释放它? ----myxfang---我给手续费了,我的贷款呢??http://www.csdn.net/expert/topic/203/203903.shtm--- myxfang(大富翁银行~业务员~~),来拿我的骚扰费~ 老师!! 这个动态查询为何总出错? 大富翁银行生意兴隆!恭喜恭喜…… ~~~~myxfang给我们上了生动的一课~~~~ 我被黑了,谁来帮我? myxfang(大富翁银行~业务员~~),我存钱 各们老大,我下了一堆的PDF格式的电子书,用Acrobat reader打开的时候总是说有错,而且全部如此,无一例外,请问是不是我的acrobat reader有问题 圆的周长是25.12厘米,求圆的面积 求阴影部分的面积 单位:厘米 圆的周长是25.12厘米 如右图所示,圆的周长是6.28厘米,圆的面积和长方形的面积相等.阴影部分的面积是多少平方厘米?周长? 一个小圆的半径是6厘米,一个大圆的直径是8厘米,大圆和小圆的面积比是: 下图圆的周长是12.56厘米,圆和长方形面积相等,求长方形的场图是这样的:一个圆的4分之1是长方形的一部分 圆的周长、面积的计算公式?圆柱体、圆椎体的体积计算公式? 小圆的半径是3厘米,大圆的直径是8厘米,大圆和小圆的面积的最简整数比是( 一个圆与一个长方形面积相等,圆的周长是18.84厘米,长方形长10厘米,宽多少厘米? 圆的周长和面积计算公式. 在周长是48厘米的正方形内画一个圆,这个圆的周长是多少厘米,面积是多少平方厘米? 一个圆与一个长方形面积相等已知圆的周长是18.84厘米长方形的长是6厘米 长方形的宽是多少 圆的周长和面积的计算公式分别是什么? 在周长是12厘米的正方形内画一个最大的圆,圆的周长是多少厘米? 一个圆儿的面积与一个长方形的面积相等,圆的周长是18.84厘米,长方形的长是六厘米,宽是多少? 圆的周长面积的公式是什么? 如下图,圆的周长是50.24厘米,圆的面积与长方形的面积相等,求阴影部分的面积. 一个圆与一个长方形的面积相等,圆周长是18.84厘米,长方形长6厘米,宽是多少厘米? 关于圆的周长及面积的公式 图中圆的周长是25.12cm,BC=10cm 阴影部分的面积是( ) 见右下图,圆的周长是18.84厘米,圆与长方形的面积相等.长方形的长和宽各是多少? 圆的周长公式和面积公式一定要有周长和面积公式,一样不能少哈~要把字母换成字 图中圆的周长是25.12cm,圆的面积正好等于长方形oabc的面积的2倍.求阴影部分的面积 一个圆与一个长方形的面积相等.圆的周长是37.68厘米.长方形的宽是9厘米,长是多少? 图中圆的周长是18.84厘米,圆面积与长方形面积相等,求图中阴影部分的面积.(要简洁) 一个半圆的周长为15.42厘米,这个半圆的面积是( )平方厘米高手快来,一定采纳! 如图,圆的面积与长方体的面积相等,圆的周长是25.12cm,求阴影部分的周长 一个圆的周长是37.68厘米,面积是多少 知道半圆的周长,怎样求半圆的面积.已知半圆的周长是25.7、要求详细,, 图中的4个圆的周长都是37.68厘米,求阴影部分的面积. 一个圆环的外圆周长是50.24厘米,内圆的周长是37.68厘米,这个圆环的面积是多少平方米? 一个半圆的周长是10.28cm,半圆的面积是多少平方厘米还没搞明白, 如图长方形与圆的面积相等,圆的周长是37.68CM,求阴影部分的面积是多少.π取3.14 长方形的面积与圆的面积相等(如图),已知圆的周长是37.68平方分米,长方形的宽是多少分米?如图 大、小两个圆的周长比是5:3.已知两个圆的面积相差32平方厘米,这两个圆的面积各是多少? 如图,圆的周长是31.4厘米,求阴影部分面积.阴影部分面积是那梯形.那梯形的下底是8. 一个圆和一个长方形的面积相等,圆的周长是37.68cm,长方形的宽是9cm,长是多少 有大小两个圆,它们的面积差是160平方厘米,已知两圆的周长比是5:3,大圆的面积是多少平方厘米? 图中四个等圆的周长都是50.24cm,求阴影部分的面积?(6cm不是本题的条件) 下图中长方形和圆的面积相等,圆的周长是25.12厘米,阴影部分的面积是多少平方厘米?周长呢 请问大、小两个圆的周长比是5:3 .已知两个圆的面积相差32平方厘米,这两个圆的面积各是多少? 已知下图中圆的周长是12.56厘米,求阴影部分的面积. 下图中长方形和圆的面积相等,圆的周长是25.12厘米,阴影部分的面积是多少平方厘米? 大小两个圆的周长之比是5:3,它们的面积相差48平方厘米,两个圆的面积分别是多少平方厘米? ` 已知下图三角形的面积是16.28平方厘米.圆的周长都是12.56厘米,求阴影部分的面积?已知下图三角形的` 已知下图三角形的面积是16.28平方厘米.圆的周长都是12.56厘米,求阴影部分的面积? 已知下 右图中圆的周长是二十五点一二厘米,圆的面积正好等于长方形OABC面积的二倍,求阴影部分的面积. 大、小两个圆的周长比是5:3.已知两个圆的面积相差32平方厘米,这两圆的面积各是多少? 下图中,圆的周长是12.56厘米,圆的周长等于长方形的长,求阴影部分的面积 长方形和圆的周长相等,圆周长是31.4厘米,长方形的宽和长的比是1:4,长方形的面积比圆的面积少多少?过程详细 清楚^这个符号能不能用语言来表达一下,本人不太清楚 请看清楚【问题补充 两个圆的周长之和是94.2厘米,已知大圆半径与小圆半径的比是4∶1.这两个圆的面积各是多少平方厘米? 如图,三个等圆的周长都是12.56,那么阴影部分的面积是多少平方厘米 有一个圆与长方形的面积相等,圆的周长是12.56厘米,长方形的长是4厘米,宽是多少厘米? 一个圆的周长是94.2厘米,半径增加1厘米,这个圆的面积增加了多少平方厘米? 已知三个圆的周长都是12.56分米,并且圆心都是三角形的顶点,请你求出阴影部分的面积 圆的周长是25.12厘米,圆的面积正好和长方形的面积相等,长方形的长是多少厘米 甲,乙两个圆的周长比是2比3,其中一个圆的面积是12平方厘米,另一个圆的面积可能是多少,也可能是多少? 三角形面积是16.28平方厘米,圆的周长12.56厘米,求阴影部分面积 右图中圆的周长是18.84cm,圆的面积与长方形的面积正好相等则图中阴影部分的面积是多少平方厘米 甲乙两圆的周长比是3:4,其中一个圆的面积是15平方厘米,另一个圆的面积可能是( ),也可能是( ) 圆的周长是25.12厘米,求正方形内阴影部分面积 右图中圆的周长是18.84厘米,圆的面积与长方形的面积正好相等,则图中阴影部分的面积是多少平方厘米?阴影部分的周长是多少厘米?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn