ionic3 熱更新發布步驟記錄


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

 


免責聲明!

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



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