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