【分享】写的一个微信场景，可手机扫一扫在线打开

博主已经将经requirejs重构后的代码打包上传至百度开放云，可以用手机扫描下方的二维码在线观看效果奥！

demoBAE在线.png

源码我已经上传至github： https://github.com/WesleyQ5233/wechatScenes.git 在这个仓库下我放了多个微信场景，喜欢的话你就star一下吧。
下面简单介绍下我的这个demo.

1）主要采用swipe框架来处理移动端的touch、图片切换；具体API可查看http://2.swiper.com.cn/ .

2）采用了淘宝团队的lib-flexible进行移动端适配。也可以把这个去掉，因为我用的图片并没有针对高清屏比如Retina屏做处理，所以可能效果不太好。
去掉方法：在index.html头部将对应的两行标签注释掉，并将viewport行标签打开.

3)打开首页时有个模拟加载的效果,对应的js代码就是个setTimeout,简单吧，代码写多了，你会发现都是套路！还有个音乐暂停/播放效果.

4）每张页面的元素多少img所以写起来可能比较简单，你一可以选择一个比较难一点的方案去写一下，网上很多微信场景素材的，比如咫尺网络、兔展等.

5)对于比较难得页面结构，可以应用更多的H5元素来实现比如canvas.另外大家在写时多多使用H5新增的语义化标签，这样有利于网站的优化及盲人阅读.也可以加入zepto、touch等框架去更好的实现更加复杂的动态效果.

6）对于页面中相同的部分可以采用伪元素:before:after来实现，这种方式对在dom树结构中并不真实存在，简洁而强大.可以时常采用，比如去掉浮动效果.

另外博主也写过一个PC端的示例，项目完整度比较高，对初学者来说有较高研究价值.详见博文：http://www.jianshu.com/p/7b8e2c733fab .