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文件夹
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)