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