发表于2014-07-25 09:40| 2384次阅读| 来源深海的博客| 7 条评论| 作者深海

游戏 微信 html5 产品设计 数据库 微信支付 微信开发者大会
摘要:基于微信开发的HTML5游戏,开发者需要克服哪些坑呢?又该如何推广呢?本文转自深海的博客,他分享了具体开发实现过程中,基于微信的Html5 WebApp需要注意哪些细节以及如何用代码实现。

【编者按】现如今微信为各种移动Web的小应用提供了肥沃的土壤,于是乎形形色色的应用孕育而出。人人都可以做开发,但不是每个人都能开发出好的应用,在开发过程中开发者会应注意哪些“坑”呢?本文转自深海的博客,他分享了在具体开发实现过程中基于微信的Html5 WebApp需要注意的细节以及如何用代码实现。

全文如下:

不同于传统的手游商店下载模式,HTML5 手机网页游戏是可以直接运行在微信内置的浏览器里。

这段时间团队一直在做微信端的一些产品设计和开发,当然也包含一定的运营工作。做过的东西也不少,微名片、微抢票、微活动、微招聘等一些小case。

今天想说的是我们在微信中被玩的最活跃的轻游戏--微刮奖,这东西可以被用来刮书、刮门票、刮套餐,还有客户要用来刮电话费。

先上图,感知一下具体样子:

而我想分享的是我们在具体开发实现过程中,基于微信的Html5 WebApp需要去克服的一些坑:这个小游戏的基本规则是:限定用户每天刮书次数是2次 (自由刮一次和分享后再刮一次),每天都可刮奖为此,我们希望实现的思路首先是限定在只能使用微信中玩,实现代码如下:

[js]  view plain copy
  1. if (!HttpContext.Current.Request.Browser.IsMobileDevice)
  2. {
  3. var result = new RedirectResult("url", true);
  4. filterContext.Result = result;
  5. return;
  6. }
  7. if (string.IsNullOrEmpty(HttpContext.Current.Request.UserAgent))
  8. {
  9. var result = new RedirectResult("url", true);
  10. filterContext.Result = result;
  11. return;
  12. }
  13. if (HttpContext.Current.Request.UserAgent.IndexOf("MicroMessenger") == -1)
  14. {
  15. var result = new RedirectResult("url", true);
  16. filterContext.Result = result;
  17. return;
  18. }

这招通过UserAgent的判断思路貌似网上大家也用的比较多,不用却依然存在挺多坑:

1. 初级问题:iOS和主流Android机器没问题,但碰到Windows Phone,就直接在微信中跳出去无法玩。原因是微信中默认的UserAgent是MicroMessenger,在这些机器的微信版本中不存在,所以为了解决Windows Phone,我们加入了如下代码:

[js]  view plain copy
  1. var useragent = HttpContext.Current.Request.UserAgent.ToLower();
  2. if (useragent.IndexOf("Windows Phone".ToLower()) != -1)
  3. {
  4. base.OnActionExecuting(filterContext);
  5. return;
  6. }

2. 高级问题:有高人直接使用一些插件工具,伪造MicroMessenger的UserAgent,这样理论上就可以在任何可以打开网页的浏览器中玩了,解决此问题,我们利用的是微信的sdk中接口:仅当用户在微信中使用时执行控件初始化刮奖操作,否则其他终端浏览就会一直处于loading状态。

[js]  view plain copy
  1. dataForWeixin.callback = function () {
  2. //一些初始化的操作
  3. }

关于微信的接口大家直接阅读原文,这边不直接贴代码出来了,不然贴不下。

上面的思路做了很多事,但对我们的业务规则来说还有一个很致命的bug没有解决。

这个bug就是只要用户手动清除微信中的cookie和缓存信息,然后重新进入活动,就能无限次刮奖,理论上是百分百中奖了。这是由于我的规则将判断当前微信用户是否刮过奖的判断依据放在了cookie中,貌似除此以外也没有其他办法。想利用openid,但我们的微信订阅号,如果从朋友圈过来的话都无法获取openid,还是依然存在上诉问题。

为了解决这个问题,最后我们终于找到了一条思路,借用微信服务号的授权接口,基本思路如下:

用户进入页面loading=》程序调用我们另外一个微信服务号的授权接口,返回openid=》将openid存入cookie(若不存在或过期,则重新执行前面步骤)=》根据openid从数据库判断本期活动刮了几次,同时,这个过程会自动判断用户是否在微信中玩游戏,否则回调将一直处于loading状态。整个过程使用下来,还比较流畅。这边贴一下授权相关的代码:

[js]  view plain copy
  1. #region 微信授权
  2. public ActionResult WeixinLogin(string CurrentUrl)
  3. {
  4. string url = WeixinOAuth2.Authorize(Server.UrlEncode(CurrentUrl));
  5. return RedirectPermanent(url);
  6. }
  7. public ActionResult WeixinCallback()
  8. {
  9. if (!string.IsNullOrEmpty(Request["code"]))
  10. {
  11. // 获取AccessToken参数
  12. var param = WeixinOAuth2.GetAccessToken(Request["code"]);
  13. 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"]));
  14. //重新跳转到回调页面,保持腾讯登录相同风格
  15. return Redirect(url);
  16. }
  17. return View();
  18. }
  19.     /// <summary>
  20. /// 授权请求页面
  21. /// </summary>
  22. /// <param name="flag">0为获取微信基本信息 1为获取微信openid接口</param>
  23. /// <returns></returns>
  24. public static string Authorize(string ReturnUrl)
  25. {
  26. 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);
  27. return url;
  28. }  
  29.     #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,欢迎加入交流。

相关阅读:

关注 @CSDN研发频道,了解更多研发资讯,参与互动讨论;当然您可以向我们推荐更多有趣、有质量的文章。

微信开发HTML5轻游戏中的几个坑相关推荐

  1. html5编游戏好难,分享微信开发Html5轻游戏中的几个坑

    现如今微信为各种移动Web的小应用提供了肥沃的土壤,于是乎形形色色的应用孕育而出.人人都可以做开发,但不是每个人都能开发出好的应用,在开发过程中开发者会应注意哪些"坑"呢?本文转自 ...

  2. 卫星html5源码,微信开发HTML5轻游戏中的几个坑

    现如今微信为各种移动Web的小应用提供了肥沃的土壤,于是乎形形色色的应用孕育而出.人人都可以做开发,但不是每个人都能开发出好的应用,在开发过程中开发者会应注意哪些"坑"呢? 全文如 ...

  3. egret开发HTML5小游戏-《猫猫大作战》(一)

    ps:本文适用于和我一样刚刚入门egret的同学们,大佬看到这里可以忙别的去了. 之前用egret引擎设计了一款双人设计小游戏-<疯狂大乱斗>,算是初步了解了引擎的使用,这次打算开发一款基 ...

  4. Unity 2D游戏开发教程之游戏中精灵的跳跃状态

    Unity 2D游戏开发教程之游戏中精灵的跳跃状态 精灵的跳跃状态 为了让游戏中的精灵有更大的活动范围,上一节为游戏场景添加了多个地面,于是精灵可以从高的地面移动到低的地面处,如图2-14所示.但是却 ...

  5. 使用Html5+C#+微信 开发移动端游戏详细教程 :(三)使用html5引擎搭建游戏框架...

    教程里的案例我们是通过H5游戏引擎开发,目前H5的游戏引擎比较好用的是白鹭,不过对于新手来说白鹭的开发环境和工具使用过于复杂,这里推荐一个国内大神编写的游戏引擎:lufylegend. 直接在页面引入 ...

  6. egret开发HTML5小游戏-疯狂大乱斗

    简介 寒假开始,花了5天时间利用Egret引擎开发了一款HTML5小游戏,最终界面效果如下: [游戏首页] [游戏图鉴] [游戏截图] 项目结构 主要的类就是list.ts和Main.ts,再就是存放 ...

  7. 【Android游戏开发之八】游戏中添加音频-详解MediaPlayer与SoundPool的利弊以及各个在游戏中的用途!...

    本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/android-game/312.html 游 ...

  8. 【Android游戏开发之八】游戏中添加音频-详解MediaPlayer与SoundPoo!并讲解两者的区别和游戏中的用途!...

    为什么80%的码农都做不了架构师?>>>     李华明Himi 原创,转载务必在明显处注明: 转载自 [黑米GameDev街区] 原文链接:  http://www.himigam ...

  9. 开发 HTML5 小游戏

    Html5小游戏 在介绍小游戏之前,先看一个框架 Phaser. Phaser 框架是一个 快速.免费且开源的 HTML5 游戏开发框架,它提供了 Canvas 和 WebGL 两种渲染方式,兼容 P ...

最新文章

  1. 想知道Java程序如何才能提高性能吗?
  2. Linux 网络路由介绍
  3. 安装Oracle数据库操作步骤
  4. Unix 网络编程(四)- 典型TCP客服服务器程序开发实例及基本套接字API介绍
  5. 云漫圈 | 女生适合做程序员吗?
  6. 3.14圆周率节,这5本书带你领略数学的魅力
  7. strtus2 与springmvc
  8. Android系统信息获取 之三:IMSI号和IMEI解释
  9. android 出现在默认应用程序,如何将我的应用程序设置为默认的SMS应用程序?
  10. unity3d烘焙教程 持续更新中【2020】
  11. 圆锥曲线万能弦长公式_圆锥曲线焦点弦长公式.doc
  12. 解决微信、QQ在一加手机系统中无法限制后台的问题
  13. private和protected的区别
  14. 【学习小记】狄利克雷卷积+杜教筛
  15. 大数据技术原理与应用——第一章 大数据概述
  16. 【计算机视觉】MAE:Masked Autoencoder
  17. 如果一个女生说,她集齐了十二个星座的前男友,我们应该如何估计她前男友的数量?...
  18. python 中英短语翻译_【python】简单的网页内容获取 - 有道翻译英文
  19. 安卓app打包上线流程
  20. 一站式电商流程图模板分享

热门文章

  1. 微信小程序—NFC功能 可行
  2. 如何科学的配置单位健身房
  3. ARM板实现触控幻灯片
  4. NVIDIA Jetson AGX Xavier 自研刷机
  5. at org.apache.hadoop.io.serializer.SerializationFactory.getSerializer(Serializat
  6. html文件的ppt,html概述及HTML文件.ppt
  7. 【如何使用Godaddy进行域名解析】+【查看虚拟主机ip】
  8. 前端开发工程师 职业规划
  9. 中国洗碗机行业风险投资态势及投融资策略指引报告
  10. 如何从Chrome商店下载.crx的插件