Ionic創建混合App(一)


 前言

  最近公司要開始做App項目,最終選定了ionic開發方案,在這里我將學習的過程記錄在這里,一方面避免自己忘記,另一方面方便大家交流學習。這里我們采用的是 Ionic2 + Angular2 :

  AngularJS2 是一款開源JavaScript庫,由Google維護,用來協助單一頁面應用程序運行。AngularJS2 是 Angular 1.x 的升級版本,性能上得到顯著的提高,能很好的支持 Web 開發組件。AngularJS2 發布於2016年9月份,它是基於ES6來開發的。 

  程語言JavaScript是ECMAScript的實現和擴展,由ECMA(一個類似W3C的標准組織)參與進行標准化。ECMAScript定義了:

    語言語法 – 語法解析規則、關鍵字、語句、聲明、運算符等。

    類型 – 布爾型、數字、字符串、對象等。

    原型和繼承

    內建對象和函數的標准庫JSONMath數組方法對象自省方法等。

  ECMAScript標准不定義HTML或CSS的相關功能,也不定義類似DOM(文檔對象模型)的Web API,這些都在獨立的標准中進行定義。ECMAScript涵蓋了各種環境中JS的使用場景,無論是瀏覽器環境還是類似node.js的非瀏覽器環境。

  TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集,而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。TypeScript 是一種給 JavaScript 添加特性的語言擴展。

  ECMAScript 6(以下簡稱ES6)是JavaScript語言的下一代標准。因為當前版本的ES6是在2015年發布的,所以又稱ECMAScript 2015。

  Ionic 是UI框架,集成了angular在內,使用angular提供的應用結構,並進行交互

  與ionic1的區別

  1.    目錄結構有變化   開發目錄從www轉移到src中,個人認為主要是采用了typeScript需要編譯。
  2.    angrular2 typescript  很好很強大。需要適應。
  3.    每個頁面就是一個目錄,由模版.html  typescript腳本  .ts 樣式   .scss組成
  4.    入口在src/app/app.component.ts里    rootPage  作為根節點。
  5.    比ionic1少寫不少代碼,據說速度也更快了。

一、環境搭建

  首先還是開發環境的搭建,這里我只說andorid環境的搭建,ios之后再說。

  1.java JDK安裝(建議安裝新版)

    下載地址一:http://www.oracle.com/technetwork/java/javase/downloads/index.html

    下載地址二: http://www.androiddevtools.cn/

    下載地址三: http://jdk.android-studio.org/

    具體的安裝步驟可以百度搜索,安裝完成收到 ”運行->cdm->java/javac“能打印用法說明證明安裝成功。

  2.Android SDK安裝

    下載Android SDK 文件,選擇自己想要的版本下載。

    解壓Android SDK文件,里面有兩個應用程序: “SDK Manager.exe”(負責下載或更新SDK包) 和 "AVD Manager.exe"(負責創建管理虛擬機)。運行“SDK Manager.exe”進行SDK下載。   

    使用代理下載,點擊tools-option,在HttpProxyServer中輸入mirrors.neusoft.edu.cn,在HttpProxyPort輸入80,點擊關閉,關閉sdkManager並重新啟動。

    下載截圖圈紅部分

 勾選完成,點擊Install X packages開始下載

 

    下載完成后配置環境變量

      D:\Program Files\ADT\sdk\tools;

      D:\Program Files\ADT\sdk\platform-tools;(具體視你SDK安裝目錄而定)

    在命令行輸入 android -h ,有輸出非錯誤信息,即搭建完成。

 

  3.nodejs 安裝(建議安裝新版)

    下載地址:https://nodejs.org/en

 

  4.cordova 安裝

    npm set registry https://registry.npm.taobao.org # 注冊模塊鏡像
    npm set disturl https://npm.taobao.org/dist # node-gyp 編譯依賴的 node 源碼鏡像
    npm cache clean # 清空緩存

    在國內因為 goolge不能使用的問題,所以我們一般才用淘寶鏡像安裝,使用cnpm替代npm  

    命令行運行 

npm install -g cnpm --registry=https://registry.npm.taobao.org

    然后使用官方的安裝方法安裝,在之前的cordova2.9還能下載安裝包安裝,現在官方給的安裝方法只能在線安裝,如果要選擇安裝版本可以使用 cnpm install -g cordova@version,卸載命令 npm uninstall cordova -g

cnpm install -g cordova

    完成后使用cordova -v能查看版本證明安裝成功

    卸載命令

cnpm uninstall -g cordova

      更新命令

cnpm update -g cordova

  

  5.ionic 安裝

    如果已經安裝可以使用更新命令更新 cnpm update -g ionic  

cnpm install -g ionic

    完成后使用ionic -v能查看版本證明安裝成功,ionic的更新與卸載同 cordova一樣

 

二:創建ionic項目

  環境都安裝成功了以后現在就可以創建 ionic項目了

  Ionic提供了三種初始模版,即:tabs、sidemenu、blank,不加模版名時默認創建tabs項目。

    ionic start myApp --v2 tabs //使用tabs模版創建Ionic2項目
    ionic start myApp --v2 sidemenu //使用sidemenu模版創建Ionic2項目
    ionic start myApp --v2 blank //創建空白的Ionic2項目

  1.ionic -v1項目 ,ionic2 默認創建的是ionic 2+的項目,所以要創建 v1版本的項目需要加上版本號
//創建ionic -v1版本的項目demo
ionic start demo --v1 --no-git --skip-npm 
cnpm install --save  //進入項目demo目錄執行
ionic serve          //啟動項目

  這樣我們就可以看到我們創建的ionic -v1版本的項目了 http://www.cnblogs.com/jinxiblog/p/6820659.html

  2.ionic -v2項目

//創建ionic -v2版本的項目
ionic start demo  --no-git --skip-npm 
cnpm install --save  //進入項目demo目錄執行
ionic serve 

  ionic項目創建報錯處理 http://www.jianshu.com/p/f9b0dfe35328

   過程中出現的問題:

直接使用(ionic start demo tabs)此命令創建項目,網絡原因Running command會執行很長時間,有些慢,可能出錯,可以換另一種方式  ionic start demo  --no-git --skip-npm

跳過npm install package

執行完畢,沒有錯誤的情況下,此時www目錄沒有相關模板,進入項目目錄

npm  install --save

執行完畢,輸入ionic info

如果報錯,使用 cnpm install --save

 至此,項目創建完畢。

 

三、啟動項目

  進入項目根目錄執行 ionic serve 命令

執行ionic serve出現以上問題,在npm時,會很慢,結束操作。使用cnpm執行該命令,完畢后,重新ionic serve

 

 

四、添加 Android 平台

    使用命令ionic platform add android會一直加載,沒有響應,翻牆的條件限制,使用命令cordova platform add android --nofetch

 

出現的問題:

  添加安卓平台時,如果出現downloading:gradle-2.14.1-all.zip類似語句,Ctrl+C結束執行,手動下載gradle的對應版本號的zip。下載好的gradle的壓縮文件復制到Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all.zip\***********\路徑下。重新執行add android,自動解壓。

 

五、編譯 APK

  項目根目錄執行

cordova build android

  

 


免責聲明!

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



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