Ionic2開發環境搭建、項目創建調試與Android應用的打包、優化

中文參考文檔:https://yanxiaodi.gitbooks.io/ionic2-guide/content/introduction/
Ionic2項目源碼:https://github.com/driftyco/ionic

windows下ionic2開發環境配置步驟如下:

  1. 下載node.js環境,穩定版本:v6.9.5
  2. 下載android studio: android-studio-bundle-145.3360264-windows.exe包含 Android SDK,打開出現問題進行如下操作:
    這裏寫圖片描述
  3. 到控制檯安裝ionic2和Cordova
    首先更換淘寶鏡像,下載起來會快很多,使用時需要將npm命令換成cnpm
    npm install -g cnpm –registry=http://registry.npm.taobao.org
    安裝ionic2:npm install -g ionic (查看:ionic -version 卸載:npm uninstall -g ionic)
    安裝Cordova:npm install -g cordova(查看:cordova -version)
    (兩者默認安裝路徑的是在C盤下的user目錄下)
  4. 新建項目
    可以自己建立workspace,然後cd到該目錄下創建項目
    ionic start MyIonic2Project tutorial –v2 (若要建立tabs項目,將tutorial改爲tabs即可)
    可能會失敗,出現如下信息:
    這裏寫圖片描述
    說明npm安裝失敗了,可以cd到項目目錄,改用cnpm重新進行安裝
    cnpm install
    出現如下信息則安裝成功:
    這裏寫圖片描述
  5. 列表內容
    運行項目
    ionic serve
    這裏寫圖片描述
    可瀏覽器上面訪問在提示的ip,即可出現項目效果:
    這裏寫圖片描述
    此時只能看到瀏覽器模式,若想在瀏覽器上查看手機上面的樣式,有以下兩種方法:
    a.在谷歌瀏覽器上,按F12進入調試模式,然後再按ctrl+Shift+M即可進入手機調試模式;
    這裏寫圖片描述
    b.在谷歌瀏覽器上進入應用商店安裝插件Ripple,即可模擬出手機模式。
    這裏寫圖片描述
    這裏更推薦使用第二種模式,因爲該模式模擬原生的手機模式,更貼近手機應用環境。
  6. 打包apk
    需要先安裝jdk,sdk,並分別配置環境變量,jdk版本1.8以上
    運行命令:
    cordova platform add android
    (重新添加android環境時用到:cordova platform rm android)
    ionic build android
    成功build後在控制檯提示的目錄下可以找到項目生成的APK,傳到手機上安裝即可。
    7.apk性能優化
    通過Ionic2打包後的Android應用在手機上可能會出現卡頓等情況,此時可以給應用添加crosswalk環境,此方法將瀏覽器內核打包進入apk,使應用的流暢程度大大增加(在android5.0以下應用中體現得尤爲明顯)。此方式打包apk的缺點是會使apk的大小增加20M左右。
    添加crosswalk:
    cordova plugin add cordova-plugin-crosswalk-webview
    cordova build android
    打包web內核進入app,體積換取app流暢度
    (下一節總結Ionic2與服務器進行異步通信的方法)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章