前言

木有错，我开始了混合 APP 开发的折腾之路~~~，本文主要是介绍项目的创建与真机调试的过程

简介

Ionic

Ionic 是一款基于 Web 技术（HTML，CSS 和 JavaScript）构建高性能，高质量移动应用的开源框架。

Capacitor

Capacitor 跨平台的应用程序编译器，可以将你的 web 项目编译成 iOS, Android, Electron。

Get Started

# 安装 Ionic CLI
npm install -g @ionic/cli
# 创建新项目
ionic start

依次输入项目名、开发语言、默认模板、是否安装 capacitor

当然也可以使用参数创建项目

ionic start myApp tabs --type=angular

myApp是项目的名称，tabs是程序模板，angular是开发语言。每种类型，都有三个可用的模板：

• tabs：基于标签的布局
• sidemenu：基于菜单的布局
• blank：一个只有一页的空项目

ionic start --list

运行项目，默认地址http://localhost:8100，可以在浏览器中实时查看调试效果

cd myApp
ionic serve

项目开发这里不做过多叙述，直接进入到 ios 真机运行调试。

首先确认你已经安装了Xcode，如果没有的话直接在Apple Store里下载，再或者可以到苹果开发者平台里下对应版本 Xcode 下载地址。

安装完Xcode后，构建项目并添加 ios 平台。

# 构建项目
ionic build

# 使用capacitor 添加ios平台
ionic cap add ios

我在添加 ios 平台的时候提醒没有安装 CocoaPods

那就安装一下

sudo gem install cocoapods

如果平台添加成功，项目根目录里会生成一个ios文件夹。

在Xcode里打开项目

ionic capacitor run ios -l --external
ionic cap open ios

选择设备型号运行即可在模拟器上调试

接下来，我们在真机上调试一下。

• 菜单栏选择Xcode → Preferences (快捷键 command + ,) 在Accounts选项卡添加自己的Apple ID

• 选择调试项目里的TARGETS，选择General选项卡修改Bundle identifier
• 选择Signing & Capability选项卡修改Team选项为你刚才添加的Apple ID
• 将手机通过数据线连接到电脑
• 将设备选择为你的手机，运行如果报错则打开手机选择设置-通用-描述文件与设备管理，选择信任开发者 APP

好啦，这时候就可以正常的在XCode中进行真机调试了

结尾的 tips

如果创建项目的时候没有选择安装 capacitor，自行手动安装一下

sudo npm install --save @capacitor/core @capacitor/cli