(一) 搭建开发环境,并创建工程
1.准备工作
下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm 运行环境),Android SDK (Android编译)
2.配置环境变量:
- ANDROID_HOME D:\Program Files\adt\sdk (对应sdk路径)
- path %ANDROID_HOME%\platform-tools;
- path %ANDROID_HOME%\tools;
3.安装ionic等,运行命令提示符(管理员) 输入
a. 将cordova和ionic包安装到全局环境中(可供命令行使用):
- npm install -g cordova ionic
注:由于GFW,很多插件下载不下来,我们可以使用淘宝镜像来解决这个问题:
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm install -g ionic cordova
b. 进入你要创建项目的路径:
- cd E:\Study\Android\ionic\Project
- e:
- ionic start myApp tabs
- cd myApp
- ionic platform add android
- ionic build android
- ionic emulate android
其中f和g可以合并为:
- ionic run android
即生成apk,并在模拟器或真机中模拟。
4.更新ionic等
a.更新cordova及ionic包
- npm update -g cordova ionic
- ionic lib update
5.展现ionic项目结果(显示在ios和android上的样式)
- ionic serve --lab
6.查看ionic版本(当前最新版本为1.2.13)
- ionic -v
(二) 为Android项目集成Crosswalk(更新官方命令行工具)
现在集成crosswalk不用这么麻烦了!官方的命令行工具已经能让我们一步到位,省去很多工作,只需在cmd中进入项目所在目录
(不能有中文目录,还得翻墙),执行:
- ionic browser add crosswalk
- ionic browser revert android
- ionic browser remove crosswalk
以下为之前的方法:
2. 新建ionic项目
- ionic start IonicProject blank
- cd IonicProject
- cordova platform add android@3.5
这里必须要指定cordova的版本为
3.5,原因是目前的Crosswalk只支持
3.5。
3.在命令提示符中
先进入到项目所在文件夹下:
a.移除项目中CordovaLib文件夹中的所有文件
- rm -rf platforms/android/CordovaLib/*
b.拷贝Crosswalk x86架构下的文件到CordovaLib文件夹中
- cp -a E:\Study\CrossPlatform\Crosswalk\crosswalk-cordova-9.38.208.10-x86/framework/* platforms/android/CordovaLib/
- cp -a E:\Study\CrossPlatform\Crosswalk\crosswalk-cordova-9.38.208.10-arm/framework/xwalk_core_library/libs/armeabi-v7a platforms/android/CordovaLib/xwalk_core_library/libs/
- cp -a E:\Study\CrossPlatform\Crosswalk\crosswalk-cordova-9.38.208.10-x86/VERSION platforms/android/
- cd platforms\android\CordovaLib
- android update project --subprojects --path . --target "android-19"
- ant debug
h.在AndroidManifest.xml中添加以下权限(
必须)
- <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
- <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
说明:
其中
E:\Study\CrossPlatform\Crosswalk\crosswalk-cordova-9.38.208.10-x86和E:\Study\CrossPlatform\Crosswalk\crosswalk-cordova-9.38.208.10-arm分别对应步骤1中解压后的路径。
a、b、c、d步骤可手动直接操作,但必须要执行步骤e、f、h。
在h步骤执行结束后就可以返回到项目目录,执行ionic run android了。
(三) 安装sass并在webstorm中为scss添加watcher
1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551
安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去。
安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确。
2.通过Ruby安装Sass
启动Ruby中的“Start Command Prompt with Ruby”
因为GFW的缘故,特将淘宝的Ruby镜像添加进来,安装Sass。
在命令行中输入:
- gem sources --remove https://rubygems.org/
- gem source -a http://ruby.taobao.org
- gem install sass
安装结束后在命令行中运行 sass -v 能看到对应的版本则说明安装正确。
3.启动WebStorm,打开已有项目,创建一个scss文件。
这是在右上角会显示Add Watcher按钮,点击它,在弹出的对话框中,将Program的路径设为Ruby中scss.bat的路径。
也可以修改css的输出路径等等。
主要步骤已经完成,现在在我们修改scss文件的时候,webstorm会为我们自动生成对应的css文件,别忘记在html中引入这个css文件。
测试修改ionic的主题颜色,在之前创建的scss文件中添加以下内容并运行。
- $positive: #00FF00;
- @import "../lib/ionic/scss/ionic";
就会发现之前使用蓝色positive的内容全部变成了绿色。
(四) 修改应用图标及添加启动画面(更新官方命令行工具自动生成)
由于Ionic更新了命令行工具,以后修改应用图标和添加启动画面就简单了,最新方法见最下方:
应用图标:
1.在整个项目所在文件夹下创建res文件夹,里边再分别创建两个文件夹android和ios。
2.针对Android平台:将我们的要替换的启动图标放如android文件夹下。可以分别起名为:mdpi.png(48*48),hdpi(72*72)、xhdpi(96*96)、xxhdpi(144*144) 和 xxxhdpiI(192*192)。
针对ios的,待补充。
3.在config.xml中添加
<platform name="android">
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
</platform>
其中src中的图片路径就为整个项目的相对路径。
我这里偷了个懒,只搞了一个最高像素密度的应用图标(192px*192px)进去,安卓会自动进行压缩。
这里顺便说一下如果要修改应用的名称,只要修改name标签里的内容即可。
这样在命令行中重新运行ionic run android,就能看到应用图标和名字已经被替换了。
启动画面:
将启动画面的图片拷贝到之前的android文件夹下,splash-land-hdpi.png(640*480)splash-land-ldpi.png(426 × 320)splash-land-mdpi.png(470 × 320)splash-land-xhdpi.png(960 × 720)splash-port-hdpi.png(480*640)splash-port-ldpi.png(320*426)splash-port-mdpi.png(320*470)splash-port-xhdpi.png(720*960)
(名称可随意,只要和config.xml对应上即可)。
在config.xml中添加
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="10000" />
其中10000单位为毫秒,即10秒后隐藏启动画面。如果不写第三句,默认3秒隐藏。
如下图所示:
我这里没有那么多分辨率下的图片,就随便找了一个稍大分辨率的,density也没写。它会自动将该图片拷贝到drawable文件夹。
这时候再重新运行程序,即可看到启动画面。
用以上的方法,启动画面的显示时长是固定的,很明显不太友好。
未完持续...
以上方法已经可以使用Ionic命令行工具来自动生成了,步骤如下:1.在项目的根目录下创建resources文件夹。2.在文件夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png、psd、ai)3.在cmd中进入项目所在文件夹执行:
- ionic resources
执行该命令后,会自动在resources文件夹下创建已添加的平台名称的文件夹,如:android,其中会自动将图片进行缩放、裁剪,生成不同分辨率的图片,并在config.xml中添加相应内容。也可分开执行:注意:执行以上命令时需在线!
- ionic resources --icon
- ionic resources --splash
(五) ionic常见问题解决
以下为在使用ionic开发过程中遇到的各种常见问题,不断更新。 目前的开发环境如下图:
1.在xcode7.1中调试没有任何问题,但是打包过程中提示:‘Cordova/CDVViewController.h’ file not found。
在 Build Settings -> Header Search Paths 中添加:
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
之前已有项不要动。
在地图所在div中添加指令:
data-tap-disabled="true" ,例:
- <ion-content>...
- <div id="map" data-tap-disabled="true">...</div>
- <ion-list>...</ion-list>
- </ion-content>