4000-888-103

资讯动态H5单页面应用简介资讯详情

H5单页面应用简介

2019-07-15 17:51:26

  一、什么是单页面

  单页面应用,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.大家可以试试。


上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png