微信开发HTML5轻游戏中的几个坑
发表于 09:40|
来源深海的博客|
摘要：基于微信开发的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 =
if (string.IsNullOrEmpty(HttpContext.Current.Request.UserAgent))
var result = new RedirectResult("url", true);
filterContext.Result =
if (HttpContext.Current.Request.UserAgent.IndexOf("MicroMessenger") == -1)
var result = new RedirectResult("url", true);
filterContext.Result =
}这招通过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);
}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./connect/oauth2/authorize?appid={0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect", Weixin_AppKey, Weixin_GetOpenIDCallback, ReturnUrl);
　　　　#endregion至此，在微信中解决如何判断当前用户的唯一性问题，基本上完全可以搞定。针对这套方案唯一存在的风险就是微信的接口的通畅性和稳定性。当然，在整个开发过程中还有很多其他问题需要一一克服，比如，微信分享后回调的实现，相应很多朋友都要用，还比如这种小游戏我们甚至需要支持grps下流程访问，不可能那些很大的游戏框架，这怎么搞等等问题，这些打算后面再慢慢写些文章分享，今天的东西够多了，先歇歇去。原文出自：由CSDN和《程序员》杂志联合主办的&&将于8月23日在北京举行，主办方还邀请了来自于一线的微信开发商技术负责人或资深工程师从企业应用开发高级篇、智能客服与LBS、微信支付、微信上的HTML5社交应用、微信小店开发等角度为与会者带来实战分享（&&）。目前报名处于优惠票价阶段，通过申请加入CSDN CTO俱乐部即可享受8折购票价格（票款中均含午餐），在前完成付款的同学还将免费获赠微信开发图书一本（两选一，活动现场发放）。光开发出一款产品还不行，还需有得到有效的推广，那么如何利用免费的方式来推广呢？前Zynga中国总经理、云智联CEO田行智将带来《》的主题分享，解读《碰碰里》是如何验证0推广、无任何激励手段，但却拥有每天100K 自然增长的微信HTML5应用。欢迎大家到现场与田行智深度沟通。目前，&（持续关注更新）。另外，主委会还开设了&，欢迎技术精英自荐和互相推荐，也可以直接联系&。此外，主办方还特别开设了&（&）现在就去&。微信开发者QQ群：（已满）和微信开发者② QQ群：，欢迎加入交流。相关阅读：&关注&，了解更多研发资讯，参与互动讨论；当然您可以向我们推荐更多有趣、有质量的文章。&
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章如何做才能让微信HTML5制作游戏吸引更多人参与
　　2012年底HTML5规范正式定稿,而基于HTML5的Web
&App也受到了各大浏览器厂商的热烈宣传，今年朋 友圈中酷炫的邀请函，内容页面玩游戏赢大奖的
活动都是基于HTML5制作完成的，多种多样的形式 形成了极大微信游戏参与量，一时间微信的朋友 圈HTML5大受欢迎。
　　HTML5营销为何能够在微信朋友圈中迅速崛起，这 主要是因为微信口碑宣传做的好，通过微信公众
号的去中心化，让每一个粉丝都成为向外传播辐 射的基点和传播的弧线，传递给更多人，吸引更
多的微信游戏参与，形成良好的传播效果。
　　调查研究现实，转发量较大的HTML5页面主要有两种形式，一是设计精美，内容有趣的纯内容展示，二是简单好玩，互动性强，容易让人获得成就感的小游戏。良好的用户体验是HTML5成功的关键。
　　HTML5页面所制作的互动小游戏，一般都需要朋友帮忙，分享之后身边的人也会受到影响，一传十，十传百，增加极多地微信游戏参与人数，而且绝大多数有奖品激励的互动游戏采用用户登陆授权的方式，保证游戏的安全性的同时也能够回收活动效果数据，一举多得。
　　HTML5页面制作的微信游戏想要吸引用户参与，要注意游戏包装设计，营销策划都要到位，用户奖品也比较诱人，这样才能成功。在整体营销上需要有优秀的文案，活动具体流程设计。并不仅仅是制作游戏这么简单。
　　我们作为国内领先的第三方数据服务商，为媒介投放提供专业、准确的数据支持。向互联网客户提供网络宣传推广和数据营销解决方案。提供专业的社会化媒体营销包含：口碑营销、微博营销、微信营销、SEM、SEO、网络公关、新闻稿发布、软文发布！
　　我们完全有能力承接微信游戏营销活动，拥有各行各业的微信红人，公共平台，帮助进行网络推广，真正提高微信游戏参与量，满足客户要求。我们的联系方式是
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。五大经典HTML5微信互动营销成功案例，你都玩过了吗？&&
日，在微信四周岁生日当天，一个名为“微信团队”的微信号出现在我们的朋友圈里，以一句高BIG的slogan“广告，也是生活的一部分”，正式宣告“微信营销”的时代正式来临。来自官方的数据显示，截止到2014年12月，全球的微信注册用户已突破11.2亿，其中月活跃用户高达4.4亿;而企业公众号注册数量也已超过800万，成为中国第一大即时通讯应用工具。
与此同时，数据还显示，在微信各功能服务模块中，朋友圈高居第一。76.4%的用户会使用朋友圈来查看朋友动态或进行分享。也就是说，朋友圈已经成为我们接受信息和情感分享的重要平台。虽然任性如你，也才在最近几天收到宝马、可口可乐的推送，但其实早在2014年，微信营销“大决斗”就已经在朋友圈悄然展开，而其中又以HTML5(简称H5)页面游戏最受欢迎，凭着无需下载、即点即用的优良基因，H5轻松击败曾经叱咤风云的APP党，一跃变成当红炸子鸡。
我们今天专门盘点了去年五大微信成功的案例，看看那些曾经刷爆你的朋友圈的游戏是否榜上有名?!
1.可口可乐——我们在乎
前段时间，可口可乐“我们在乎”席卷朋友圈，它的真身本是一份肩负企业CSR重任的“可持续发展报告”，内容虽然力求形象，但依然难掩厚重。为了在社交时代更接地气，可口可乐尝试用H5为报告“瘦身美容”：选取报告中的部分核心数据，用十五页的画面，直观展现可口可乐的努力，变成适应网络传播特点、特别是移动端观看及分享需求的形式。
营销启示：杂糅图片、文字和视音频等多媒体是H5的又一大优势。而当这种生动的形式与一些严肃的内容相遇，往往发生出人意料的化学反应。
2.维多利亚的秘密
内衣品牌维多利亚的秘密，可谓将触屏手机的特点发挥到极致!为了预热七夕，维秘在7月初上线了一款形式炫酷的轻应用：首页是一幅经过雾化处理的照片，用户只需用手指摩擦屏幕，就会有一位xing感女郎浮出水面，继续浏览下去则是品牌介绍，最后到达内衣抢购页面。这项互动体验既能后来被多个品牌效法，从肥皂泡到玻璃珠，从触屏到重力感应，技术永远是最好的武器。
营销启示：互动体验对于用家来说可是乐此不疲的新鲜玩意儿。“科技改变营销”，这是真理。
3. Burberry——从伦敦到上海的旅程
更多详情：
被转藏 : 1次
被转藏 : 1次阿里巴巴集团2016年社会责任报告
手机微信游戏
HTML5移动营销
扫描二维码查看效果
中国民生银行
中国民生银行2016年度社会责任报告H5
手机微信游戏
HTML5移动营销
扫描二维码查看效果
谁动了我的宝宝蛋
结合华融消费信托和德青源鸡蛋合作，创意谁动了我的宝宝蛋的H5互动游戏。
手机微信游戏
扫描二维码查看效果
三元奶粉投票评选系统
三元北京经典奶粉货柜陈列参与竞选和投票系统。从店主参与到地区冠军和全国冠军评选全过程服务。
微信平台二次开发
手机微信游戏
扫描二维码查看效果
智勇淘金者
益智类游戏，适用于金融等各种行业。游戏一共有20关，不仅锻炼用户的眼力，同时也需要有极快的手速。
手机微信游戏
扫描二维码查看效果
中国铝业公司降碳报告
为中国铝业公司定制设计制作的H5形式降碳报告
HTML5移动营销
扫描二维码查看效果
中航信托年中客户满意度调查系统，实现存续期客户认证后参与客户满意度调查，并参与系统抽奖。
微信平台二次开发
手机微信游戏
扫描二维码查看效果
民生财富植树达人
游戏为民生财富定制植树达人活动，在北京经常受到雾霭的笼罩，每个人都应该行动起来，通过游戏植树的像是让用户互动起来。
手机微信游戏
扫描二维码查看效果
波克啤酒之谁是盖世英雄
手机微信游戏
HTML5移动营销
扫描二维码查看效果
国投公司社会责任报告
为国家开发投资公司量身定做的H5社会责任报告.
手机微信游戏
扫描二维码查看效果
哈曼中国微信公众平台产品防伪查询系统。
微信平台二次开发
扫描二维码查看效果
中国交建社会责任报告
为中国交建集团设计制作的H5版社会责任报告。
HTML5移动营销
扫描二维码查看效果
一款非常具有意境的HTML5应用，通过声音和点击的人机交互，让用户产生全新的体验。
HTML5移动营销
扫描二维码查看效果
中国兵器工业集团
中国兵器工业集团2016年度社会责任报告
手机微信游戏
HTML5移动营销
扫描二维码查看效果
北京新机场
北京新机场建设进度HTML5演示报告，该H5为一系列报告形式，包括全景类、进度类、工程质量类等。
HTML5移动营销
扫描二维码查看效果
小童穿越记
科幻故事的形态反映现在的教育，潜移默化的推广企业品牌。
HTML5移动营销
扫描二维码查看效果
民生信托新年摇门神
通过微信摇一摇，摇出自己的守护神，看看自己的财运如何！
手机微信游戏
HTML5移动营销
扫描二维码查看效果
给理财小白的七个忠告
以强烈的红色时期宣传画风格为基础制作的一套理财科普小知识。
HTML5移动营销
扫描二维码查看效果
假如你遇到一只老虎
通过一系列用户心理潜意识测试，可以评测是用户的投资趋向，为用户推荐合理的投资产品。
手机微信游戏
扫描二维码查看效果
让股民过把瘾
通过游戏测试手速，看看你是否能够在股市中捞一把，难度系数不小哟！
手机微信游戏
扫描二维码查看效果
北京：北京市朝阳区金蝉西路甲一号酷车小镇D1-1栋　　010-
上海：上海市洛川中路1158号B2幢609　　021-}