ionic2环境搭建与hello word

2022-05-17 13:52:11

一、环境搭建

需要安装配置以下组件，具体参考：Cordova环境搭建，我的版本信息如下：

这里要特别注意，node版本,ionic2需要大于v6 ,而不是0.xx版本，否则会不支持报错。

二、设置淘宝镜像

被强了你懂得，如果不设置淘宝镜像，本人亲测，一天你都搞不定 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源

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

三、创建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/

四、启动运行项目

进入项目所在目录，使用ionic serve命令可启动在浏览器中查看项目

启动后www目录下会产生以下运行需要的问题件

启动界面如下

五、添加移除插件

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

六、构建编译项目

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.****.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查看 https://segmentfault.com/a/1190000002915917

码农公寓

相关文章