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

一：前面简单的配置(会列举浏览器，ios，Android三大平台的环境搭建)

1.安装 nvm

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

2、安装node / npm

$ nvm install 10

3、切换到项目根目录，使用node 10版本

$ nvm use 10
Now using node v10.16.0 (npm v6.9.0)

4、全局安装 ionic CLI

$ npm install -g @ionic/cli native-run cordova-res
+ [email protected]
+ @ionic/[email protected]
+ [email protected]

二：运行到浏览器上

1.在项目根目录运行以下命令提取 ionic-native-custom-wrapper

$ python packages/ionic-native-custom-wrapper/tools/buildCustomWrappers.py

2.Build project

a. Move to project folder 
b. Run `python ../tools/prepare.py`
c. Run `ionic cordova platform add browser`
d. Run `python ../tools/link.py`
e. Run `ionic cordova build  browser`  or   `ionic cordova run browser `

三：编译到ios平台

1.安装swiftformat和swift-protobuf

启动终端Terminal：

$ cd ~
$ brew install swiftformat
$ brew install swift-protobuf

不安装这个，可能会出现以下错误：

97429E386007AE07578595802380E94D.png

2.处理~/.bash_profile文件

a.如果没有，则先创建.bash_profile

$  touch .bash_profile

b.编辑.bash_profile文件

vim ~/.bash_profile

在里面添加：

export PATH="/usr/local/opt/[email protected]/bin:$PATH"

不添加这个，可能会出现以下错误：

E155BD38-4636-4992-832C-2353C01D7163.png

c.更新刚配置的环境变量（更新之后最好关闭控制台再打开，以免未生效导致很多问题）

输入 source .bash_profile

3.在项目根目录运行以下命令提取 ionic-native-custom-wrapper

$ python packages/ionic-native-custom-wrapper/tools/buildCustomWrappers.py
$ python packages/angular-builders/tools/build.py

然后cd到项目目录

1. Move to project folder 
2. Run `python ../tools/prepare.py`
3. Run `ionic cordova platform add ios`
4. Run `python ../tools/link.py`
5. $ cd  XXX/XXX/platforms/ios(第3步添加ios平台的位置)
6. $ pod install
7. Run `ionic cordova build ios --prod'

最后一步，用Xcode打开项目直接运行就好啦

屏幕快照 2020-04-22 上午10.38.59.png

四：编译到Android手机上

1.在项目根目录运行以下命令提取 ionic-native-custom-wrapper

$ python packages/ionic-native-custom-wrapper/tools/buildCustomWrappers.py

2.处理 ~/.bash_profile文件

在里面添加：

export ANDROID_SDK_ROOT=/Users/songyue/Library/Android/sdk
export ANDROID_HOME=/Users/songyue/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME}/emulator
export PATH=${PATH}:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools
export PATH=$PATH:/Users/songyue/.gradle/wrapper/dists/gradle-4.10.3-all/81msde2dx9p4vji0mjgtvxkcb/gradle-4.10.3/bin

3.Build project

a. Move to project folder 
b. Run `python ../tools/prepare.py`
c. Run `ionic cordova platform add android`
d. Run `python ../tools/link.py`
e. Run `ionic cordova build  android` or `ionic cordova run android `

好了，大功告成。最终~/.bash_profile文件的内容应是如下：

屏幕快照 2020-04-22 上午10.31.07.png