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的路由,在解決這個問題


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM