前段时间有个项目需要在页面上使用视差效果，第一时间就想到了老牌的skrollr.js，虽然作者在2014年就已经不在更新的，不过放到现在依旧是比较好用的一款，然而在应用中着实被anchors的relative mode坑了一小下，记录下。
absolute mode的代码格式为data-[offset]-[anchor]
relative mode的代码格式为data-[offset]-(viewport-anchor)-[element-anchor]
在项目中吧viewport和element搞反了，盯了半天才找到原因。顺便放下官方的anchor-position示意图
泛域名SSL证书首选还是Let’s Encrypt，之前小窝加装泛域名证书用的也是它，具体可以查看之前的文章小窝加装泛域名SSL证书，今天帮朋友的站点设置SSL证书，步骤不太一样，顺便记录一下。
首先还是要下载acme.sh，安装成功后断开重新连接下终端，要不会后续的命令提示找不到
curl https://get.acme.sh | sh
由于朋友的域名是在阿里云上面，操作和DNSPOD上有些区别，先登录阿里云，在产品与服务里面，找到监控与管理分类，再在里面点选访问控制，或者在产品与服务下面直接搜索RAM访问控制，进入后先在左边菜单人员管理——用户里面新建一个用户，新建用户成功后会显示该用户的AccessKey ID和AccessKey Secret，这时候一定要记录下这两个值，因为这个只显示一次，如果丢失的话只能重新新建用户。随后在用户列表新建的用户后面操作里面点选添加权限，在弹出的权限列表里面搜索解析
，然后选择AliyunDNSFullAccess，后面备注是管理云解析（DNS）的权限。添加后点最下面的确定就好。
随后回到服务器命令行，依次键入下面命令（修改成对应的参数）
export Ali_Key='之前记录下的AccessKey ID' export Ali_Secret='之前记录下的AccessKey Secret' acme.sh --issue -d xxxx.com -d *.xxxxx.com --dns dns_ali
等待执行完毕就好。后续的服务器端的配置就和之前文章所写类似。
顺便一提的是Let’s Encrypt有申请错误的限制，同一域名同一账号连续失败5次后会被暂停申请1个小时，之前忘了给RAM用户附加权限，提示添加txt校验域名失败，添加权限后，然后就出现如下提示
Create new order error. Le_OrderFinalize not found. {
"type": "urn:ietf:params:acme:error:rateLimited",
"detail": "Error creating new order :: too many failed authorizations recently: see https://letsencrypt.org/docs/rate-limits/",
"status": 429
}
这个就是频繁提交失败后被服务器暂停申请了，等1个小时再试就好了。
路由
Ionic4整体舍弃了Ionic3中的使用IonicPage设置路由地址的方法，而完全使用Angular的路由器（虽然在ionic3中也可以使用Angular路由，不过之前项目都是使用Ionic3的路由方法）
在初始化的项目结构目录里src/app/app-routing.module.ts文件，一个简单的结构类似下方：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PermissionGuard, WelcomeGuard } from './guard/';
const routes: Routes = [
{ path: '', redirectTo: '/welcome', pathMatch: 'full' },
{ path: '', canActivate: [PermissionGuard], children: [
{ path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
]},
{ path: 'welcome', canActivate: [WelcomeGuard], loadChildren: './pages/welcome/welcome.module#WelcomePageModule' },
{ path: 'sign-in', loadChildren: './pages/sign-in/sign-in.module#SignInPageModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
在这个简单结构中包含一个tabs主模块，一个欢迎页，一个登录认证页面。用户第一次访问时，由第一条路由配置导向欢迎页，在欢迎页的配置上有路由守卫（Route guards）的设置，用来判断是否第一次访问，如果不是则引导到主模块，在主模块上同样配置一个路由守卫，用来检验用户权限，如权限不正确则引导到登录页面。此外路由不仅可以配置在总的路由配置文件中，也可以配置在各级子模块中，一方面清晰模块关系，同时也方便模块的添加和移动。路由相关配置也有很多，详情可以参考官方文档，这里是传送门。
路由守卫
在Ionic3中，使用ionViewCanEnter和ionViewCanLeave实现Route guards的功能，而在Ionic4中，由于使用Angular的路由，同样也使用其对应的路由接口，在官方文档中，有5种接口，分别是
CanActivate to mediate navigation to a route.
CanActivateChild to mediate navigation to a child route.
CanDeactivate to mediate navigation away from the current route.
Resolve to perform route data retrieval before route activation.
CanLoad to mediate navigation to a feature module loaded asynchronously.
在上面的例子中，使用了两个路由守卫用来判断是否第一次访问和是否具有用户权限，其中判断初次访问的例子如下
import { Injectable } from '@angular/core';
import { Router, CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { Storage } from '@ionic/storage';
@Injectable({
providedIn: 'root'
})
export class WelcomeGuard implements CanActivate {
constructor(public router: Router, private storage: Storage) {}
async canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
const first = await this.storage.get('firstIn');
if (first) {
this.router.navigateByUrl('app/tabs/(home:home)');
}
return !first;
}
}
在路由守卫中判断本地存储中是否存在首次访问的标识，有的话就直接进入tabs模块的home子模块。更多详细用法，同样参见官网文档，传送门。