Windows + Android + Cordova + ionic環境搭建

jopen 8年前發布 | 99K 次閱讀 移動開發

廢話不多說，直接上干貨：

一、ANT安裝

  1. Apache Ant,是一個將軟件編譯、測試、部署等步驟聯系在一起加以自動化的一個工具,大多用于Java環境中的軟件開發。

  2.  下載地址：http://ant.apache.org/bindownload.cgi

  3. 解壓，并放在非中文的目錄下。（我的目錄：E:\Program Files\Java\apache-ant-1.9.4）

  4. 配置環境變量：
    5. </ol>

    變量名：ANT_HOME    值：既ANT的放置目錄（如:E:\Program Files\Java\apache-ant-1.9.4）

    變量名：path       值：%ANT_HOME%\bin;（注意用前面的變量名要用英語的  ;  隔開，下文不再重復提醒）

    5.dos命令窗口測試

    1
    2
    ant - version
    ant - h

    二、Android SDK 安裝

    1. Android Studio下載地址：百度云盤
    2. Android Studio會自行安裝SDK，如需要更新其它版本的SDK，請自行“KX上網”解決問題。
    3. 附SDK離線版：百度網盤
    4. 配置環境變量：

    變量名：ANDROID_SDK_HOME    值：SDK目錄（E:\Android\Sdk）

    變量名：path      值：%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools;

    4.DOS命令窗口測試

    1
    2
    3
    android - h
    adb version
    android list avd

    三、NODE.JS安裝

    1. 下載地址：https://nodejs.org/
    2. 按PC平臺下載相應的安裝包，直接雙擊安裝既可，環境變量都會自行配置，不用手動操作。
    3. DOS測試命令
      1
      npm - v

       

    四、GIT安裝（代碼版本庫管理軟件）

    1. 下載地址：http://git-scm.com/download/
    2. 下載相應PC平臺的安裝包，直接雙擊安裝既可。
    3. DOS測試命令
      1
      git -- version

       

    五、Cordova + ionic 安裝

    1. DOS命令安裝，耐心等待，不成功的請多次嘗試。
      1
      2
      3
      npm install - g cordova ionic //安裝
       
      npm update cordova / ionic - g    //更新，此代碼不用運行，如果當Cordova有更新版本時使用。

      安裝路徑：
      C:\Documents and Settings\RenSanNing\Application Data\npm\node_modules\cordova[ionic]
    2. 創建Cordova項目：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      //在任意非中文目錄下創建項目目錄：如E:\cordova
      //按住SHIFT+鼠標右鍵，點“在此處打開命令窗口”
       
      cordova create myapp com . yourname . myapp MyApp
       
      //myapp為目錄名；com.yourname,myapp為項目路徑；MyApp為項目名
      //此時就會有  E:\cordova\myqpp
       
      cd myapp    //進入到項目目錄
       
      //添加平臺：
      cordova platform add ios
      cordova platform add android
       
      //移除平臺：
      cordova platform rm android
       
      //編譯平臺：
      cordova build android
      [實為： ]
      cordova prepare android
      cordova compile android
       
      //查看平臺：
      cordova platfrom list
      //添加插件：（更多插件：http://plugins.cordova.io/）
      cordova plugin add org . apache . cordova . device                    //設備API
      cordova plugin add org . apache . cordova . network - information    //網絡（事件）
      cordova plugin add org . apache . cordova . battery - status        //電池（事件）
      cordova plugin add org . apache . cordova . device - motion      //加速器
      cordova plugin add org . apache . cordova . device - orientation      //羅盤
      cordova plugin add org . apache . cordova . geolocation          //定位
      cordova plugin add org . apache . cordova . camera                  //攝像頭
      cordova plugin add org . apache . cordova . media - capture      //媒體文件處理
      cordova plugin add org . apache . cordova . media                    //媒體文件處理
      cordova plugin add org . apache . cordova . file                          //文件訪問
      cordova plugin add org . apache . cordova . file - transfer            //文件傳輸
      cordova plugin add org . apache . cordova . dialogs                  //對話框
      cordova plugin add org . apache . cordova . vibration                //震動
      cordova plugin add org . apache . cordova . contacts                //聯系人
      cordova plugin add org . apache . cordova . globalization        //全球化
      cordova plugin add org . apache . cordova . splashscreen        //閃屏
      cordova plugin add org . apache . cordova . inappbrowser              //打開新的瀏覽器窗口
      cordova plugin add org . apache . cordova . console                  //調試控制臺
       
      //查看已安裝：
      cordova plugin ls
      //刪除插件：
      cordova plugin rm org . apache . cordova . console
       
      //更新Cordova:
      npm update - g cordova
       
      //更新平臺項目：
      cordova platform update android
      //Cordova幫助：
      cordova help

       
    3. 創建 ionic 項目：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      //創建空白模板
      ionic start myapp blank
       
      //創建tabs模板
      ionic start myapp tabs
       
      //創建sidemenu模板
      ionic start myapp sidemenu
       
      其他的一些操作只要將上面 Cordova 替換成 ionic 就能執行相同的操作。
    4. 瀏覽器調試：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      //進入項目根目錄執行
      ionic serve
       
      //出現在如下提示，選擇以什么地址顯示1、IP;2、localhost;這里按個人意愿隨意選擇
      Multiple addresses available .
      Please select which address to use by entering its number from the list below :
      1 ) 192.168.0.103
      2 ) localhost
      Std in before prompt
      Address Selection :
       
      選擇完后，就會自動用默認瀏覽器打開調試頁面
    5. 附上cordova的API：http://cordova.apache.org/docs/en/3.0.0/index.html
    6. 插件：http://plugins.cordova.io

    來自： http://my.oschina.net/liucao/blog/598566

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！