美文网首页全栈工程师修炼前端开发前端攻城狮
【分享】写的一个微信场景,可手机扫一扫在线打开

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

作者: 大檬煮WesleyQ | 来源:发表于2016-08-19 18:36 被阅读527次

    博主已经将经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 .

    相关文章

      网友评论

      • 源川:亲,你咋这么厉害呢
      • aibottlec:亲爱的楼主,github内容下载后,提示已破损 ,可不可以重新上传一下
        大檬煮WesleyQ:@aibottlec 恩,我整理下 github上我放了好几个场景,喜欢的话就star一下吆

      本文标题:【分享】写的一个微信场景,可手机扫一扫在线打开

      本文链接:https://www.haomeiwen.com/subject/ljibsttx.html