h5项目的注意点

2019独角兽企业重金招聘Python工程师标准>>>

1. 必须熟悉一套框架 H5效果大多是基于框架来做的 像更有流畅感的滑动
2. 老调子 先查看所有的图 因为很多地方都是可以重用的 比如这一次的新闻 还有杂志 都是一个content包含着一个头一个主内容 （首先定义好主题色 每一个项目都会有一个主题 主题色 那是它的中心点）
3. 考虑要全面 像新闻 杂志 都应该考虑 F1：当它没有内容的时候 是怎么样子的 F2：当它有内容的时候 但是没有超过当前最多显示的时候是什么样子的 F3：当它有内容 超过了 需要分页的时候是什么样子的
4. 移动端要将微信和浏览器自带的上下滑动 的一个怪效果取消掉
5. 做H5效果的时候 最好是思考好效果要怎么做 写下它的实现逻辑 然后再去实现
6. 有时候 从一个方向实现不了的功能 我们可以从另外一个角度去完成 比如说我这边用了一个swiper的插件 我想做一个过渡之后再执行某段js的事件 但是这个插件自带的过渡回调参数不能使用 那么我们可以观察 当它过渡之后 会给当前的DOM增加一个class 我们可以基于这个class去写css3的动画效果 再然后我们可以不使用过渡完之后再执行 因为当我们滑动的时候 这个dom过渡过去是很快的 我们可以使用touchend事件 然后绑定这个我们需要执行的js
7. 当我们在手机上面 发现加载之后的界面宽度不对 有的时候可能是父容器 或者更高一层的容器 他的宽度我们是没有写上 导致加载的时候出现 记得写上（反正是把我搞伤了）
8. 如果是写移动端 其实也不能说是移动端吧 PC端的界面 记得给它们的样式加兼容 之前我一直以为是js的问题 导致安卓和ios手机上面 一个简单的加载之后旋转不能使用 最后才发现 是我忘记写兼容了（-webkit-）
9. 有很多可以复用的js 完全可以封装成函数 比如加载更多 生成列表 如果有那种可以在别的项目里面也能复用的js 也可以封装成函数 比如之前我爱修图的chat.js chat.css（聊天器）
10. 弄出一个万金油的框架 会简单很多
11. slider.js可以利用它的一个参数和css配合 （直到动画执行完 才可以执行slider的滑动）
    github

转载于:https://my.oschina.net/cllgeek/blog/1584750