目標(biāo)
- 防止頁(yè)面刷新的瞬間空白
效果動(dòng)畫
方法介紹 (基于Angular8)
- 01 Angular Universal（首屏輸出）
- 02 使用ngIf方法以及Index.html寫入動(dòng)畫
- 03 補(bǔ)充點(diǎn)：如何只用Angular與cordova直接打包(windows)
01 Angular Universal
官網(wǎng)文檔：https://angular.io/guide/universal
《Angular5 服務(wù)端渲染實(shí)戰(zhàn)》：閱讀資料
《angualr 6+ 服務(wù)端渲染 SSR 問題記錄》：閱讀資料
參照官方文檔，在新建的angular8項(xiàng)目?jī)?nèi)部安裝。遇到的問題結(jié)合另外兩個(gè)鏈接進(jìn)行配置和解決即可。另外，由于在本次練習(xí)中使用了 localstorage ，而服務(wù)器端渲染不支持瀏覽器api，因而需要下載插件進(jìn)行配置。
// server.ts
// cmd: npm install localstorage-polyfill
import 'localstorage-polyfill';
global['localStorage'] = localStorage;
執(zhí)行 npm run build:ssr , 運(yùn)行node.js，點(diǎn)擊localhost進(jìn)行查看。文本直接渲染顯示，配置成功。
02 使用ngIf方法以及Index.html寫入動(dòng)畫
src/index.html的<app-root></app-root>內(nèi)寫入加載動(dòng)畫
src/style.css寫入加載動(dòng)畫
src/app/pages/home-page/home-page.html寫法如下
<div class="content" *ngIf="galleryList; else loading">
//在加載gallertList完畢之前，顯示#loading
...
</div>
<ng-template #loading>
//搭建骨架屏，使用靜態(tài)頁(yè)面填充
//何為骨架屏 --> https://ng.ant.design/components/skeleton/zh
...
</ng-template>
03 補(bǔ)充點(diǎn)：如何只用Angular與cordova直接打包(windows)
配置cordova：cordova中文網(wǎng)
- 使用
管理員身份運(yùn)行打開cmd，進(jìn)入項(xiàng)目文件。執(zhí)行cordova新建命令：cordova create [文件名]
在名為mobile-with-ssr的項(xiàng)目下新建文件名為mobile的cordova項(xiàng)目
-
進(jìn)入mobile文件，刪除原www文件，軟連接dist文件。以下3步均在cordova項(xiàng)目?jī)?nèi)執(zhí)行，此處即我新建的mobile文件夾下。
cd mobile: 進(jìn)入cordova文件rmdir /s www: 刪除www文件
刪除www文件mklink /d [目標(biāo)文件][源文件]: 將mobile/www和build出的dist文件同步
mklink /d [目標(biāo)文件][源文件] 修改文件
browser/index.html:
<base href="/"> --修改為--> < base href="./">
mobile/config.xml :
<content src="index.html" /> --修改為--> <content src="/browser/index.html" />
必須修改以上文件的對(duì)應(yīng)路徑，否則打包出來的應(yīng)用在模擬器上運(yùn)行會(huì)報(bào)出如下錯(cuò)誤。
最后，執(zhí)行cordova platform add android在模擬器上運(yùn)行即可。
總結(jié)
最近做的Loading一直都在用小菊花轉(zhuǎn)啊轉(zhuǎn)的，就想除了旋轉(zhuǎn)也來嘗試下另一種加載形式—骨架屏。加之這幾天也在研究服務(wù)端渲染，順便也想舔舔我OOR的顏，寫點(diǎn)小清新的東西凈化心靈，就一起用上了。初體驗(yàn)一下還是蠻開心的，也和前輩總結(jié)出不少有意思的東西。雖然知曉還有不少東西值得深挖。所以嘛，雖然上海最近的天氣不是很美麗，但還是很快樂游了坑。
最后，祝大家，一起游坑快樂哦。
