博主已经将经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 .
网友评论