H5项目（基于vue框架）常见问题及注意事项

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

参考： https://blog.csdn.net/u012377333/article/details/52326158

1、前端中所有的按钮，点击后发送报文的标签，都必须加上去重功能。防止重复发送信息（有的信息重复发送是有很大问题的，比如金融中的借钱，发送1次，发送多次，金额是会累加的。客户明明是借了1次，但是账户上显示金额很多，肯定会引发纠纷）。

2、H5页面，对于需要前面页面的提供的参数或用户输入数据的页面。一定要考虑跳转页面后，回退页面的数据必须要保持不变。

跳转前将相应的数据保存到缓存里（ vuex 或 localStorage ）。跳回来时使用相同的参数再次进入页面。

体会：页面中有一些数据是通过请求后获取到的，获取到的数据不用缓存。把获取接口关键的参数 ( 前一页面提供的参数或用户输入数据 ) 缓存起来就可以了。进入时重新请求获取这些数据；

尽量避免 localStorage 和 sessionStorage 使用的字段太多，比较容易乱。字段多了，在其他的页面根本不知道某个字段到底有没有设置，逻辑会比较乱，不好管理。

3、H5页面缓存的选择（localStorage 、sessionStorage、cookie、vuex）：具体使用哪个根据变量的具体需求来定。

注意点：选择哪种缓存必须要考虑以下几点

a、关闭网页，再次进入页面，缓存的数据是否要保持：（localStorage是永久保存的）

有些数据在页面关闭时必须清除，不然会影响下次进入页面的结果。比如，调接口把openId（用户id）缓存下来，下次进入时，调这个获取openId失败了，可是这个值在缓存还有，页面还能正常进入。

localStorage 的生命周期是永久的，js不去清除，永远存在。（如果关闭网页要清除的数据，千万不要使用localStorage，确保再次进入该页面时，这些数据是空的）

b、刷新页面后，缓存的数据是否还需要存在。（vuex数据，刷新后，缓存没有了）

c、首次进入首页不能有缓存，回退到首页时需要这个缓存。这种情况不能使用localStorage ，因为localStorage 无法在关闭页面时清除数据。

比如，一些微信的code参数是有时效性的，首页进入通过code参数获取到用户信息后，缓存起来，页面回退到首页就不再使用code去获取用户信息了，去缓存中获取。

如果使用localStorage，回退到首页，先删除缓存，调用接口已经无效，无法获取缓存的数据，页面就不正常了。

总结起来：就是首页缓存的数据不要使用localStorage，除非需要像博客那样把登入信息永久保存的，不过这种保存一般是使用cookie来实现的。

4、首屏 loading图，提升用户体验

5、优化SPA应用的首屏加载速度慢

a、将公用的JS库(或css库)通过script（或link）标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；

b、页面和组件使用懒加载的方式引入

6、某个页面是通过链接进去的还是通过回退按钮进入的（填表单的页面，点击按钮调到其他的页面时，再回退，之前填的数据是需要缓存的。而通过链接进入【正常步骤】的页面是没有缓存数据的）