一、什么是单页面
单页面应用,SPA(single page web application)。它是由一个html页面组成。通过控制div显示与隐藏来模拟页面切换。这样页面在整个切换过程中,浏览器并不会刷新重载。达到了很好的用户体验。而数据交互,则通过ajax实现。
二、如何制作单页面
前端三件套——html,css,js.是制作网页必备工具。同样,制作H5单页面应用也需要这三样。
1、页面适配
每个手机尺寸都不一样。那如何适配呢?可以将页面强制缩放到750px宽度。
让设计师将设计稿制作成750宽度。如果拿到的设计稿不是750,可以在photoshop里按快捷键ctrl+alt+i 将设计稿缩放到750宽度。记得网页分辨率为72即可。 这样页面就可以按750宽度来切图。
2、切换虚拟页面
$("."+page).fadeIn().siblings(".pageCrl").fadeOut()
其实就是控制页面里div显示与隐藏。如果再高级些,可以加hash来实现页面路由。
3、页面动画
页面上动画可以通过css3动画或者jquery实现。当然可以通过js库来实现。推荐几个强大、使用便捷的动画库 animates.css、tweenmax.js.使用动画框架可以快速高效的实现动画。使页面更加生动有趣。
4、添加统计代码
网站流量统计对分析网站和客户行为非常重要。常用的统计工具有谷歌统计分析,百度统计代码等。其中百度统计可以实现自定义事件,虚拟pv.大家可以试试。