52AB52ABP-Ionic 开发文档

Ionic官方文档

Ionic CLI Framework: Command-Line Interface to Develop Apps (ionicframework.com)

项目目录介绍

环境安装

• Ionic CLI

npm install -g @ionic/cli

项目启动

npm start

安卓配置

第一步，安装 Android Studio

从安卓网站下载Android Studio。更详细的安装说明可以在用户指南中找到。

第二步，安装Android SDK

安装android studio会提示安装sdk

第三步，配置命令行工具

Android SDK 附带了有用的命令行工具。必须先设置一些环境变量，然后才能使用它们。

真机调试

第一步，电脑和手机连接至同一个局域网（如WIFI）

第二步，手机打开开发者模式并打开USB调试

第三步，手机通过SUB连接电脑

第四步，查看电脑本机IP

​ 这里我演示的本机ip为192.168.1.105

第五步，配置跨域

在后端项目的appsettings.json中的CorsOrigins添加‘http://192.168.1.105:8100'。

第六步，配置API请求地址

在前端项目的appconfig.dev.json配置请求地址

第七步，还原前端包

第八步，还原cap

第九步，同步引用库

第十步，运行程序

• 注意命令后选择自己的手机型号和网络

运行命令后就可以通过手机进行真机调试了

安卓打包

第一步，配置正式API请求地址

第二步，运行npm run build

第三步，创建签名文件

第四步，打包

完成后去生yoyocmstemplate-ionic\android\app\build\outputs\apk\debug查看生成的apk

苹果开发

咱没钱买苹果，土豪请看官方文档iOS App Development Guide: Xcode Setup to Build and Run iOS Apps (ionicframework.com)

开发时注意的点

• 我们集成了(NSwag)[NSwag 和 ASP.NET Core 入门 | Microsoft Docs] ，在后端写好接口后，运行项目目录yoyocmstemplate-ionic\nswag下的refresh_proxy.bat可以自动生成代理类。
• Ionic在配置了路由的组件，要另外建立一个模块，这样可以提高APP性能。
• 学习一下Ionic CLI，如ionic g page xxx。
• APP图标和初始屏幕请参考离子团队/电容器资产：本地电容器图标/初始屏幕资源生成工具 (github.com)