h5公司官网开发总结

内容提要：

• meta标签
• 整体布局
• 整体框架
• Vue配合swiper的实战应用

meta标签

这点与在PC端写前端有着很大的区别，移动端的meta标签简直多。我就说说我所用到的标签。

一 、
1、如果支持Google Chrome Frame：GCF，则使用GCF渲染；
2、如果系统安装ie8或以上版本，则使用最高版本ie渲染；
3、否则，这个设定可以忽略。
二、
1.对视窗缩放等级进行限制，使其适应移动端屏幕大小
三、
1.当把这个网页添加到主屏幕时的标题（仅限IOS）
四、
1.添加到主屏幕后全屏显示

尤其是第二个meta标签，是移动端适配非常重要的一句话。

整体布局

整体的布局大致是4页布局。第一页是首页，第二页是关于我们，第三页是吃货动态，第四页是集团业务。基本上都是采用flex加rem来做移动端适配。

整体架构

前端采用的架构大致是这样：

• 滑动切换页面的效果来自swiper.js
• 页面内容的渲染采用Vue.js
• 页面布局和样式采用纯css，部分效果采用css3

是的这次的开发中，已经看不到jquery的身影了——这也是前端以后发展后的结果——慢慢地脱离jquery的依赖。不过jquery给前端带来的改变和发展是无人能替代的。

swiper.js的应用

引入swiper.js来进行页面的切换效果纯粹是因为这次开发的周期要求比较短，要考虑效果和兼容性兼备的情况下，我就偷懒找了一个动画库。
不过这个动画库的效果我还是算比较满意的。而整体来说使用也相当方便。尤其是，swiper.js是可以不依赖jquery的。
当然，在项目中用到了三次也是自己二次封装了一个组件在项目中调用这样对项目的体积更小有更好的体验。

总结

简单总结一下，这次移动端的开发中学习到或用到的东西。

• Vue3.0cli的使用。
• flex移动端布局，rem的全局适配。
• 流畅动画效果的实现以及静态文件的体积缩小以及路由懒加载等。