作為一個後臺開發人員，幾年前參與過Ionic1開發過一微信公眾號的經歷，所以這次開發企業微信應用，就使用了ionic，正好ionic4 rc版本發佈，雖然不是正式版，作為本項目的項目經理，還是決定使用ionic4開發，因為項目組員也是我。簡單記錄一下本次開發的過程，很多命令不經常輸入，就忘記了。 0 ...
作為一個後臺開發人員，幾年前參與過Ionic1開發過一微信公眾號的經歷，所以這次開發企業微信應用，就使用了ionic，正好ionic4 rc版本發佈，雖然不是正式版，作為本項目的項目經理，還是決定使用ionic4開發，因為項目組員也是我。簡單記錄一下本次開發的過程，很多命令不經常輸入，就忘記了。
0.環境要求
nodejs(好像是10以上對於ionic4)
很多資料說最好裝cnpm，我使用感覺好像cnpm問題比npm多一點，而且現在網路情況不像以前那麼惡劣了
具有管理員許可權的命令行（類linux使用sudo）運行
npm install ionic -g
1.創建項目
目前ionic4還沒正式發佈，創建ionic4項目，需要使用
ionic start myApp tabs --type=angular
tabs代表模板類型，這可以直接ionic start --type=angular 嚮導方式創建
2.開發工具
官方好像推薦的是vs code，好像說了很多好像，主要是現在總結的時候已經不太記得當時的過程了，當時搜了很多資料，都是掃過一眼
vs code是用Electron應用，btw，ionic4也支持編譯成Electron應用運行。
一些常用插件，如：Ionic 4 Snippets、path intellinesne
其他工具，如：Sublime Text3，這個也不錯，ionic1開發的時候用的這個，很快
3.簡單開發
預設tabs模板創建的三個tab頁叫tab1，tab2，tab3顯然不適合開發，新建三個頁面，放到pages文件加下，使用命令：
ionic g
可以選擇新建類型，頁面，服務，模塊，組件等，我創建了三個頁面，名字中支持直接輸入路徑，三個頁面：home，todo，done
刪除原來三個tab123頁面，修改路由：tabs.router.module.ts，我從來沒學過angular，所以也不懂具體含義，照著修改了一下，可以正常使用。
然後開發了一個列表頁面，從後臺獲取數據，創建一個service，記得新建命令嗎 ionic g，負責http從伺服器獲取數據，參考https://github.com/nuonuoge/ionic4_angular6_elm簡單實現
頁面照搬官方組件教程，這個就是用ionic的好處，基本組件都有了，實現搜索，下拉刷新，上拉載入更多，地址：https://beta.ionicframework.com/docs/components
<ion-toolbar>
<ion-searchbar placeholder="請輸入流程名稱" [(ngModel)]="qryStr"></ion-searchbar>
<ion-button slot="end" expand="full" size="default" (click)="doRefresh($event)">搜索</ion-button>
</ion-toolbar>
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-item *ngFor="let wi of workitems" (click)="selectItem(wi.workItemID,wi.workItemName)">
<ion-card-content>
<p>{{wi.processChName}}</p>
</ion-card-content>
<ion-card-content>
<p>{{wi.workItemName}}</p>
</ion-card-content>
<ion-card-content>
<p>{{wi.bizObject.name}}</p>
</ion-card-content>
</ion-item>
<ion-item *ngIf="touchEnd">
<ion-card-content>
<p>---我是有底線的---</p>
</ion-card-content>
</ion-item>
<ion-infinite-scroll #myinfinite (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="載入更多...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
中間發現一個viewchild裝飾器用type取值有問題的bug，git上報了，rc2已經解決了
4.運行調試
ionic serve
調試沒啥說的，後面參數也沒研究過，可以指定host之類的。
我使用chrome調試的，跨域問題，需要安裝一個插件：Allow-Control-Allow-Origin
還有一個方式，ionic配置代理，沒搞，我後面會跟後臺服務部署在一起，所以不需要。還被人鄙視都流行前後分離了，我還傳統jsp
5.發佈部署
發佈這個著實費了一些勁，網上資料很多，但是說的都很簡單，可能著本身就是很簡單，我卻卡住了
直接使用ionic build --prod生成www文件夾，我理解應該是拷貝裡面內容到nginx類似靜態網站伺服器即可
我是直接拷貝www文件夾到tomcat的webapps目錄，後面就杯具了，出不來啊，記得前面掃大批ionic資料的時候看過一眼base url啥的，最後修改了index.html裡面的<base href="/" />為<base href="/www/" />，頁面里的圖片路徑有不對了，這個參考網上寫成相對路徑即可，即去掉前面的/
但是這樣，調試ionic serve又不行了，每次發佈都要改，這肯定不行啊，然後網上找資料，因為angular，webpack，啥的都不懂啊，根本沒法自己搞，只能抄
見到有人說這樣：
ionic cordova platform add browser
ionic cordova build browser
好像ionic4已經不需要了，而且這樣編譯出來的還是要修改base url。但是又意外收穫，用這個編譯的可以有啟動界面，像app一樣，不過網上這個資料好少，連官網都沒找到
有說加--engine browser --base-href /www/這兩個參數的，這兩個應該是angular的
又說把<base href="/" />改為<base href="." />
最後找到了我覺得的靠譜的，在https://github.com/ionic-team/ionic-cli/issues/3600，使用下麵命令。建議進去看看，精彩在評論里
ionic build --prod -- --base-href /www/
還有一個待解決的問題就是調試的時候可以/www/tabs/todo，路由到todo的tab頁，發佈後報錯，這個說配置路由解決，還沒研究，準備有時間學學angular的路由，在解決這個問題
