大半年前的小项目，现在重构一下，顺便回忆一下当时遇到的bug。
不多说废话，先直接上图，校验自己环境并且利用脚手架初始化项目。
检查自己环境，初始化项目
然后执行 npm run dev
报错：'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
报错1.png
估计依赖没完全安装完成，执行一次cnpm init （利用淘宝NPM镜像），init完成后，直接执行npm run dev，成功初始化搭建项目完成，打开 http://localhost:8080可预览。
初始化项目成功
安装手淘 lib-flexible，具体参考大漠老师的使用Flexible实现手淘H5页面的终端适配文章。
安装： cnpm install lib-flexible --save
在main.js中引入lib-flexible：import 'lib-flexible'
此处注意，既然引入的lib-flexible，则会自动调整视图窗口，所以需要把原始在index.html里的<meta name="viewport" content="width=device-width,initial-scale=1.0">注释掉。
接着，需要安装一个px转rem的插件，我这里是用vs code开发，去插件库找一个叫cssrem的插件，下载后设置根元素1rem=75px（假定设计稿宽度是750px，那么10rem=750px）
设置cssrem插件根元素
既然是移动端，当然得手机实时预览项目，找到config文件夹下的index.js，修改dev对象的host值为你本地的ip地址，然后用新的链接（本地ip+端口号）去草料生成个二维码微信扫一扫就能打开了（tips：同一局域网内才生效哦）！
以上，所有的环境基本配置完成了，接下来是总结当初遇到的问题坑点。
问题一：gif图全屏幕展示，适配所有机型，且不影响分辨率
ui给了一张gif，需要全屏展示。这就蛋疼了，单凭一张定死尺寸的gif图，怎么能适配所有机型？类似iphone6/7/8小机型甚至plus都还好，尺寸基本符合不会被拉伸什么，但是在全面屏类似iphone X上面就有明显的拉伸感，这gif图被拉伸产品这关是肯定过不去的。怎么办呢，怎么做到类似每次打开微博时候都出现一张动图并且动图不存在被拉伸的效果呢？自己想不出，百度了一下也没什么解决方案。最后解决方案是给全屏一个背景色，然后gif图在背景色上边显示。
问题二：路由history模式下ios端无法长按识别二维码
这个问题有点奇怪，因为初次做项目测试的时候用的是iphone6s测试，版本号应该也有ios10以上吧（具体多少忘记了），确实无法长按识别二维码，当去掉history模式就可以实现此操作。现在我用ios12.1.4的iphone XR测试，history模式下可以实现长按识别二维码，因为手边没有低版本机型就无法测试了。所以猜测一是跟ios版本有关，猜测二是跟微信的内部机制有关。
问题三：微信环境安卓X5内核浏览器，touchstart与touchend问题
当初的需求是，手指长按一个div触发touchstart，div上的定位的opacity:0的图片显示出来即opacity:1，当手指离开触发touchend，图片又变为opacity:0。问题来了，当长按并且向上滑动的时候，再手指离开，发现无法触发touchend所绑定的函数了。ios版微信环境并不会出现此问题，猜测是引起了安卓X5内核的某些默认事件吧，项目时间紧迫，也是没有合适的解决方案。
问题四：网络环境略差情况，this.$router.go(-1)无法返回
这个问题是真的蛋疼，为什么说网络环境略差情况，因为图片and进入路由是正常打开的，然后点击封装好的back组件想返回到之前存入历史记录的组件，就无法返回，点击没有效果依旧在当前页面，不是很懂具体的原因是什么，这种情况的调试环境也比较困难模拟，并没有找出问题的所在点。正常wifi下是没问题的。
问题五：路由history模式下，返回上一个组件有时候没能保存滚动条位置
如题，偶发性，测试多测几次也能测到，设置了saveScrollPosition依旧无效，头大，依旧暂找不到问题所在。
大的问题差不多就上边提到的5个，小的问题比如全屏的gif图每次进来不一定是从最开始播放，因此要给gif图的图片路径加点变化的字符用来做刷新作用（路径后边拼一个随机数或者当前时间的时间戳），还有就是利用vue-wechat-title插件给每个路径都加一个导航标题，还有就是vue-awesome-swiper轮播插件，一张图的时候也会轮播，不想他轮播的话就做个判断，当图片是一张的时候就变成是div而不是swiper组件，以及还有很多已经解决的小问题~~
其实当初是第一次接触vue并且上手做项目，并没有很好的组件化思想，也没有对标签语义化，变量名类名规范性的统一命名，还有性能方面也没有任何的考虑，这或许也是很多新手小白的通性，只有把功能实现出来，实现过程并不重要，这也导致代码很渣很烂没什么观赏性更谈不上维护性了，写此就是为了警示自己注重规范，虽然很不愿意给前人填坑，但也尽量少给后人挖坑。
网友评论