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

转载于:https://www.cnblogs.com/wfblog/p/8928708.html

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

SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码221604
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计-附源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
（附源码）Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
java计算机毕业设计基于vue框架的疫情防控知识在线答题系统设计与实现源程序+mysql+系统+lw文档+远程调试
java计算机毕业设计基于vue框架的疫情防控知识在线答题系统设计与实现源程序+mysql+系统+lw文档+远程调试 java计算机毕业设计基于vue框架的疫情防控知识在线答题系统设计与实现源程序+m ...
springboot基于VUE框架的商城综合项目设计与实现毕业设计源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
springboot基于VUE框架的商城综合项目设计与实现毕业设计源码
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
java毕业设计基于Vue框架的养生系统mybatis+源码+调试部署+系统+数据库+lw
java毕业设计基于Vue框架的养生系统mybatis+源码+调试部署+系统+数据库+lw java毕业设计基于Vue框架的养生系统mybatis+源码+调试部署+系统+数据库+lw 本源码技术栈: ...
基于vue框架下使用Element-UI获取文件MD5值并上传
基于vue框架下使用Element-UI获取文件MD5值并上传使用插件: spark-md5 .vue页面 <el-uploadclass="avatar-uploader idca ...
Java毕设项目基于VUE的个人记账管理系统（java+VUE+Mybatis+Maven+Mysql）
Java毕设项目基于VUE的个人记账管理系统(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilde ...

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

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

最新文章

热门文章