Skip to main content

Ionic

# 安装
yarn global add ionic
# 确保 ionic 在路径下
export PATH="$(yarn global bin):$PATH"

# 创建一个基于 web 的 tab 切换 app
# -s 使用 SCSS
ionic start app-demo tabs
cd app-demo
ionic serve

# 查看可用的启动模板
ionic start -l

# 创建一个 cordova 应用
# --skip-link 不链接 ionic cloud 账号
# --skip-deps 不自动下载依赖
ionic start --cordova --skip-link --skip-deps -n '我的应用' myapp tabs

# 可以考虑将 ionic 作为开发依赖, 以避免和全局的版本冲突
# 这样也可以直接使用 yarn 执行 ionic 来生成内容
# 例如 yarn run -- ionic g page MyHome
yarn add --dev ionic

FAQ​

ISSUES​

添加自定义图标​

ion-icon 可以使用自定义的图标名字, 只需要添加响应的 css 即可.

/* 添加自定义图标 */
.ion-ios-MYICON,
.ion-ios-MYICON-outline,
.ion-md-MYICON {
  content: url(../../images/MYICON.png); /* 可以用图标, svg 或者 webfont */
  width: 24px;
  height: 32px;
  padding: 6px 4px 2px;
  margin: 5px;
  opacity: 0.9;
}

No provider for NavController​

  • #5543
  • #9581
  • 无法在 Service 中注入 NavController
  • 解决方法
    1. 通过 Events 进行中转
    2. 注入 App, 然后
get navCtrl(){
  return this.app.getRootNav()
}

添加页面​

# 生成一个页面
# v2.2.3
# 会生成一个 User 页面, 如果想要使用 UserPage 这样的名字, 需要手动进行重构
# 除了会生成一个页面, 也会生成一个模块 user.module, 应该在 app.module 中导入该模块
yarn run -- i g page activity-detail

修改 app.module.ts, 在 import 那里添加生成页面的 Module, 例如 ActivityDetailModule

默认生成的页面名字没有 Page 后缀, 例如上面的生成结果为 ActivityDetail, 如果要添加 Page 后缀, 可以在 activity-detail.ts, 选中类名然后进行重命名重构.

设置标题​

在进行 Web 端开发但不需要 NavBar 时, 网页的 Header 不会发生改变, 此时需要手动控制

class MyPage{
  constructor(private app: App) {
  }
  ionViewDidEnter() {
    // 当进入该页面时修改 title
    this.app.setTitle('我的页面');
  }
}

路由​

Ionic 使用的内置状态来控制路由, 而不是使用的基于 URL 的路由, 在 Ionic 中,使用 URL 来控制路由的叫做 DeepLinker, 但是由于 Web 的优先级对于开发团队来说相对较低, 因此支持上面有所欠缺.

IonicModule.forRoot(MyApp, null,{/* DeepLinkConfig */});

每个页面都可以对应一个路径上的名字, 其元数据可以使用 @IonicPage 来配置, 也可以再 DeepLinkConfig 进行统一配置. 建议在 DeepLinkConfig 配置以便于统一管理.

路由的跳转可以在 html 中添加 NavPush 或者 NavPop 指令控制, 或者通过直接注入 NavController 来控制.