ionic4混合开发 在mac笔记本上的iOS android环境搭建

这是我写的第一篇文章,算是笔记吧,主要也是官网上的内容,如果有人官网上没看很明白那么可以往下看看参考参考,有不对不理解的地方欢迎批评指正:

1、首先最基本的准备一台苹果笔记本吧,因为在mac以外的系统是不能做苹果app开发的,当然你可以在window上安装个虚拟机配上mac系统,我这么干过,可能是我电脑配置比较低,不过也有4核8线程16g内存了,还是啥的其它原因,总之很卡,很难受,最后狠下心买了苹果笔记本,以及苹果手机,手机不买也行,苹果笔记本安装个虚拟设备吧也行,不过想想反正都买了笔记本了,不差苹果手机了,谁知道到时虚拟设备又会出什么幺蛾子,总之前后花了2W多点吧,大出血了……唠嗑碜半天,见谅哈!

2、node环境安装,我是直接一条龙安装了,安装后我没有像在window 系统里面有配置node_globle和node_cache文件夹了,只是配了一个淘宝镜像了,或者也可以安装个cnpm,主要都是为了解决国外网站下载速度慢或者翻墙失败下载失败等问题吧

npm config set registry http://registry.npm.taobao.org/

安装ionic和cordova

npm install ionic -g;npm install codova -g

安装的路径在

/usr/local/lib/node_modules/npm/node_modules/glob/lib/node_modules/      如下图所示:

ionic4混合开发 在mac笔记本上的iOS android环境搭建_第1张图片

有件事情挺恼人的,就是安装完之后,输入ionic -v ;cordova -v的时候说是comman not found ,网上有人说有的人不会,有的人会,反正我是会了,我是这样解决的;

找到.bashrc文件,添加内容如下:


ionic4混合开发 在mac笔记本上的iOS android环境搭建_第2张图片

alias ng="/usr/local/lib/node_modules/npm/node_modules/glob/lib/node_modules/@angular/cli/bin/ng"

alias ionic="/usr/local/lib/node_modules/npm/node_modules/glob/lib/node_modules/ionic/bin/ionic"

alias cordova="/usr/local/lib/node_modules/npm/node_modules/glob/lib/node_modules/cordova/bin/cordova"

包括angular的脚手架也一样的解决方法;

3、好了,至此算是可以创建ionic4项目了

ionic start myApp tabs --type=angular 目前还是默认只支持angular吧,看官网说也在准备至此vue和react了,敬请期待了

4、运行ionic serve 能用浏览器打开运行的话,恭喜你终于完成了三分之一了;

5、先说ios的环境吧,首先安装Xcode,然后呢得有ios开发账号,去ios develop网站注册个账号,普通的账号还不行,得花99美元的账号才具备开发ios app的资格吧,具体的步骤我这边就不详细说了;

6、安卓的开发环境还是得安装jdk、gradle、android studio;

jdk直接下载一条龙安装,不用像window系统那样得配置环境变量;

gradle的话详细看https://gradle.org/install/#helpful-information

我是手动下载解压的,解压后在.bash_profile文件里添加如下图所示:

ionic4混合开发 在mac笔记本上的iOS android环境搭建_第3张图片

android studio下载完,sdk安装完,我都是默认路径,然后

(1) 启动终端Terminal

(2)进入当前用户的home目录

输入cd ~

(3) 创建.bash_profile  

输入touch .bash_profile

(4)编辑.bash_profile文件

    输入open .bash_profile自动打开文本编辑器

  在弹出的页面进行编辑

输入以下内容:

ionic4混合开发 在mac笔记本上的iOS android环境搭建_第4张图片

(5) 保存文件,关闭.bash_profile

(6)更新刚配置的环境变量

    输入source .bash_profile

7、检测以下gradle -v正常的有东西输出的话就配置成功了,有的人还是会command not found 就把终端关掉然后重新打开再试试看;

8、添加ios 和android 平台,根ionic3不太一样的是

ios输入:ionic cordova prepare ios

android输入:ionic cordova prepare android

9、平台安装完后,ios的是通过xcode打开项目下platforms/ios下面的 项目名.xcodeproj文件然后插上真机,识别后配置下


ionic4混合开发 在mac笔记本上的iOS android环境搭建_第5张图片

然后点击运行就可以安装在真机上了;

10、安卓的话用不到android studio直接ionic cordova run android就可以了;当然了这是基于cordova的,如果是基于capacitor的还是需要用到android studio的,具体后面的文章中会提到。


好了,最后配上一张图分别在ipone7plus和小米6手机上同时调试的效果图,哈哈哈,有没有很赞,这才是混合开发嘛,,,以上步骤都是我整体搭建完才写的,所以可能写的不是很清楚或者有遗落的有疑问的欢迎留言,有不对也欢迎批评指正,这是本人处女之作,希望能对看的人有点帮助!


你可能感兴趣的:(ionic4混合开发 在mac笔记本上的iOS android环境搭建)