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

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

脑洞大开!用Swift写个Material Design组件库 美国最大婚恋网站eHarmony利用Hadoop、OpenStack重构自己 每个Java开发者都应该知道的5个JDK工具 异构计算应用研讨暨OpenCL编程培训在上海和西安成功举行! APIs.io:用来发布和发现API的利器 偏爱MySQL,Nifty使用4个Web Server支撑5400万个用户网站 直接拿来用!十大Material Design开源项目 初探WatchKit,开发者必须知道的6件事! 【MDCC专访】环信CEO刘俊彦:音视频即时通讯将成为技术壁垒 第十七届全国工程建设计算机应用大会在京召开,AMD受邀详解GPU Computing! 哪一门开发语言薪水最高? 借助ArangoDB,带你玩转Google图算法引擎Pregel 【最具价值CTO评选秀】MediaV CTO胡宁:技术女神的自我奋斗 豌豆荚邓草原:如何实现实时响应式平台 必须谨记!Node.js安全开发技巧 聚焦新平台新应用 IBM 2014技术峰会上海站顺利落幕 《近匠》NAGA娜迦信息:移动安全加固定制化 棱镜、飞流、TalkingData三方解读:手游如何高效运营 【MDCC秀场】枕戈待旦——秉持移动开发大潮下的主角思想 Netflix的首席产品官Neil Hun谈推荐系统打造和AWS实践 微信开放WiFi接口,醉翁之意在乎O2O还是大数据? 软硬整合:基于云的微型智能防丢设备Linquet 【MDCC专访】AppCan CTO赵庆华:助力企业快速移动化 使用Bluemix中的Rules服务构建一个酒店预订应用程序 基于IBM Bluemix开发微信公共账号应用 用Cloudant在Bluemix上构建一个简单的文字游戏应用程序 IBM Bluemix是什么? 【最具价值CTO评选秀】纷享销客CTO刘晨:企业移动的技术挑战 【最具价值CTO评选秀】能做存储的超级计算机——任宇翔和以色列团队的创业故事 OpenStack Swift存储策略 分享5个可视化的正则表达式编辑工具 .htm传递参数! 一个比较菜的问题,我的VB6中窗体的name属性没有,请问怎么加入. 简单sql语句求助!!! 如何在vc++中获得当前用户的用户名? 為什麼在我機器上建立與其他機器的oracle連接的bde出錯???連sql server都沒問題,破oracle真亂!!!!! 真气人 急,用TADOTable控件怎么对字段进行查询?请举例说明!谢谢! 用fireworks 4.0制作动画,请问怎么样用一张图片做背景? 在用VC调DLL时报错,error C2171: '*' : illegal on operands of type 'int (__stdcall *)(char *,char [])'怎么办? 一个打包的问题 在表格式的数据窗口中显示image的问题??欢迎讨论,拒绝灌水! 128MB内存跑BCB6好像有点那个? 请问有人知道哪儿有打印条码的源程序吗? 有关INSERT 插入数据到ACCESS 数据库,为什么出错,急,急,急,菜鸟请教,马上给分 vb.Net的较大的Project编译时,经常出现某些.resources文件找不到,为什么?气死人了! 我很菜,望高手帮忙! 小毛头毕业分在工程部,望个为师兄指点应该注意些什么? Java Applet 中变量的问题请教. 这儿看看! 请帮忙看看这是怎么回事? TRIGGER 请问热心人帮帮我这个热心的学生. 如何安装acm控件 到底应该先看VC++技术内姆还是先看MFC深入浅出? 请问如何使打开的窗口在屏幕正中间? 怎样产生一个全局唯一标识ID? 双套超级查询器!!!上传完毕!!! WINSOCK控制问题 编译时出现这中错误提示是什么意思?怎么解决? 请各位热心人帮帮我这个热心的学生. 100分求助。在无向图(图中有闭合的点集)搜索给定两点之间的所有路径。 调用中文输入法,程序如何实现 VS.NET安装:小弟实在是愚笨 怎样添加DNS服务包?? 100分求助。在无向图(图中有闭合的点集)搜索给定两点之间的顶点。 VS.NET安装:小弟实在是愚笨 这样在Java调用Excel程序 如何在nt4.0下查看本机器装了哪些硬件(鼠标,键盘,显示器,图象采集卡等信息) ####VB初学者的小问题,散分100!!##### 谁能告诉我目前java在电信的营账,记费方面或着其他支撑系统的成功应用的例子! 我都三天两夜没睡了,哪为大虾能帮我解决这最后的问题啊?!挥泪大送分了…… 天津参加程序员考试的朋友看一下!!!! 编程技术书籍半价转让 请问scrdeco.exe如何在win2000使用? vc到底该怎么学?! 一个线程有时候会占用CPU资源98%以上呢?求助!!! 知道BoundsCheck是谁作的吗?-Matt Pietrek 《未公开的Windows核心机密》、《Windows 95编程机密》作者,John Robbins《应用程序调试》作 没有房屋租赁证,在北京如何办暂住证?有办法吗? Unicode编码怎样能转换成汉字? 关于刷新事件的捕获,请大家多多关照。 我在98下面用豪杰超级解霸读mpeg4时,为什么会快速播放呢? 储油罐按建造材料分为几种?具体是哪几种? 红领巾指答案是什么 描写孩子天真可爱的古诗词需要作者 青蛙1年吃几只虫子 用on the spot(立即)造句 梦到别人吃蜘蛛, 1只青蛙1天吃多少虫子? 表示学习需要持之以恒的成语,中间有个“有”字的 关于小孩外貌的词语有哪些?急用!小孩的! 梦见蟑螂爬身上是什么意思? 为什么青蛙不吃死虫子呢? 梦到蜘蛛梦到我下楼梯时,楼梯中间结了张蜘蛛网,而且中间有一只黄色毛茸茸的大蜘蛛盘在网中心,(我平时都很怕蜘蛛的)然后我就想从侧面强行冲过去,结果我过去后我感觉网也跟随我破了,背 英语翻译1.君之所知也 之:2.夜缒而出 而:3.朝济而夕设版焉 焉:4.且贰于楚也 贰:要准确、详细的翻译,包括虚词的具体用法等 数学画图软件像这种图还有物理图怎么画? site与spot区别site=spot?别复制 简单通俗说下即可 如果有一天你离开家乡,你最惦记的是什么?用比喻句写 数学画图工具谁会用 这个和有什么区别?这个 括号内是读取数据库的 哪个位置?具体4,0各代表什么.asp编程 英语翻译邻之厚,君之薄中的厚薄怎么翻译这是词类活用,厚薄本来是形容词但在这里作名词翻译是请注意形容词作名词,页就是说翻译成名词 数学画图工具画几何的,不是函数画图工具粘到WORD不太清楚,WORD本身细节画不好,谁有办法啊? site:163.com与site:www.163.com有什么不同啊?为什么要这样做? 烛之武退秦师的重点字词翻译 谁给介绍一块好的数学画图工具要花数学图形 十里长街送总理谁知 《烛之武退秦师》重点字词翻译及词语的用法 请问这个图像怎么画高中数学 《十里长街送总理》的作者是谁如题 家乡的大道,好像什么 比喻句 英语翻译如 :故如此 而动如初 匠师如其言其 :患其塔动 密使其妻 匠师如其言 人皆伏其精练之 :钱帅登之 乃以瓦布之 喻皓之妻 塔动之因 便实钉之 《十里长街送总理》全文 用抛物线的焦点F在X轴的正半轴上,A(m,-3)在抛物线上,且|AF|=5,求抛物线的标准方程.9:50之前必须解决! 英语翻译 平加偏旁组字(要3个)急求! 持之以恒的四字成语我有急用 英语翻译不可能一个一个去试想行不行得通吧? 我能加个偏旁组成西子,再组词.平:(评)(评价);( )( );( )( ).我:( )( );( )( );( )( ).乔:( )( );( )( );( )( ). 描写坚持的成语 梦到很多蟑螂好不好? 平字加偏旁 形容坚持不懈的四字成语 一个圆形的石油储油罐底面一周的长度是50.24,它的底面积是多少?3分钟回答 平可以加什么偏旁 晚上做梦梦见蜘蛛,请问如何解此梦? 一个侧面是正方体的圆柱形储油罐底面积是10平方米,它的侧面积是多少? 例如定语从句中,place,room,point,situation,condition的先行词是when~定语从句中还有没有什么先行词要固定的用wh-引导(when什么的) 小石潭记大多数词语的解释!乐 见 全 蔓 蒙 络 缀 参差 可 许 空游 澈 佁然 俶尔 翕忽 斗 蛇 犬牙差互 合 寂寥 凄 寒 以 清 居 in the spot 和 on the spot 的区别 第一次世界大战在哪个地方开始的,place place place! 小石潭记重点词注释 alex on the spot歌词马达加斯加2中的这首歌的歌词 美国城市地图里有些地方是XX PLACE,指什么?比如结尾是ROAD,BLVD我都知道什么意思,那PLACE指什么? 的加点词解释 on the spot 美国有的地区属于Census-designated place 简称CDP,这个Census-designated 解释这些词在《小石潭记》中的意思 太阳红领巾指的是什么 红领巾迎着太阳的太阳是什么意思 小石潭记的一些词语意思心乐之:皆若:同乐:斗折蛇行:凄神寒骨:以其境:【原文】从小丘西行百二十步,隔篁竹,闻水声,如鸣佩环,心乐之.伐竹取道,下见小潭,水尤清冽.全石以为底,近岸, on the 红领巾在太阳底下呈现红色,是因为红领巾----------------物理知识
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘