ionic3移动应用开发全面指南（修订版）

需积分: 10 8 浏览量更新于2024-07-18 收藏 6.23MB PDF 举报

"Mobile App Development with Ionic3, Revised Edition" 是一本由 Chris Griffith 所著的专业书籍，针对移动应用开发提供深入指南，特别聚焦于使用 Ionic 3、Angular 和 Cordova 进行跨平台应用程序的构建。本书旨在帮助开发者掌握最新版本的 Ionic 框架，该框架是用于快速开发高质量移动应用的流行工具集。书中内容覆盖了从入门到高级的主题，包括但不限于以下几个关键知识点： 1. **Ionic Framework简介**：介绍了 Ionic 的历史、架构以及它在移动应用开发中的地位，强调其基于 Angular 框架的优势，如 MVVM（Model-View-ViewModel）模式和组件化开发。 2. **安装与配置**：详细讲解如何安装和设置开发环境，包括 Node.js、Angular CLI、Cordova 等，确保读者能够顺利搭建起开发工具链。 3. **组件与UI设计**：展示了 Ionic 提供的一系列预定义 UI 组件，以及如何自定义和组合这些组件来创建美观且响应式的用户界面。 4. **服务与状态管理**：探讨如何使用 Angular 的 RxJS 库进行异步数据处理和状态管理，以及如何利用 Ionic 的 Storage API 存储和检索数据。 5. **插件与 Cordova集成**：介绍 Cordova 的作用，以及如何使用其提供的原生功能插件，将移动设备的硬件能力引入到 Ionic 应用中。 6. **性能优化与调试**：讨论如何提升应用性能，包括减少网络请求、优化图片加载、以及使用 Ionic 的 DevTools 进行调试。 7. **实战项目示例**：书中包含多个实际项目的开发步骤，通过实践帮助读者巩固所学知识，并学习如何将理论应用到实际开发流程中。 8. **版本更新与维护**：鉴于 Ionic 持续更新，书中还涵盖了一些关于 Ionic 3 向更高版本迁移的策略和注意事项。此修订版于2017年8月18日首次发布，提供了详细的错误修正列表，确保内容的准确性和时效性。对于那些希望进入或进一步提升移动应用开发技能的开发者来说，这是一本不可或缺的参考书籍，无论是初学者还是经验丰富的开发人员都能从中获益匪浅。

framework have been addressed. We will explore Angular in more detail in Chapter 4.

Cordova

The final element of the Ionic stack is Apache Cordova. Cordova was originally developed by Nitobi

Software in 2009 as an open-source solution to build native applications using web technologies via

an embedded WebView. In 2011, when Adobe Systems bought Nitobi — and along with it the

PhoneGap name — the project had to be renamed. Although the project was always open source, the

name was not. The open source version was eventually named Cordova (after the street where the

Nitobi offices were located). As Brian Leroux, one of the founders of PhoneGap, put it: “PhoneGap

is powered by Cordova. Think: Webkit to Safari.” Adobe continues to be a major contributor to

Cordova (along with several other major software companies) and it is licensed under the Apache

2.0 license.

Cordova provides the interface between the WebView and the device’s native layer. The library

provides a framework to bridge the gap between the two technology stacks (hence the original name

of PhoneGap). Much of the functionality is handled through a system of plug-in modules, which

allows the core library to be smaller. Beyond working on the two primary mobile platforms,

Cordova is used on a much wider range of mobile platforms, such as Windows Phone, Blackberry,

and FireOS. For a full list, see https://cordova.apache.org.

Beyond the library, Cordova as has its own command-line tool to assist in scaffolding, building, and

deploying your mobile applications. The Ionic CLI is built atop the Cordova CLI, and we will be

making use of it throughout this book.

Prerequisites for Ionic Application Development

In order to develop Ionic applications, you will need to have some additional technical skills that are

not covered in this book. While you do not need to be an expert in these skills, you will need a

general knowledge in order understand the concepts of Ionic development:

Understanding HTML, CSS, and JavaScript

Since Ionic applications are built using HTML, CSS, and JavaScript, you should have a

fundamental understanding of how these technologies combine to build web applications. We

will be using HTML to create the foundational structure of our applications. Our CSS will

provide the visual styling for our applications. Finally, JavaScript will provide the logic and

flow for the applications.

While we will work a modest amount with JavaScript, you will need to be familiar with its

syntax and concepts like variable scoping, asynchronous calls, and events.

Understanding Angular

Beyond understanding basic HTML, CSS, and JavaScript, you will need some understanding of

building web applications. In this book, we will be writing our applications with JavaScript,

specifically Angular 2. This means we will be developing in ES6 and writing the code in

TypeScript. For many, this is probably something that is new to you. We will cover the basics in

Chapter 4 to get you up and running.

Access to a mobile device

It goes without saying, you are going to need an actual mobile device to install and test your

applications on. In fact, you will probably need at least one device for each platform you plan to

develop for. While both the iOS and Android SDKs provide emulators/simulators that allow

Chapter 2. Setting Up Our Development

Environment

One of the initial challenges in developing with the Ionic Framework is the installation and setup of

the several tools that Ionic requires. In this chapter, we will walk you through the process of

installing all the necessary components and configurations for developing Ionic applications. The

installation process can be broken down into to two main parts: the base Ionic installation, and the

platform-specific SDK installations. The base installation will cover just the tools that you need to

generate your first Ionic application and preview it in your browser. If you want to dive right in and

start developing with Ionic, then this is all you will need to do. The second portion of the installation

is about setting up your native development environment(s). Even though we are building our apps

with web technologies, we will still need to have the native development environments installed on

our computers. This will give us access to the emulators, as well as the ability to deploy and test the

applications on our devices, and eventually submit them to the app stores.

Throughout this book, we will be using the command line to use the Ionic CLI. On macOS, we will

be using the Terminal application. We recommend adding either a shortcut on the desktop or adding it

to your Dock. If you are developing on a PC, I personally recommend using Git Bash (which can be

installed when we install Git) instead of the default command prompt. Its command syntax is the same

as in macOS, so following along with the code samples should be easier.

Installing the Ionic Framework

This section we will get the essential Ionic development environment set up, then generate our first

Ionic application and preview it in our browser. You may be wondering why we want to preview our

application in a browser. Remember, we are writing our application with web technologies, so it

makes sense to target a browser as our first “platform.” We can leverage browser debugging tools

and iterate through our development more quickly. My personal development cycle is to try to stay

away from testing on a mobile device until I need to.

There are four components we need to install; in Table 2-1, you can see the software we need to get

started along with their corresponding URLs.

Table 2-1. Ionic Framework

Tools

Tool URL

Node.js nodejs.org

Git git-scm.com

Ionic ionicframework.com

Apache Cordova cordova.apache.org

Installing Node.js

The foundation for Ionic is built atop Node.js (often referred to simply as Node). Node is a platform

that enables you to run JavaScript outside the browser. This has enabled developers to create

applications and solutions that are written in JavaScript and can be run almost anywhere. Both the

Ionic and Cordova CLIs are written using Node. Because of this requirement, we need this

framework installed first.

To install Node, go to Node website and download the installer for your development platform. If

you already have Node 6.X installed, you can skip this step. You will want to use the 6.X version of

Node. If you have an additional need to use a later version of Node, you might want to look at Node

Version Manager to allow you to easily switch between node versions.

Once Node has been installed, open the Terminal and enter node -v. This command tells Node to

report back the currently installed version:

$ node -v

$ v6.11.0

If you encounter an issue with the installation, review the documentation.

You should also make sure that npm — a package manager for node modules is up to date (note: npm

actually does not stand for “node package manager”). When you install Node.js this is automatically

done for you. But if you want to check which version of npm you installed:

$ npm -v

$ 3.10.10

If you need to update your installation of npm, the command is:

$ npm install npm -g

With Node and npm successfully installed, we will now install Git.

Installing Git

While you are free to choose any version control solution (Perforce, SourceSafe, or Git), the Ionic

CLI leverages Git for the management of templates. In addition, I have found that for Windows users,

using Git Bash makes it easier to follow along with the examples in this book.

Go to http://git-scm.com, and click the Download button. Go ahead and open the package file and

follow the default installation.

Once the installation is complete, launch the Terminal window and verify it.

In Terminal, type git --version and press Enter:

$ git --version

$ git version 2.8.4 (Apple Git-73)

With Git now installed on our system, we can install the Apache Cordova CLI.

Installing the Apache Cordova CLI

Although we can install both Cordova and Ionic at the same time, I recommend installing each one

individually in case there is an issue during the installation process.

The installation of Cordova CLI uses the Node package manager (npm) to perform the installation. To

install it, open either your Terminal window or Git Bash, and enter the following command:

$ npm install -g cordova

Depending on your internet connection, this can take a while. For macOS users, you may encounter an

issue with permissions during the installation. There are two options: rerun the npm command, but

preface it with the sudo command. This will allow the node modules to run as the root user.

Alternatively, you can configure your system to solve this permission problem:

$ cordova -v

$ 7.0.1

With these tools in place, we can finally install the Ionic CLI on to our system.

Installing Ionic CLI

Just like the installation of the Cordova CLI, the Ionic CLI is also installed via npm. In your Terminal

window, enter the following command:

$ npm install -g ionic

This install will also take some time to complete. Once the Ionic CLI has completed its installation,

we will again check it by issuing the ionic –v command in our terminal:

$ ionic -v

$ 3.4.0

Now we have our base installation in place for Ionic development. However, we eventually will

want to test our applications either in a device emulator or on an actual device. We will take a look

at the installation of these tools shortly. But first, let’s set up a sample app and see how to preview it

in our browser.

Starting a New Ionic Project

The Ionic CLI provides an easy command to enable you to set up an Ionic project: ionic start.

This CLI command will generate a basic Ionic application in the active directory. The Ionic

Framework can scaffold this project via a collection of starter templates. These can come from a

named template, a GitHub repo, a Codepen, or even a local directory. The named templates are

blank, sidemenu, and tabs. We will explore those later in this book. For now, run the following

command to create an Ionic project:

$ ionic start testApp

Since we did not define a starter template, the Ionic CLI will now present a list of starter templates

that we can pick from. Select the tabs option, and press enter. The CLI will now begin the process of

downloading the template and configuring the various components. It may ask you if you wish to

create an Ionic.io account. For now, we can ignore this, but we will be exploring the Ionic services

later in this book. Once the process is completed, we need to change the working directory to the

testApp directory that the CLI generated:

$ cd testApp

Let’s take a quick look at the elements that were installed in this directory.

剩余267页未读，继续阅读

isun_ljw

粉丝: 0
资源: 11

ionic3移动应用开发全面指南（修订版）

Mobile App Development with Ionic 2

Build Mobile Apps with Ionic 2 and Firebase: Hybrid Mobile App Development

Building Mobile Apps with Ionic 2 final2.0 (附项目源码)

[ERROR] Invalid project type: ionic1 (project config: .\ionic.config.json).

代码实现一个莆田菜APP，包括注册登陆界面，进入后底部导航栏分别为：首页、购物车、更多。首页为莆田菜品选购，界面可滑动，包括图片、名称、价格、配料和添加数量按钮。购物车为选购菜品、数量、总价

@ionic-native/in-app-browser怎么使用

手机app框架怎么制作

比较常见的编写手机app的编程工具

ionic app上传到app store

ionic-vue打包apk

最新资源