轻松学习Ionic

最新推荐文章于 2020-10-12 19:15:43 发布

银狐被占用

最新推荐文章于 2020-10-12 19:15:43 发布

阅读量1.2k

点赞数

分类专栏： AngularJs

AngularJs 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍Ionic开发环境搭建流程，包括Node.js、WebStorm等工具安装，环境变量配置，ionic项目创建及构建过程。同时涵盖Crosswalk集成、应用图标与启动画面自定义、Sass安装与WebStorm集成等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）搭建开发环境，并创建工程

1.准备工作

下载 Node.js（下载包），WebStorm（IDE，编写代码，浏览器调试）,JDK（webstorm 运行环境），Android SDK (Android编译)

2.配置环境变量：

[plain]view plain copy 
    
 print?
 ANDROID_HOME    D:\Program Files\adt\sdk                              （对应sdk路径）  
        path     %ANDROID_HOME%\platform-tools;  
        path     %ANDROID_HOME%\tools;  

3.安装ionic等，运行命令提示符（管理员）输入

a. 将cordova和ionic包安装到全局环境中（可供命令行使用）：

[plain]view plain copy 
   
 print?
 npm install -g cordova ionic  

注：由于GFW，很多插件下载不下来，我们可以使用淘宝镜像来解决这个问题：

[plain]view plain copy 
   
 print?
 npm install -g cnpm --registry=https://registry.npm.taobao.org  

安装完成后，以后所有的插件都使用 cnpm 这个命令来进行安装。

[plain]view plain copy 
   
 print?
 cnpm install -g ionic cordova  

b. 进入你要创建项目的路径：

[plain]view plain copy 
    
 print?
 cd E:\Study\Android\ionic\Project  
 e:  

c. 创建一个名为myApp的还有tabs的项目（ionic start <project-name> <optional-template>）可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白）:

[plain]view plain copy 
    
 print?
 ionic start myApp tabs  

d. myApp就为项目名称,进入myApp这个文件夹:

[plain]view plain copy 
    
 print?
 cd myApp  

e. 添加android平台:

[plain]view plain copy 
    
 print?
 ionic platform add android  

f. 生成androidapk:

[plain]view plain copy 
    
 print?
 ionic build android  

g. 在android模拟器或真机中模拟:

[plain]view plain copy 
    
 print?
 ionic emulate android  

其中f和g可以合并为：

[plain]view plain copy 
    
 print?
 ionic run android  

即生成apk，并在模拟器或真机中模拟。

4.更新ionic等

a.更新cordova及ionic包

[plain]view plain copy 
    
 print?
 npm update -g cordova ionic  

b.更新已建ionic项目中的js类库，命令行中先进入项目所在目录，然后运行：

[plain]view plain copy 
    
 print?
 ionic lib update  

5.展现ionic项目结果（显示在ios和android上的样式）

[plain]view plain copy 
   
 print?
 ionic serve --lab  

6.查看ionic版本（当前最新版本为1.2.13）

[plain]view plain copy 
   
 print?
 ionic -v  

（二）为Android项目集成Crosswalk（更新官方命令行工具）

现在集成crosswalk不用这么麻烦了！官方的命令行工具已经能让我们一步到位，省去很多工作，只需在cmd中进入项目所在目录 (不能有中文目录，还得翻墙)，执行：

[html]view plain copy 
     
 print?
 ionic browser add crosswalk  

如若要移除crosswalk，则需执行：

[html]view plain copy 
     
 print?
 ionic browser revert android  

或者

[html]view plain copy 
     
 print?
 ionic browser remove crosswalk  

注意：执行以上命令时需要在线。命令行工具版本必须为1.3.0以上。 Android SDK 为 19以上。

以下为之前的方法：

1.进入Crosswalk 下载页面，下载其中的Cordova Android (x86)及Cordova Android (ARM)，并将他们进行解压。目前稳定版版本号为： 9.38.208.10

2. 新建ionic项目

[html]view plain copy 
     
 print?
 ionic start IonicProject blank  
 cd IonicProject  
 cordova platform add android@3.5  

这里必须要指定cordova的版本为 3.5，原因是目前的Crosswalk只支持 3.5。

3.在命令提示符中先进入到项目所在文件夹下：

a.移除项目中CordovaLib文件夹中的所有文件

[plain]view plain copy 
     
 print?
 rm -rf platforms/android/CordovaLib/*  

b.拷贝Crosswalk x86架构下的文件到CordovaLib文件夹中

[html]view plain copy 
     
 print?
 cp -a E:\Study\CrossPlatform\Crosswalk\crosswalk-cordova-9.38.208.10-x86/framework/* platforms/android/CordovaLib/  

c.拷贝Crosswalk ARM架构下的so文件到CordovaLib文件夹中

[html]view plain copy 
     
 print?
 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/  

d.拷贝Crosswalk的版本文件到android文件夹下

[html]view plain copy 
     
 print?
 cp -a E:\Study\CrossPlatform\Crosswalk\crosswalk-cordova-9.38.208.10-x86/VERSION platforms/android/  

e.进入CordovaLib文件夹

[html]view plain copy 
     
 print?
 cd platforms\android\CordovaLib  

f.更新项目

[html]view plain copy 
     
 print?
 android update project --subprojects --path . --target "android-19"  

g.ant打包，并开启debug模式（可不执行）

[html]view plain copy 
     
 print?
 ant debug  

h.在AndroidManifest.xml中添加以下权限（必须）

[html]view plain copy 
     
 print?
 <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”

在命令行中输入：

[plain]view plain copy 
      
 print?
 gem sources --remove https://rubygems.org/  
 gem source -a http://ruby.taobao.org  
 gem install sass  

因为GFW的缘故，特将淘宝的Ruby镜像添加进来，安装Sass。

安装结束后在命令行中运行 sass -v 能看到对应的版本则说明安装正确。

3.启动WebStorm，打开已有项目，创建一个scss文件。

这是在右上角会显示Add Watcher按钮，点击它，在弹出的对话框中，将Program的路径设为Ruby中scss.bat的路径。

也可以修改css的输出路径等等。

主要步骤已经完成，现在在我们修改scss文件的时候，webstorm会为我们自动生成对应的css文件，别忘记在html中引入这个css文件。

测试修改ionic的主题颜色，在之前创建的scss文件中添加以下内容并运行。

[html]view plain copy 
      
 print?
 $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中进入项目所在文件夹执行：
   
    
     
      [html] 
      view plain
       copy
      
       print
      ?
      
      
     
    
    ionic resources  
   
  
  
     
     执行该命令后，会自动在resources文件夹下创建已添加的平台名称的文件夹，如：android，其中会自动将图片进行缩放、裁剪，生成不同分辨率的图片，并在config.xml中添加相应内容。
  
  
       也可分开执行：
  
  
   
   
    
     
      [html] 
      view plain
       copy
      
       print
      ?
      
      
     
    
    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"

之前已有项不要动。

2.使用arcigis javascript api 开发地图过程中，点击点、线或面，但气泡不显示：

在地图所在div中添加指令： data-tap-disabled="true" ，例：

[html]view plain copy 
   
 print?
 <ion-content>...  
 <div id="map" data-tap-disabled="true">...</div>  
 <ion-list>...</ion-list>  
 </ion-content>  