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


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

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

下載node.js環境,穩定版本:v6.9.5 下載android studio: android-studio-bundle-145.3360264-windows.exe包含 Android SDK,打開出現問題進行如下操作:

這里寫圖片描述

到控制台安裝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目錄下) 新建項目

可以自己建立workspace,然后cd到該目錄下創建項目

ionic start MyIonic2Project tutorial –v2 (若要建立tabs項目,將tutorial改為tabs即可)

可能會失敗,出現如下信息:

這里寫圖片描述

說明npm安裝失敗了,可以cd到項目目錄,改用cnpm重新進行安裝

cnpm install

出現如下信息則安裝成功:

這里寫圖片描述

列表內容

運行項目

ionic serve

這里寫圖片描述

瀏覽器上面訪問在提示的ip,即可出現項目效果:

這里寫圖片描述

此時只能看到瀏覽器模式,若想在瀏覽器上查看手機上面的樣式,有以下兩種方法:

a.在谷歌瀏覽器上,按F12進入調試模式,然后再按ctrl+Shift+M即可進入手機調試模式;

這里寫圖片描述

b.在谷歌瀏覽器上進入應用商店安裝插件Ripple,即可模擬出手機模式。

這里寫圖片描述

這里更推薦使用第二種模式,因為該模式模擬原生的手機模式,更貼近手機應用環境。 打包apk

需要先安裝jdk,sdk,並分別配置環境變量,jdk版本1.8以上(注意:在MAC下是不需要進行環境變量的配置的)

運行命令:

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左右。


免責聲明!

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



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