SPA 标签中有 3 篇文章
9月的时候，为单页试图引擎 Cyra 2.1.0 版本增加了一个创建视图切换动画的功能，使得 i 版页面之间切换也可以有一个滑入滑出的效果。一直没有时间做一个梳理，现在记录一下。最终的效果如图：
补充：悲剧，刚修复了一个 bug，如果想要设置ANIMATION_FUNC，则需要升级到v2.1.4。
其实思路比较简单，就是在 Router 中控制。首先，将所有视图容器position都设置为absolute。当切入视图完全渲染出来后（也就是执行完willAppear钩子函数），设置当前展示视图和即将展示的视图两者的 animation CSS 属性，在 animation 中修改视图容器的translateX来实现动画效果。
因为每个视图容器是单例的（Mix 页除外），当项目中出现循环路径，如：
View A -> View B -> View C -> View A
或者当 A 和 C 是同一个视图，只是数据不同。这种情况下，如果视图右滑，也就是用户主动通过点击“返回”按钮进入（返回）前一个视图时，当前视图向右滑出。如果滑出后不修改它
之前使用 History API 作为路由方案升级了组内单页视图引擎。完整的实现还需要 Nginx 的辅助配置，因为当页面刷新时，通过pushState到达的路由很可能并不存在对应的资源，所以要使同一个项目下的所有路由匹配到项目对应的单页资源。
其实主要的工作是对3种资源的 uri 配置 rewrite：
对应的配置如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# match img resource location ~ /resource/wa/([\w|-]+)/(img|page)/(.*) { rewrite ^/resource/wa/([\w|-]+)/(img|page)/(.*)$ /resource/$1/$2/$3 last; } location ~ /resource/wa/([\w|-]+)/([\w|-]+)/(img|page)/(.*) { rewrite ^/resource/wa/([\w|-]+)/([\w|-]+)/(img|page)/(.*)$ /resource/$1/$3/$4 last; } # match HTML resource location ~ /resource/wa/([\w|-]+)/.* { rewrite ^/resource/wa/([\w|-]+)/([\w|-]+)$ /resource/$1/$2.html last; rewrite ^/resource/wa/([\w|-]+)/([\w|-]+)/([\w|-]+)$ /resource/$1/$2.html last; } |
其中/resource/wa/为所有项目所处的统一目录，第二级目录为项目所在目录，第三级对应项目下的某个单页，第四级为可选，且表示某个单页项目下的某个具体 view。
组内现在使用组内自己开发的移动端 SPA 引擎 Cyra，版本为 1.2.x。框架很轻，使用 hash 做路由，然后统一管理各个 view（视图）的状态以及 view 之间跳转。
开发过程中，遇到很多坑都和使用 hash 做路由有关。当然，问题并不在 hash 本身，而是和客户端以及后端 RD 配合中遇到的问题。比如：
综上，考虑升级框架的路由实现方案，使用 History API 代替 hash，并配合 Session Storage 做多页降级，以此来解决上述问题。
为兼容 Cyra 1.x 开发的项目，此次升级仅修改路由的内部实现方式，
