首页 > 专用服务器 > 游戏服务器

分享微信开发Html5轻游戏中的几个坑

这段时间团队一直在做微信端的一些产品设计和开发,当然也包含一定的运营工作。做过的东西也不少,微名片、微抢票、微活动、微招聘等一些小case。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

今天想说的是我们在微信中被玩的最活跃的轻游戏--微刮奖,这东西可以被用来刮书、刮门票、刮套餐,还有客户要用来刮电话费。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

先上图,感知一下具体样子:tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

分享微信开发Html5轻游戏中的几个坑分享微信开发Html5轻游戏中的几个坑tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

而我想分享的是我们在具体开发实现过程中,基于微信的Html5 WebApp需要去克服的一些坑:tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

这个小游戏的基本规则是:限定用户每天刮书次数是2次 (自由刮一次和分享后再刮一次),每天都可刮奖tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

为此,我们希望实现的思路首先是限定在只能使用微信中玩,实现代码如下:tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

分享微信开发Html5轻游戏中的几个坑

      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; }分享微信开发Html5轻游戏中的几个坑

这招通过UserAgent的判断思路貌似网上大家也用的比较多,不用却依然存在挺多坑:tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

1、初级问题:IOS和主流Android机器没问题,但碰到windows phone,就直接在微信中跳出去无法玩。原因是微信中默认的UserAgent是MicroMessengertSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

,在这些机器的微信版本中不存在,所以为了解决windows phone,我们加入了如下代码:tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

      var useragent = HttpContext.Current.Request.UserAgent.ToLower(); if (useragent.IndexOf("Windows Phone".ToLower()) != -1) { base.OnActionExecuting(filterContext); return; }

2、高级问题:有高人直接使用一些插件工具,伪造MicroMessenger的UserAgent,这样理论上就可以在任何可以打开网页的浏览器中玩了(感谢群友@阿宝的无私),解决此问题,我们利用的是微信的sdk中接口:仅当用户在微信中使用时执行控件初始化刮奖操作,否则其他终端浏览就会一直处于loading状态。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

    dataForWeixin.callback = function () { //一些初始化的操作 }

关于微信的接口大家直接阅读原文,这边不直接贴代码出来了,不然贴不下。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

上面的思路做了很多事,但对我们的业务规则来说还有一个很致命的bug没有解决,也感谢@冰冻奶茶童鞋的积极反馈。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

这个bug就是只要用户手动清除微信中的cookie和缓存信息,然后重新进入活动,就能无限次刮奖,理论上是百分百中奖了。这是由于我的规则将判断当前微信用户是否刮过奖的判断依据放在了cookie中,貌似除此以外也没有其他办法。想利用openid,但我们的微信订阅号,如果从朋友圈过来的话都无法获取openid,还是依然存在上诉问题。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

为了解决这个问题,最后我们终于找到了一条思路,借用微信服务号的授权接口,基本思路如下:tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

用户进入页面loading=》程序调用我们另外一个微信服务号的授权接口,返回openid=》将openid存入cookie(若不存在或过期,则重新执行前面步骤)=》根据openid从数据库判断本期活动刮了几次,同时,这个过程会自动判断用户是否在微信中玩游戏,否则回调将一直处于loading状态。整个过程使用下来,还比较流畅。这边贴一下授权相关的代码:tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

分享微信开发Html5轻游戏中的几个坑

    #region 微信授权 public ActionResult WeixinLogin(string CurrentUrl) { string url = WeixinOAuth3.Authorize(Server.UrlEncode(CurrentUrl)); return RedirectPermanent(url); } public ActionResult WeixinCallback() { if (!string.IsNullOrEmpty(Request["code"])) { // 获取AccessToken参数var param = WeixinOAuth3.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>publicstaticstring Authorize(string ReturnUrl) { string url=string.Format("https://open.weixin.qq.com/connect/oauth3/authorize?appid={0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect", Weixin_AppKey, Weixin_GetOpenIDCallback, ReturnUrl); return url; }      #endregion分享微信开发Html5轻游戏中的几个坑

至此,在微信中解决如何判断当前用户的唯一性问题,基本上完全可以搞定。针对这套方案唯一存在的风险就是微信的接口的通畅性和稳定性。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

当然,在整个开发过程中还有很多其他问题需要一一克服,比如,微信分享后回调的实现,相应很多朋友都要用,还比如这种小游戏我们甚至需要支持grps下流程访问,不可能那些很大的游戏框架,这怎么搞等等问题,这些打算后面再慢慢写些文章分享,今天的东西够多了,先歇歇去。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

最后,大家如果想玩玩看这个刮书游戏,只要关注一下微信公号:海丁活动,然后输入book,就能点击链接进去玩玩看了。tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

分享微信开发Html5轻游戏中的几个坑tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

后面我们整理整理,把完整源码包也分享出来。^_^tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

tSo香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

版权声明

本文内容由互联网用户自发贡献,版权归用户所有,本站不为本文内容承担相关法律责任。如有侵犯您的合法权利,请联系本站进行删除。

留言与评论(共有 条评论)

   
验证码:

标签列表

VPS巴士

统计代码 | 京ICP1234567-2号

Powered By VPS巴士

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯