ionic6探索笔记——环境搭建及创建项目

官方文档： Installing Ionic - Ionic Documentation

1.删除旧版本ionic

npm uninstall -g ionic

2.安装新版本

npm install -g @ionic/cli

值得注意的是，ionic的资源包变为了ionic/cli

在cmd或终端进入合适的目录，然后运行命令：

ionic start 项目名称 tabs

然后选择项目类型（Angular、React、Vue），这里选择的是Angular，回车

大概意思是是否集成capacitor，这里暂时先选NO，等待安装node_modules

是否创建ionic账号，选择NO，项目创建完成，然后进入创建的项目目录下，输入命令启动服务：

ionic serve  

启动成功！

3-1-1 添加安卓平台

ionic capacitor add android

没有www文件。尝试运行一下ionic build，然后再次运行添加平台命令，项目中多了android文件夹

因为官方并没有提供直接打包的命令，需要借助android studio来打开安卓项目，在项目中运行命令：

npx cap open android

这样直接启动android studio并打开该安卓项目

对于android studio的安装和android_SDK以及安卓模拟器的配置可以自行了解学习一下，我这里是已经搭建好的安卓开发环境。

点击运行按钮，就可以在模拟器上运行该程序

每次对ionic项目做更改需要把这些更新同步到安卓项目中，需要运行命令：

ionic capacitor copy android

3-1-2 添加iOS平台

在项目目录下运行命令： 

ionic capacitor add ios

报错了，大概是因为cocoapos没有安装或者版本过低，尝试更新一下cocoapos

打开终端，输入sudo gem install cocoapods来升级CocoaPods；

如果遇到

ERROR: While executing gem ... (Gem::FilePermissionError)

You don't have write permissions for the /usr/bin directory.

这个错误的话就改用sudo gem install cocoapods -n /usr/local/bin命令即可。

接下来删除ios文件夹，重新添加ios平台，

根据提示，用xcode打开该ios项目

npx cap open ios

点击运行按钮，在iOS模拟器上查看效果

使用cordova添加平台和以前的ionic版本是一样的，首先尝试添加一下android平台:

ionic cordova platform add android

发现报错了，提示在capacitor的项目中不可以使用cordova，如果使用cordova需要禁用capacitor：

ionic integrations disable capacitor

禁用成功。

再次添加安卓平台，提示是否集成cordova，输入y

然后又又又报错了。

这是什么鬼，以前用cordova添加平台没有遇见过，我猜测可能是跟capacitor添加的android文件冲突，于是删除android文件夹再试一次。

果然添加成功！

再尝试一下cordova能不能打包成功:

ionic cordova build android

打包也成功了。

接着又尝试了一下用cordova添加和打包iOS，跟处理android平台的方式一样，先把ios文件夹删除，再进行添加和打包 *** 作，都成功了。

事实证明，新版的ionic版本既可以集成最新的capacitor，也兼容集成cordova。

由于Ionic更新了命令行工具，以后修改应用图标和添加启动画面就简单了，最新方法见最下方：

应用图标：

1.在整个项目所在文件夹下创建res文件夹，里边再分别创建两个文件夹android和ios。

2.针对Android平台：将我们的要替换的启动图标放如android文件夹下。可以分别起名为：mdpi.png(48*48),hdpi(72*72)、xhdpi(96*96)、xxhdpi(144*144) 和 xxxhdpiI(192*192)。

针对ios的，待补充。

3.在config.xml中添加

<platform name="android">

<icon src="res/android/ldpi.png" density="ldpi" />

<icon src="res/android/mdpi.png" density="mdpi" />

<icon src="res/android/hdpi.png" density="hdpi" />

<icon src="res/android/xhdpi.png" density="xhdpi" />

</platform>

其中src中的图片路径就为整个项目的相对路径。

我这里偷了个懒，只搞了一个最高像素密度的应用图标（192px*192px）进去，安卓会自动进行压缩。

这里顺便说一下如果要修改应用的名称，只要修改name标签里的内容即可。

这样在命令行中重新运行ionic run android，就能看到应用图标和名字已经被替换了。

启动画面：

将启动画面的图片拷贝到之前的android文件夹下，splash-land-hdpi.png（640*480）splash-land-ldpi.png（426 × 320）splash-land-mdpi.png（470 × 320）splash-land-xhdpi.png（960 × 720）splash-port-hdpi.png（480*640）splash-port-ldpi.png（320*426）splash-port-mdpi.png（320*470）splash-port-xhdpi.png（720*960）

（名称可随意，只要和config.xml对应上即可）。

在config.xml中添加

<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>

<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>

<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>

<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>

<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>

<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>

<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>

<preference name="SplashScreen" value="screen"/>

<preference name="SplashScreenDelay" value="10000" />

其中10000单位为毫秒，即10秒后隐藏启动画面。如果不写第三句，默认3秒隐藏。

如下图所示：

我这里没有那么多分辨率下的图片，就随便找了一个稍大分辨率的，density也没写。它会自动将该图片拷贝到drawable文件夹。

这时候再重新运行程序，即可看到启动画面。

用以上的方法，启动画面的显示时长是固定的，很明显不太友好。

未完持续...

以上方法已经可以使用Ionic命令行工具来自动生成了，步骤如下：

1.在项目的根目录下创建resources文件夹。

2.在文件夹中都放入icon.png（应用图标，最小192x192px，不带圆角），splash.png（启动屏幕，最小2208x2208px，中间区域1200x1200px）(可以是png、psd、ai)

3.在cmd中进入项目所在文件夹执行：

ionic resources

执行该命令后，会自动在resources文件夹下创建已添加的平台名称的文件夹，如：android，其中会自动将图片进行缩放、裁剪，生成不同分辨率的图片，并在config.xml中添加相应内容。

也可分开执行：

ionic resources --icon

ionic resources --splash

注意：执行以上命令时需在线！

一、先添加平台

ionic cordova platform add browser

二、打包

ionic cordova build browser

在项目中的platforms中的browser文件夹中就会有www文件夹

---