开始
npm install -g @ionic/cli
ionic start myApp tabs --type react
脚手架
可以使用 ionic generate 命令来生成特性, 简写 ionic g
component
service
module
class
directive
guard
选择 react 作为框架是不能使用该命令
$ ionic g page daily [23:25:28]
[ERROR] Cannot perform generate for React projects.
Since you're using the React project type, this command won't work. The Ionic CLI doesn't know how to
generate framework components for React projects.
FAIL: 1
更多命令
_ _
(_) ___ _ __ (_) ___
| |/ _ \| '_ \| |/ __|
| | (_) | | | | | (__
|_|\___/|_| |_|_|\___| CLI 6.2.1
Usage:
$ ionic <command> [<args>] [--help] [--verbose] [--quiet] [--no-interactive] [--no-color] [--confirm] [options]
Global Commands:
completion ...................... (experimental) Enables tab-completion for Ionic CLI commands.
config <subcommand> ............. Manage CLI and project config values (subcommands: get, set, unset)
docs ............................ Open the Ionic documentation website
info ............................ Print project, system, and environment information
init ............................ (beta) Initialize existing projects with Ionic
login ........................... Log in to Ionic
logout .......................... Log out of Ionic
signup .......................... Create an Ionic account
ssh <subcommand> ................ Commands for configuring SSH keys (subcommands: add, delete, generate, list,
setup, use)
start ........................... Create a new project
Project Commands:
build ........................... Build web assets and prepare your app for any platform targets
capacitor <subcommand> .......... Capacitor functionality (subcommands: add, copy, open, run, sync, update)
(alias: cap)
cordova <subcommand> ............ Cordova functionality (subcommands: build, compile, emulate, platform,
plugin, prepare, requirements, resources, run) (alias: cdv)
deploy <subcommand> ............. (paid) Appflow Deploy functionality (subcommands: add, build)
doctor <subcommand> ............. Commands for checking the health of your Ionic project (subcommands: check,
list, treat)
enterprise <subcommand> ......... (paid) Manage Ionic Enterprise features (subcommands: register)
git <subcommand> ................ Commands relating to git (subcommands: remote)
integrations <subcommand> ....... Manage various integrations in your app (subcommands: disable, enable, list)
(aliases: i, integration)
link ............................ Connect local apps to Ionic
package <subcommand> ............ (paid) Appflow package functionality (subcommands: build)
repair .......................... Remove and recreate dependencies and generated files
serve ........................... Start a local dev server for app dev/testing (alias: s)
ssl <subcommand> ................ (experimental) Commands for managing SSL keys & certificates (subcommands:
generate)
通过serve命令运行项目
ionic serve
跨平台特性
1. 硬件API
在原生应用中， 通常通过调用API来与设备通信，例如打开摄像机，访问位置。 这些API在web环境是不会工作的， 因为没有Native bridge. Ionic有几个方法来处理这个问题。
Ionic Native
Ionic Native 拥有自己的内部逻辑来检测，是否是一个native环境，而不是跑出一个运行时错误。如果没有不是native环境而且没有可用的Cordova plugins。 App不会终止，而是会继续执行， 尽管没有native功能。
平台检测
在App的逻辑中， 在任意需要一个native API调用的时候， 推荐总是先检测native环境的状态。 例如：
this.platform.ready().then(() => {
// 'hybrid' detects both Cordova and Capacitor
if (this.platform.is('hybrid')) {
// make your native API calls
} else {
// fallback to browser APIs
}
});
这个代码在不确定目标环境是否可以访问native API的时候非常管用。
Browser Fallbacks
很多native API在浏览器中都不可用。这些APIs总是能够提升体验甚至赶上原生体验, 因此推荐研究他们. 多参考前两点，构建一个体验非常好的适配平台的APP是非常容易的。
2. Desktop
当计划将app部署到桌面时， 确保app在更大的设备上正确运行，无论是使用Electron还是作为一个响应式Web App, 都非常重要。
布局
很多人很少注意到应用程序的布局，但它会对体验和可用性产生巨大影响。考虑一下这个常见的UI模式：
<ion-content>
<ion-item>
<ion-label>Item 1</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 2</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 3</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 4</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 5</ion-label>
</ion-item>
</ion-content>
这将渲染5个项目，每个项目的宽度为100%。这在移动设备上看起来很不错，如下所示，但在桌面浏览器上查看这一点就不同了。由于宽屏宽度的原因，这些项会被拉伸以填满整个屏幕，从而使屏幕空间闲置。
为了改善这种体验，我们可以将项目包装到Grid组件中。视图可以很容易地重写为更大屏幕上可用的内容：
<ion-grid>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Item 1</ion-label>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Item 2</ion-label>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Item 3</ion-label>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Item 4</ion-label>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Item 5</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
通过将 items 包裹在 ion-grid 元素中， ionic grid system被添加到我们的布局中， 将每一个 item 包裹在一个 column中， 使得items在grid中沿同一行占据相同宽度。
我们可以通过将fixed属性添加到<ion grid>元素来进一步实现这一点。这将告诉grid具有基于屏幕大小的固定宽度。当items在grid上没有宽度的情况下重新开始拉伸时，这非常适合于较大的屏幕。
grid 还可以通过ion-col属性改变colums的大小，进一步自定义。
<ion-grid fixed>
<ion-row>
<ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
<ion-item>
<ion-label>Item 1</ion-label>
</ion-item>
</ion-col>
<ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
<ion-item>
<ion-label>Item 2</ion-label>
</ion-item>
</ion-col>
<ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
<ion-item>
<ion-label>Item 3</ion-label>
</ion-item>
</ion-col>
<ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
<ion-item>
<ion-label>Item 4</ion-label>
</ion-item>
</ion-col>
<ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3">
<ion-item>
<ion-label>Item 5</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
Storage
大多数app有相同的需求点， 需要存储一些数据在本地，不管是存储XHR请求获取的JSON，还是保存auth令牌，都有很多不同的存储方案可用。除此之外如果appp在native环境运行，可能创建一个完成的SQLite数据库来存储数据， 所有这些不同存储方案都有自己的优缺点。Ionic开发人员不应该担心这个。
Ionic Storage
在这个情况下， Ionic’s Storage library是一个在多环境下使用的完美候选方案。建立于良好的测试上的一个LocalStore库。 Ionic’s storeage class 提供了一个适用性强的方式来为当前运行时选择最佳的存储方案。
目前，这意味着，他通过 native SQLite，IndexedDB（如果有的话）， WebSql， Local storage 来运行。 通过处理这些， 他允许使用稳定的API对存储写入。
class MyClass {
constructor(public storage: Storage) {}
async setData(key, value) {
const res = await this.storage.set(key, value);
console.log(res);
}
async getData(key) {
const keyVal = await this.storage.get(key);
console.log('Key is', keyVal);
}
}
网友评论