Ionic

---

初识Ionic

简介

​ Ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。同时还是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

• ionic的开发添加android和ios环境。
• ionic提供很多css组件和javascript UI库。
• ionic可以支持定制android和ios的插件，也支持服务端REST的敏捷开发。

特点

• ionic 基于Angular语法，简单易学。
• ionic 是一个轻量级框架。
• ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVVM ，代码易维护。
• ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
• ionic 专注原生，让你看不出混合应用和原生的区别
• ionic 提供了强大的命令行工具。
• ionic 性能优越，运行速度快。

---

Ionic环境搭建

​ Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。

• V8引擎执行Javascript的速度非常快，性能非常好。
• Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。
• Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

Node.js

安装Node.js

• 登录 https://nodejs.org/en/ 根据需要，下载稳定版Node.js（Node.js最好安装最新版本）
• 运行下载的安装包 node-v*..-x64（86）.msi 进行安装

运行Node.js

打开Node.js command prompt命令行

查看node.js和npm的版本号，如出现以下内容，则安装成功

Your environment has been set up for using Node.js 8.9.3 (x64) and npm.
C:\Users\EAST>node -v
v8.9.3
C:\Users\EAST>npm -v
5.5.1

Node Package Manager

​ NPM的全称是Node Package Manager，是一个Node.js包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

​ Node.js自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Node.js库和框架为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。

NPM有些类似于Java中Maven构建依赖下载Jar包的功能，可以通过 https://www.npmjs.com/ 来检索所需要依赖的坐标。

​ 由于NPM服务器不在国内，在下载npm包的时候经常会遇到超时情况。所以国内可以使用淘宝的npm 镜像，输入以下命令，安装淘宝镜像源：

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

TAONPM

淘宝 NPM 镜像

​ 这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。当前 registry.npm.taobao.org 是从 r.cnpmjs.org 进行全量同步的

• 当前 npm.taobao.org 运行版本是: cnpmjs.org@3.0.0-alpha.14
• 本系统运行在 Node.js@v8.9.0 上
• 开源镜像: http://npm.taobao.org/mirrors
• Node.js 镜像: http://npm.taobao.org/mirrors/node
• alinode 镜像: http://npm.taobao.org/mirrors/alinode
• phantomjs 镜像: http://npm.taobao.org/mirrors/phantomjs
• ChromeDriver 镜像: http://npm.taobao.org/mirrors/chromedriver
• OperaDriver 镜像: http://npm.taobao.org/mirrors/operadriver
• Selenium 镜像: http://npm.taobao.org/mirrors/selenium
• Node.js 文档镜像: http://npm.taobao.org/mirrors/node/latest/docs/api/index.html
• NPM 镜像: https://npm.taobao.org/mirrors/npm/
• electron 镜像: https://npm.taobao.org/mirrors/electron/
• node-inspector 镜像: https://npm.taobao.org/mirrors/node-inspector/

Ionic

安装Ionic

运行如下命令（中央仓库安装）：

npm install -g ionic

运行如下命令（淘宝镜像安装）：

cnpm install -g ionic

安装完成后，输入如下命令，查看版本号（默认下载最新版）：

C:\Users\MahoneAlex>ionic -version
3.19.0

卸载Ionic

运行如下命令进行卸载：

npm uninstall -g ionic

Cordova

Cordova

• Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
• Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。
• Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

官方主页：http://cordova.apache.org/

安装Cordova

运行如下命令进行安装（中央仓库安装）：

npm install -g cordova

运行如下命令进行安装（淘宝镜像安装）：

cnpm install -g cordova

查看版本号：

C:\Users\MahoneAlex>cordova -version
6.3.1

JDK

安装JDK

登录：http://www.oracle.com/technetwork/java/javase/downloads/index.html 进行JDK的下载

下载好后进行安装，路径按照默认的就可以

配置环境变量

• 在系统变量中加入键JAVA_HOME，值JDK安装路径
• Path中加入%JAVA_HOME%\bin
• 添加之后打开CMD运行java -version查看当前JDK版本信息如下：

C:\Users\MahoneAlex>java -version
java version "1.8.0_131"
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)

C:\Users\MahoneAlex>javac -version
javac 1.8.0_131

Android SDK

安装Android SDK

登录 http://tools.android-studio.org/index.php/adt-bundle-plugin （国内百度云盘镜像）并下载相应位数的ADT插件并解压

配置SDK

打开ADT，点击Android SDK Manager

然后进入如下界面：

然后点击Tools下的Options…选项

从之前网址上的镜像地址，配置到这里来：

这样我们下载SDK的时候，速度就会提升很多！

然后我们需要下载需要的SDK，并安装，如下图所示：

---

QuickStart

创建Ionic项目

打开Node.js command prompt

cd到想要创建项目的目录中

Your environment has been set up for using Node.js 8.9.3 (x64) and npm.
C:\Users\MahoneAlex>E:
E:\>cd E:\Java\IonicPro
E:\Java\IonicPro>

运行如下命令进行项目的构建

E:\Java\IonicPro>ionic start MogonIonic

选择一个模板，这里选择tabs模板，回车

这里由于网速的关系，失败了

换了VPN，成功，这里出现提示：你想把你的新应用与Cordova结合起来针对本地的IOS和Android吗，选择y

下载node_modules

然后出现提示是否安装免费的Ionic Pro SDK并连接你的应用程序，选择y

最后链接Git，输入Git邮箱，密码以及项目名称，创建成功

在下载node_modules的时候，可能由于网速的原因，会报错，这里可以在项目创建完成之后，用以下命令下载：

cnpm install

项目创建完成后，会得到如下文件夹：

引入到VSCode，会看到如下目录结构：

启动服务并在浏览器中运行

首先打开Node.js command prompt，然后进入到项目的目录下

Your environment has been set up for using Node.js 8.9.3 (x64) and npm.
C:\Users\MahoneAlex>E:
E:\>cd E:\Java\IonicPro\MogonIonic
E:\Java\IonicPro\MogonIonic>

运行如下命令，启动Ionic项目

E:\Java\IonicPro\MogonIonic>ionic serve

出现上述画面则启动成功

打开浏览器，地址栏输入 http://localhost:8100/

---

Ionic Pro - View

​ 开发Ionic项目的时候，如果给远程客户展示项目时，可以通过Ionic Pro - View来进行展示，同时在开发过程中，如果没有真机调试，也没有虚拟机，可以选择Ionic Pro - View来进行项目的调试

首先，登陆Ionic Pro - View官网：https://ionicframework.com/pro/view

网页版类似于GitHub、GitLab等代码同步工具，需要有自己的账户，如果没有，可以点击右上角的Sign up进行注册，如果有账户的话，直接Log in就可以了，进入主页如下图所示：

如果没有项目在Ionic Pro - View时，会显示此页面，点击Create a New App来创建一个App

输入一个Appde名字，然后点击Create app

这样我们的一个App就创建好了，此时需要将本地项目上传到Ionic Probably - View中，在此之前，需要进行SSH密钥的配置，点击项目名称下方的settings按钮，并选择git选项，如下图所示：

这时需要添加yigeSSH密钥，点击add a valid SSH key进入到如下页面

同时，我们要确保本机已经安装Git，然后在任意目录下， 右键鼠标，选中 Git Bash here，然后输入如下命令：

cd ~/.ssh/

进入到系统的.ssh目录，如果没有这个目录，则可以通过如下命令创建一个目录：

mkdir ~/.ssh

然后进入到此目录后，配置全局的Name和Email：

git config --global user.name "名字"
git config --global user.email "邮箱"

输入如下命令创建一个SSH密钥对（公钥与私钥）：

ssh-keygen -t rsa -C "邮箱"

​ 一路回车后，创建完成，在此目录下会生成两个文件：id_rsa（私钥）与id_rsa.pub（公钥），用记事本打开公钥，将里面的内容全部复制，然后回到之前的页面中：

然后输入一个名字，将公钥粘贴到下方，并点击Add Key完成SSH配置，接下来返回App页面：

​ 通过Connect your app下方的步骤，将项目上传或链接到此App中，当上传完成后，需要在手机上下载此软件，然后登陆，或者直接输入上方页面中App名字旁边的ID进行App的查看，如果选用后者进行查看，需要将Channels设为共有

选择任意一个点击，然后按照如下图所示设置：

（注意：创建完本地项目后，需要进入到项目目录中，输入ionic git remote这条命令，来配置远程库，否则会出错）

---

Ionic常见问题

接口接收json并在html中显示

在移动端开发的过程中，数据来源一般都通过接口来获取，如下图所示：

这里我们定义了一个post的请求方式，并在login方法里面去调用这个方法，返回一个Observable类型

此图中的dataList[0]返回的是Json数据，如下：

得到数据之后，将输入存入storage中，后续获取的时候，如下：

页面中获取，?代表有值就显示，没有就不显示：

注：如果页面接受的为Json对象，或者是实体类对象，则必须要加?，否则会出现如下错误：

---

Ionic Test

Step 1

Download ionic-unit-testing-example from Github.

Step 2

CD to your Ionic Project and open the package.json.

And then run the cmd:

npm install --save-dev angular2-template-loader html-loader jasmine jasmine-spec-reporter karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter karma-sourcemap-loader karma-webpack karma-coverage-istanbul-reporter istanbul-instrumenter-loader null-loader protractor ts-loader ts-node @types/jasmine @types/node

npm install list:

npm install --save-dev
angular2-template-loader
html-loader
jasmine
jasmine-spec-reporter
karma
karma-chrome-launcher
karma-jasmine
karma-jasmine-html-reporter
karma-sourcemap-loader
karma-webpack
karma-coverage-istanbul-reporter
istanbul-instrumenter-loader
null-loader
protractor
ts-loader
ts-node
@types/jasmine @types/node

Step 3

​ There are a couple of scripts that need to be added to the package.json to make running tests from the command-line possible. Open the package.json file and add the following scripts to your "scripts" node:

"test":"karma start ./test-config/karma.conf.js",
"test-ci":"karma start ./test-config/karma.conf.js --single-run",
"test-coverage":"karma start ./test-config/karma.conf.js --coverage",
"e2e":"npm run e2e-update && npm run e2e-test",
"e2e-test":"protractor ./test-config/protractor.conf.js",
"e2e-update":"webdriver-manager update --standalone false --gecko false"

​ With the addition of these items, you will be able to enter the npm run test command to begin unit testing, or npm run e2e to begin end-to-end testing.

Step 4

Add the Configuration Files.

Copy the test-config folder from the ionic-unit-testing-example .This folder has the following files:

karma-test-shim.js
karma-config.js
mocks-ionic.js
protractor.conf.js
webpack.test.js

Adding End-to-end Testing.

Copy the e2e folder from the ionic-unit-testing-example .This folder has the following files:

app.e2e-spec.ts
app.po.ts
tsconfig.json

Step 5

Adding Your First Unit Test.

​ Open the src/app/ folder in your project and create a new file named app.component.spec.ts. This will be our unit test file for the MyApp class which is inside the app.component file. Inside this new file, copy and paste the following code:

import { async, TestBed } from '@angular/core/testing';
import { IonicModule, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { MyApp } from './app.component';
import {
  PlatformMock,
  StatusBarMock,
  SplashScreenMock
} from '../../test-config/mocks-ionic';

describe('MyApp Component', () => {
  let fixture;
  let component;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyApp],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      providers: [
        { provide: StatusBar, useClass: StatusBarMock },
        { provide: SplashScreen, useClass: SplashScreenMock },
        { provide: Platform, useClass: PlatformMock }
      ]
    })
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyApp);
    component = fixture.componentInstance;
  });

  it('should be created', () => {
    expect(component instanceof MyApp).toBe(true);
  });

  it('should have two pages', () => {
    expect(component.pages.length).toBe(2);
  });

});

Step 6

Reviewing the E2E Test.

Earlier, we added the e2e folder to our project which contained our first E2E test. Let’s take a look at it.

import { Page } from './app.po';

describe('App', () => {
  let page: Page;

  beforeEach(() => {
    page = new Page();
  });

  describe('default screen', () => {
    beforeEach(() => {
      page.navigateTo('/');
    });

    it('should have a title saying Page One', () => {
      page.getTitle().then(title => {
        expect(title).toEqual('Page One');
      });
    });
  })
});

​ Again, we see the typical testing methods of describe, beforeEach and it. One this of note here is the use of a second describe method. This is used to help with organizing your tests.

​ Inside your E2E tests, you will be using Promises. A lot. Good tests will chain Promises. You can find out more about how to structure your tests by reviewing the Protractor Tutorial.

Step 7

And then run the cmd:

npm run test

---