本文记录的是如何配置Ionic的iOS开发环境,从安装Ionic, 构建简单的Ionic应用,安装配置 iOS 开发环境。到使用Capacitor构建 iOS App。
安装Ionic CLI
确保你已经安装了node, 执行以下命令安装Ionic CLI
你也可以使用yarn来进行安装,执行:
安装完成后,执行以下命令验证安装结果
如果安装正常,你应该可以看到系统显示版本号。
设置yarn为Ionic CLI的包管理工具(可选)
细节可以参考另一篇文章:如何设置Yarn作为Ionic CLI的包管理工具
可以简单的执行以下命令来完成:
1 2
| ionic config set -g npmClient yarn [OK] npmClient set to "yarn"!
|
安装 iOS 发布工具
该开发工具只是帮助开发者在 开发阶段 发布应用到模拟器和真实设备时使用的。顺序执行以下命令:
1
| yarn global add ios-deploy
|
建立示例应用
1
| ionic start todo-ionic-app blank
|
安装完成以后,进入项目目录,运行程序,验证项目构建成功
1 2
| cd todo-ionic-app ionic serve
|
如果安装正常,系统将显示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| > ng run app:serve --host=localhost --port=8100 [INFO] Waiting for connectivity with ng...
[INFO] Development server running! Local: http://localhost:8100 Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
[ng] ℹ 「wdm」: wait until bundle finished: / [ng] Date: 2019-06-04T13:32:30.608Z [ng] Hash: 335a1389e4700cdf8bd5 [ng] Time: 20357ms [ng] chunk {common} common.js, common.js.map (common) 20.2 kB [rendered] [ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [initial] [rendered] [ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 4.92 kB [rendered] [ng] chunk {main} main.js, main.js.map (main) 31.8 kB [initial] [rendered] [ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered] [ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.79 kB [entry] [rendered] [ng] chunk {styles} styles.js, styles.js.map (styles) 87.9 kB [initial] [rendered] [ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.37 MB [initial] [rendered] [INFO] ... and 173 additional chunks [ng] ℹ 「wdm」: Compiled successfully.
|
并且会自动打开浏览器,显示应用的首页。
安装Capacitor
进入示例项目目录,然后执行命令安装capacitor执行
1 2
| cd todo-ionic-app yarn add @capacitor/core @capacitor/cli
|
如果你使用的是npm, 则可以执行
1
| npm install --save @capacitor/core @capacitor/cli
|
构建示例项目
构建示例项目,生成发布目录
成功构建后,你可以在项目里看到新建的www目录
添加对iOS的支持
用xcode打开项目
在项目根目录,执行
1
| ionic capacitor open ios
|
然后就可以用xcode对项目进行构建