项目总结

前言

  最近，写了一个项目，要求兼容PC端，和移动端。技术栈使用Vue2.x。写个页面，对于我来说，不是小case。我后来才知道，还真的不是。

遇到的问题

1. 把背景图片用img的方式引入，用定位去写，这样其实增加了页面渲染元素的节点。不利于控制好布局。所以，优化的方式是，当是背景图的时候，就用背景图，不是背景图的时候就用img的方式引入。
2. 把根元素html的大小固定在62.5%。这个是不利于兼容性的，因为随着页面的放大和缩小，他们是不会有变化的。应该用JS去变化的。

html,body{
  font-size: 62.5%;  
}

我没有用这种方式去控制。而是采用了以下的方式：

html {
    height: 100%;
    width: 100%;
    font-size: calc(100 / 1920 * 100vw);
} //PC端用的。

html {
    height: 100%;
    font-size: calc(100 / 750 * 100vw);
} //移动端用的

这样就实现了，font-size的动态计算了。媒体查询主要是用了，1024，和1025作为区分点。

3. 我在写一个比较复杂的盒子过程中，没有分好层级，外面的宽度要固定死，然后用padding做一下处理。这样里面的内容想怎么排就怎么排。
4. 对于swiper组件不怎么熟悉，他是采用script引入的方式来做的。应该是先看版本，再去查文档。
5. 解决问题没有先理清思路，而是边解决边看。搞的自己迷迷糊糊的。所以，在遇到问题前，一定要明白自己的思路，怎么去解决，不然就是不行的。
6. 自己对于项目的把控力度不够，什么时间应该完成什么事情，这种力度不够，只是为了做而做，其实意义不大的。接到一个项目，排期什么的，自己要有一个预算，不是犹犹豫豫的。要有自己的主见。

主要业务

1. 用JS如何新开一个外部的链接：

window.open(url)

2.如何在移动端复制一个文本

navigator.clipboard.writeText(href_value.defaultValue).then(res => {
    console.log("复制成功!")
}, (error) => {
    console.log(error, 'error')
})

3.楼层跳转问题 用盒子的offsetTop等于窗口滚动的距离。

体会

  主要是接到任务什么都没有说，我本来就很懵逼。但是大概的思维还是有的，是自己在平时的开发中还是有积累的，但是和他们要求的不一样吧。希望在以后的工作中，自己不断地进步，不断地提高自己的认知和效率。