作為一個後臺開發人員，幾年前參與過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的路由，在解決這個問題