ionic2環境搭建與hello word

1、環境搭建

須要安裝配置如下組件，具體參考：Cordova環境搭建， 個人版本信息以下：

這裏要特別注意，node版本,ionic2須要 大於v6 ,而不是0.xx版本，不然會不支持報錯。

2、設置淘寶鏡像

 被強了你懂得，若是不設置淘寶鏡像，本人親測，一天你都搞不定 hello word.

1,registry淘寶鏡像　　

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

2.使用淘寶鏡像 安裝 cordova

cnpm install -g cordova
cnpm install -g ionic

3，註冊淘寶 包下載鏡像：用於項目建立中下載須要的包

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

查看npm config list

-------------------------------------------------------------------------------------------------------------------------------

也可以使用

STEP 1 設置cnpm

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

STEP 2 安裝nrm

cnpm install -g nrm  //安裝nrm

STEP3 轉換n

nrm ls //獲取nrm源列表

nrm use taobao //使用taobao源

-------------------------------------------------------------------------------------------------------------------------------

3、建立ionic2項目

進入你要建立項目的目錄 cd .... 使用 ionic start myApp [blank|tabs|sidemenu][verion] 建立項目

ionic start UDahuo.App sidemenu --no-git --skip-deps

--no-git跳過git建立，--skip-deps 跳過npm installl package階段，在進入項目目錄，執行一次cnpm install --save分步完成建立

大約須要2分鐘下載各類須要的包

項目目錄結構與大小以下：

關於 node-sass@4.5.3 postinstall: `node scripts/build.js`錯誤，node-sass 安裝時 binary 文件沒法下載的問題

 

執行：設置淘寶

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

或者 ~/.npmrc文件新增一行，設置 sass_binary_paths路徑

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

4、啓動運行項目

進入項目所在目錄，使用ionic serve命令可啓動在瀏覽器中查看項目

啓動後www目錄下會產生如下運行須要的問題件

啓動界面以下

5、添加移除插件

ionic項目，全部與硬件相關的操做基本都須要調用cordova插件，https://github.com，提供了大量的插件，你能夠直接執行添加命令：

ionic cordova plugin add cordova-plugin-file-transfer //使用插件id安裝插件
ionic cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2 //使用插件Url安裝插件
ionic cordova plugin add c:\cordova-plugin-file-opener //使用本地路徑安裝插件

移除插件的命令爲：

ionic cordova plugin remove org.apache.cordova.media

6、構建編譯項目

1,添加項目到指定平臺：使用命令cordova platform add [ios][android]... 可經過  cordova platform ls .顯示已經安裝的平臺項目以及可安裝的平臺

這裏我添加到android平臺，執行命令以下 

cordova platform add android

成功以下：

檢查項目，目錄會有一個platforms文件夾

其中cordova中build、clean、run等相關命令批處理用戶構建項目

缺乏api級別版本會出錯，執行下面命令便會自動下載安裝缺失的api級別

mkdir "%ANDROID_HOME%\licenses"
echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"

2,build項目，生產apk

這裏可以使用cordova中build命令，也能夠直接雙擊"platforms/android/cordova/build.bat"

cordova build android

問題1：gradle-2.14.1-all.zip下載緩慢可本身手動下載，而後放在本身的iis下，修改platforms\android\cordova\lib\builders\GradleBuilder.js文件中下面位置，爲本身的站點地址

　　

問題2：ionic 首次build 下載maven2 緩慢可修改./platforms/android/build.gradle更改國內阿里雲鏡像，下面兩處

    repositories {
        maven{ url'http://maven.aliyun.com/nexus/content/groups/public/'}
        jcenter()
    }

 

allprojects {
    repositories {
        maven{ url'http://maven.aliyun.com/nexus/content/groups/public/'};
        jcenter()
    }
}

 

完成後結果以下:

檢查項目的platforms文件夾中多了一個build目錄

從輸出目錄中，拷貝apk發送到手機上測試吧！^_^

 也可直接在模擬器中運行

ionic cordova emulate android -l

options的選項包括：

--l //livereload， 實時刷新變化。
--c //打印app裏的console
--s //打印設備的console
--p //指定設備的端口
--i //指定livereload的重刷端口
--debug //debug
--release //release

當處於livereload模式時，使用r重啓客戶端，使用 g your_url 跳轉到指定url， 使用c啓動或關閉console，使用s啓動或關閉設備的console， 使用q退出。具體查看http://blog.csdn.net/u012965341/article/details/50554895

 

問題1:uses-sdk:minSdkVersion 16 cannot be smaller than version 18 declared in library 錯誤

　　修改./platforms/android/AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.ionicframework.udahuoapp537568" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <provider android:authorities="${applicationId}.provider" android:exported="false" android:grantUriPermissions="true" android:name="android.support.v4.content.FileProvider">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/provider_paths" />
        </provider>
    </application>
    <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="23" tools:overrideLibrary="net.ypresto.androidtranscoder" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-feature android:name="android.hardware.location.gps" />
</manifest>

 問題2：android sdk版本與cordova版本不對應，可使用 >cordova platform add android@6.1.2 --save 選擇適合的版本 從新添加到平臺

Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

　更多Cordova CLI查看 http://www.javashuo.com/article/p-xvxxsqgt-ms.html