阿里健康 X 天猫：欢聚大观园红楼饭局趴

2017-10-30 H5案例分享 H5案例分享

案例：欢聚大观园红楼饭局趴

出品：阿里健康 X 天猫

亮点：

策划上，游戏类，① 跟着宝玉来寻宝，loading结束，进入滋补大观园长图页，大观园内主要分布着六个地点；② 里面蕴含的有容光焕发的东阿阿胶，中华老字号的百花，消灭三高的盘龙云海，滋补养颜的艾尚燕，辛勤劳作采蜂蜜的慈生堂等众多品牌；③ 每个地点点开都是一幅对话，然后可进入相应的游戏界面，一共6款游戏，简单有趣，能与用户产生很好的互动。
设计上，中国风，① 画面基本上都是国画，古风古韵；② 又以大观园为噱头背景，增添了案例的文化气息；③ 红楼梦中涉及的中药一百多种，方剂四十多个，可以说是一部道尽养生玄机的旷世奇书与滋补这一话题也是相当契合的。
技术上，这支H5主要是采用Canvas + Egret（白鹭引擎）来实现的，在打开页面时，会先用JS判断是否在微信环境下，如果在微信环境下则页面正常显示，反之，则只显示loading图标。

技术实现： jQuery + Egret + Canvas

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

欢聚大观园红楼饭局趴-查阅二维码

完整欣赏此案例大约需要1分钟40秒

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签