之前一直在写微信小程序，想着实验下能不能把小程序的页面切换和缓存效果用到vue项目上来，所以做这个demo来实践下 并且重新熟悉下vue全家桶的使用。

写的这个webapp页面滑动效果主要使用了better-scroll 滑动插件， 插件的作者（黄轶老师）在慕课上有一套相关的高级教程，教程地址，教程展示 本例参考了其中风格颜色和部分布局，毕竟重新设计一套UI是很费时间的事情。

Demo实现了，仿微信页面切换效果和类似 keep-alive 的缓存页面机制（前进加载，后退缓存，tabBar页面缓存、下拉刷新、上拉加载等）。并且在 ios safari 浏览器中可以模仿原生 app 的页面前进后退体验（边缘右滑返回功能）。

顺便把这个想法做成了一个插件

如果觉得有用的话，记得点个 star 第一次发文，写的不好请见谅。

调用的是qq音乐的数据接口，因为很多接口都需要代理请求头才能请求到，所以直接就采用 node+express 搭建了一个代理服务器。因为小程序只能采用 https 的请求，然后花了点时间升级协议。

在本地访问的时候出现跨域问题，顺便简单的处理了下跨域。

具体的数据请求处理返回就不再赘述。

做这个的目的是想实现类似于微信小程序页面切换和页面的缓存效果，媒体播放的一些逻辑处理流程。

构建工具：直接偷懒使用的 vue-cli

初始化：一路往下初始化项目之后启动项目，过程都是比较基础的就不在赘述。

仿小程序页面切换的实现

想法：在vux 的 demo 展示中是已经实现了这种仿小程序页面切换的效果，所以就用现有的基于 vux 的代码进行一下提取，来给自己的domo实现这种切换的效果。

1. 在 vux 的源码中是通过 vuex 的 store 中注册一个模块进行路由切换是前进还是后退的状态管理来动态的给 <transition> 组件添加一个css的过度效果。

2. 还需要一个存储器来存储当前点击加载路由历史记录，通过历史记录的值来判断当前是前进还是返回，从而实现仿微信页面的切换效果。

虽然这样基本上已经差不多实现了想要的效果，但是还有一个问题。

场景：在App中商品的详情页是可以重复进行打开的，而在这里却不行，原因是因为处于同一个路由下，再次点击打开路由没有进行跳转，也想到过用 /:id 的方式，实验了一下，在本页打开页面没有加载。 所以采用动态注册路由的方式进行路由跳转实现，不同路由重复打开同一个组件加载不同数据

这里直接给出代码,值得说明的是跳转路由那块推荐使用 params 传参方式，不然在保存 this.$route.fullPath 的时候就太长了,而且路由的fullPath 最好以一个唯一标识进行区分，例如id属性。

// 需要继承的路由添加到Router 原型
 

 组件继承是为了能配合路由在组件中自己打开自己。
 
// 判断路由是否存在 不存在 添加一个新路由
// 存在直接跳转到路由
 

 到这里基本上需要实现的功能就差不多实现了。
 
 

 

 因为个人比较喜欢这个css预处理器的极简风格 {} : ; 全可以省略 所以很强迫症的一定要装上。
 
 

 安装到开发环境之后，因为之前没有使用 vue-cli 构建项目, 直接自己写的配置文件启动项目，所以并没有注意到关于预处理的一些配置，在 utils.js 中已经对 stylus ， sass , less 进行了相关配置。
 
 

 
 

问题2 【@路径的修改】

 

 场景：有时候需要添加一些其他的路径变量 如想使用以下方式直接引入文件
 
 

 
 

 
 

问题3 【挂载vue原型方法】

 

 场景：在使用 axios 的时候 请求 api 和 公共配置文件 每次都需要引入, 这样很繁琐也不易于修改。 这个时候就需要把这些方法挂载到 vue 原型中，每次调用的时候 直接使用 this.$xxx.xx 去调用。
 
 

 解决方法一： 在入口文件 main.js 给原型添加方法
 
 

 解决方法二： 比较优雅的使用 Vue.use()
 
 

 
 

问题4 【图片懒加载】

 

 场景：在加载图片的时候当图片尚未加载完成，或者图片请求失败，会显示比较难看的框线，为了优化显示，需要在加载前和加载失败后显示一张默认的图片来代替，避免显示效果问题
 
 

 
 

 
 

 当然也可以在data 中定义一个对象来充当参数
 
 

问题5 【自适应图片尺寸】

 

 场景：在获得图片后,每个图片的高度有大概2-3px的差别，这使得 在宽度固定，高度自适应的时候会产生细微的差别，导致在做上拉加载更多的时候，无法正确的获得 scrollTop 和 client.height 的值，使得上拉加载无效。
 
 

 解决办法：媒体查询固定图片高度。（暂时想不到更好的办法）
 
 

 先在浏览器中取得每个屏幕尺寸下的图片高度，添加到媒体查询中。
 
 

问题6 【单行文本溢出显示...】

 

 这个是css布局问题，我写出一个自己认为比较简单通用的处理方法
 
 

 
 

 

可能你清除有关数据了吧