1.安裝基本框架
npm install -g ionic@latest npm install -g cordova ionic
驗證版本號 ionic –version cordova -version
2.新建ionic項目
ionic start myapp
會顯示選項列表
tabs:創建一個選項卡項目
blank:創建一個空白項目
sidemenu:創建一個側邊菜單項目
super: 創建一個預制的完整項目,提供ionic開發最佳實踐
conference:創建一個展示真是應用的項目
tutorial:創建一個基於ionic文檔的教程項目
aws: 創建一個移動集成器啟動項目
任意選擇一個新建即可
3.進入項目文件夾
cd myapp
執行下面命令可以預覽項目
ionic serve
正常顯示后可以關掉服務Ctrl+C,此步驟只是保證ionic新建項目成功
4.ios目前已不支持熱更新,所以只對Android平台進行設置 設置Android平台 ionic cordova platform add android
設置安卓版本需修改下面文件內容
platforms/android/project.properties 和platforms/android/CordovaLib/project.properties 中的target=“你有的sdk版本”
安裝熱更新插件 ionic cordova plugin add cordova-hot-code-push-plugin ionic cordova plugin add cordova-hot-code-push-local-dev-addon npm install -g cordova-hot-code-push-cli
5.在config.xml配置文件中加入下面節點 <chcp> <config-file url="http://192.168.1.203:8121/chcp.json" /> <native-interface version="1" /> </chcp> 第一個子節點是需要發布在iis上的文件地址 第二個子節點是當前版本號 還有其它配置此處不再羅列
6.新開一個終端執行下面命令 cordova-hcp server 如果能夠正常輸出類似 Running server Checking: /ionic/myapp/www/ local_url http://localhost:31284 Warning: .chcpignore does not exist. Build 2017.10.27-10.17.48 created in ionic/myapp/www cordova-hcp local server available at: http://localhost:31284 cordova-hcp public server available at: https://5027caf9.ngrok.com
檢查/項目名稱/www 路徑下 有chcp.json和chcp.manifest表示熱更新服務啟動正常
7.在項目根目錄下新建模板 cordova-hcp.json { "content_url": "http://192.168.31.62:8121", "autogenerated": true, "update": "now" } 以后發布時只需執行 cordova-hcp build命令,就可以把模板內容替換到chcp.json文件內,因為每次更新或者發布app都會使熱更新服務重新生成chcp.json文件內容
8.構建iis,路徑指向/項目名稱/www 文件夾,也可以把www文件夾部署在你指定的位置。檢查chcp.json文件是否能訪問,若不能訪問 針對iis7+ 在IIS的站點屬性的HTTP頭設置里,選MIME 映射中點擊”文件類型”-”新類型”,添加一個文件類型: 關聯擴展名:.json 內容類型(MIME):application/x-javascript
9.生成apk ionic cordova build android 此時熱更新服務不能停止,一個終端執保持熱更新服務,另一個終端執行其它命令 生成后執行 cordova-hcp build 復制模板文件 然后通過iis訪問地址,檢查頁面顯示是否正常,json文件是否可以訪問,json文件內的ip地址是否是iis的發布地址 在手機上安裝此apk
10.對項目界面或者功能進行修改 然后對配置文件config.xml的chcp節點的版本號進行修改 <native-interface version="2" /> 重新生成apk ionic cordova build android 通過iis訪問檢查頁面和功能是否修改 執行 cordova-hcp build 然后檢查iis上的json文件是否修改 關掉手機上原來的程序,重新打開程序,可以看到頁面或者功能已變更。有時候更新會有延遲。
瑣碎的資料
1. http://localhost:8100/ionic-lab 可以看到模擬器
2. 新建模塊命令 ionic g page login
3. 新建服務命令 ionic g provider MyData
4. 在虛擬機上執行命令 ionic cordova emulate android -l -c
