优化体验：首屏优化，除了Loading动画还有什么

目标

• 防止页面刷新的瞬间空白

效果动画

效果实现

方法介绍 (基于Angular8)

• 01 Angular Universal（首屏输出）
• 02 使用ngIf方法以及Index.html写入动画
• 03 补充点：如何只用Angular与cordova直接打包(windows)

01 Angular Universal

官网文档：https://angular.io/guide/universal
《Angular5 服务端渲染实战》：阅读资料
《angualr 6+ 服务端渲染 SSR 问题记录》：阅读资料

参照官方文档，在新建的angular8项目内部安装。遇到的问题结合另外两个链接进行配置和解决即可。另外，由于在本次练习中使用了 localstorage ，而服务器端渲染不支持浏览器api，因而需要下载插件进行配置。

//  server.ts
//  cmd: npm install localstorage-polyfill
import 'localstorage-polyfill';
global['localStorage'] = localStorage;

执行 npm run build:ssr , 运行node.js，点击localhost进行查看。文本直接渲染显示，配置成功。

效果展示

02 使用ngIf方法以及Index.html写入动画

src/index.html的<app-root></app-root>内写入加载动画
src/style.css写入加载动画
src/app/pages/home-page/home-page.html写法如下

<div class="content" *ngIf="galleryList; else loading">
  //在加载gallertList完毕之前，显示#loading
  ...
</div>
<ng-template #loading>
 //搭建骨架屏，使用静态页面填充
 //何为骨架屏 --> https://ng.ant.design/components/skeleton/zh
  ...
</ng-template>

03 补充点：如何只用Angular与cordova直接打包(windows)

配置cordova：cordova中文网

• 使用管理员身份运行打开cmd，进入项目文件。执行cordova新建命令：cordova create [文件名]
  
  在名为mobile-with-ssr的项目下新建文件名为mobile的cordova项目

• 进入mobile文件，删除原www文件，软连接dist文件。以下3步均在cordova项目内执行，此处即我新建的mobile文件夹下。

  cd mobile : 进入cordova文件

  rmdir /s www : 删除www文件
  

  删除www文件

  mklink /d [目标文件][源文件] : 将mobile/www和build出的dist文件同步
  

  mklink /d [目标文件][源文件]

• 修改文件
  browser/index.html :

<base href="/">  --修改为-->  < base href="./">

mobile/config.xml :

<content src="index.html" />  --修改为-->  <content src="/browser/index.html" />

必须修改以上文件的对应路径，否则打包出来的应用在模拟器上运行会报出如下错误。

报错信息

最后，执行cordova platform add android在模拟器上运行即可。

总结

最近做的Loading一直都在用小菊花转啊转的，就想除了旋转也来尝试下另一种加载形式—骨架屏。加之这几天也在研究服务端渲染，顺便也想舔舔我OOR的颜，写点小清新的东西净化心灵，就一起用上了。初体验一下还是蛮开心的，也和前辈总结出不少有意思的东西。虽然知晓还有不少东西值得深挖。所以嘛，虽然上海最近的天气不是很美丽，但还是很快乐游了坑。
最后，祝大家，一起游坑快乐哦。