怎样在Windows下使用ionic打包与开发IOS程序

怎样在Windows下使用ionic打包与开发IOS程序,第1张

1、安装VMware和Mac OS

参考网上教程

2、ionic开发ios程序

3、安装Xcode

为什么要安装Xcode呢?

ionic开发Android程序都不需要安装eclipse等IDE,只要一个能写SSS,JS

,HTML的IDE就行(Hbuilder,WebStrom,Sublime Text), 开发完成之后不就执行个ionic platform

add android,ionic build android,然后就能生成一个.apk文件,给手机上一安装O了。

ionic开发ios程序就得安装Xcode

IDE,这是因为蛋疼的ios程序无法直接使用命令生成,使用命令只能生成.project文件,然后再使用Xcode

IDE将.project文件转成.ipa文件,更让人蛋疼的是这个ipa文件居然也不能被直接安装到爱疯上,只能先上传到APP

Store,人家审核通过之后,我们再从APP

Store上下载。(看到这你可能快疯了,但是没法啊,谁让人家NB呢。好了废话少说了,乖乖安装Xcode吧)

4、安装ionic开发环境

(这个和在windows上安装android开发环境类似)

5、安装Nodejs

百度下载,傻瓜式安装,注意:你现在是Mac本,所以需要下载Nodejs for mac的,别下错了

6、安装cordova,ionic

sudo npm install -g cordova

sudo npm install -g ionic

或者合成一句统一安装

sudo npm install -g cordova ionic

7、创建项目

ionic start firstIonicProjectForIos [tabs][blank][sidememu]

8、浏览器中运行项目(调试项目)

cd firstIonicProjectForIosionic serve(自动在afai浏览器中打开)

9、模拟器中运行项目

因为apple开发的证书限制我们在没有申请购买apple账号的情况下,使用虚拟机来部署我们的应用,在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的,执行命令:

sudo npm install -g ios-sim

然后执行

ionic platform add ios (添加ios平台)ionic build ios

开始编译项目,编译完成之后用Xcode打开开发目录下platform->ios->myIonic.xcodeproj的项目文件,Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机,虚拟机打开后会自动运行你应用。

当然你也可以使用命令:

ionic emulate ios(在ios模拟器中打开)/ionic run ios(我的报错了)

PS: 为什么不用run ios 命令直接启动虚拟机呢,因为我的环境下执行run会报错,虚拟机会打开但是无法运行程序,找了半天解决解决方案没有结果,索性直接用Xcode了,效果笑歼是一样的

10、打包项目

能使用Ionic来开发app的很禅胡可能对Ios和android的app打包发布流程不是很熟悉,我这里简单说明下:

ionic build android命令执行完成之后会在项目目录/platforms/android/build/outputs/apk目录下面生成.apk文件。

但是ionic build ios命令执行完成之后不会生成.ipa文件,只会在项目目录/platform/os目录下生成.xcodeproj文件,这个文件需贺升拦要借助Xcode才能将其打包成.ipa文件。

因此接下来的任务就成了使用Xcode打包.xcodeproj成为.ipa的事情了。

在Windows下使用ionic打包与开发IOS程序

ionic开发Android程序都不需要安装eclipse等IDE,只要一个能写SSS,JS

,HTML的IDE就行(Hbuilder,WebStrom,Sublime Text), 开发完成之后不就执行个ionic platform

add android,ionic build android,然后就能生成一个.apk文件,给手机上一安装O了。

安装ionic开发环境(这个和在windows上安装android开发环境类似)。

安装Nodejs,按照步骤下载安装即可。

安装cordova,ionic,sudo npm install -g cordova ,sudo npm install -g ionic 或者合成一句统一安装sudo npm install -g cordova ionic。

创建项目,cd firstIonicProjectForIosionic serve(自动在afai浏览器中打开)浏览器中运行项族尘目(调试项目)。

模拟器中运行项目

因为apple开发的证书限制我们在没有申请购买apple账号的情况下,使用虚拟机来部署我们的应用,在部署之前需要使用npm安装一个ios-sim插件用源穗冲来调用模拟器。

用Ionic来开发app的很可能对Ios和android的app打包。

开发iOS程序需要mac本,没的话就只能在虚拟机上安装一个MacOS。ionic开发ios程序就得安装Xcode IDE,这个ipa文件不能被直接安装到苹果上,只能先上传到APP Store,人家审核通过之后,我们再从雹歼APP Store上下载。

官方文档: 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。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12444463.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存