H5项目总结

最近做了一个h5项目，收益良多；总结下经验和教训！

这是个美妆类的、有打卡逻辑的H5；技术方面，包括前端和后端2部分的开发。
作为前端工程师，主要说下前端方面（后端方面踩了太多坑，后续再说）。

前端部分，差不多有10个页面，用vue框架，依靠路由来串接逻辑，应该比较合适；于是用vue-cli搭了个架子，大致流程：
1.每个页面只是写了名字，用vue-router把页面串了一下；
2.开始切图，切的总体比较成功：
a.logo等单独切出，防止变形
b.考虑到客户对很多弹窗文案会有后续修改,弹窗基本上没有切图（挺多会是一个背景，用html+css 写出来的）
c.能切成png，绝不切jpg，可以用透明特点，减少设计频繁修改影响
d.btn类已经其他如轮播图等图片，一点要切的同样大小（btn可以切成高度相等，原因后续说）
3.好了，准备工作基本搞定，码起来。。。

接下来，说下写代码的心得：

css部分

1.借鉴了同事之前的代码，css部分使用了sass，做了如下的配置

01.jpg

_variables.scss里面大致写了这些内容：

02.png

使用时，就是这样：

03.png

这样，可以写好一些常用的css样式，比如每页背景图的设置，button的背景设置（因高度一定，设置为background-size:auto 100%;background-position:center center;background-repeat: no-repeat）

2、css初始化，使用了normalize.css（较reset那种css有优势，npm上可以直接下载）

js部分

1.本项目的手机端使用了rem做单位，根据屏幕宽度的1/10为根元素字体大小，并给window添加响应函数，以自适应

2.工具类函数，尽量不要亲手写，很多网上都可以找到，比如格式化日期、手机号码正则匹配、手机禁止默认拖拽等；可以对其加以更改，将功能类似的放在一个文件中；如果属于比较常用的，可以在main.js中，将其挂载到vue对象原型中：

// 引入变量
import * as CONFIG from "@/utils/scripts/CONFIG";
Vue.prototype.CONFIG = CONFIG;

3.关于变量的配置，尽量都集中放到一个或几个文件里面；如是放的很乱的话，如果要修改，很难修改，也容易遗漏；上线的时候该配置也比较麻烦！

其他

1.如果某一个功能完全不知该如何下手，可能考虑问下同事，他的很多经验会给你提供很好的思路；接下来的工作可能就是引入某个工具库，说不定瞬间就可以解决。

PS：切记不要一直埋头苦思，做项目和考生答题是很不一样的！

2.中间有个功能涉及了很多canvas的内容，这方面我几乎没有涉猎过，研究了蛮久还没有头绪；间隙和同事聊了下，原来他封装过类似的工具，我研究了2、3天的问题，他居然半天不到帮我搞定啦；后续我又好好研究了那个工具，可以作为学习的好材料。

天色不早啦，先写到这里吧；大家有问题的话，可以进一步讨论哈～
项目上线地址：http://givenchy.6edigital.cn/risignin/index.html