Ionic Mac 环境配置

最新推荐文章于 2020-03-11 16:53:41 发布

weixin_33730836

最新推荐文章于 2020-03-11 16:53:41 发布

阅读量104

点赞数

原文链接：https://my.oschina.net/anziguoer/blog/634450

版权

2019独角兽企业重金招聘Python工程师标准>>>

Ionic Mac 环境配置

· 安装cordova之前要安装nodejs 会包含npm安装（npm是个包管理器），到官网下载https://nodejs.org/en/download/ 是个pkg包下载之后双击下载包运行然后 step by step，osx下会自动添加环境变量，不用手动配置，默认安装到、usr/local下，可以更改目录

这一步就可以安装cordova了和ionic （这一步的主要问题是cordova安装包的镜像问题）

如果提示上面的就表示安装成功了。$cordova –v；ionic –v

创建Ionic项目 ionic start myIonic blank

其中myIonic为我们的项目名称
执行过程它会从github下载项目源码，请等待。。。
执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹，这个文件夹就是Ionic项目的所在目录了。
目录下有以下文件：

hooks //google之后这个目录应该是在编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中

plugins //cordova插件的目录，插件的安装下一节详述

scss //scss文件，发布时编译这个目录下的文件输出到www的css目录中

www //我们的开发目录，页面、样式、脚本和图片都放在这个目录下

--css

--img

--js

--lib

--index.html

bower.json //bower配置文件

config.xml //Ionic的配置文件 ⱃ可以配置app的id，名称、描述起始页和一起其他配置

gulpfile.js //gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等

ionic.project //Ionic的项目文件可以配置Ionic命令中livereload的监控文件

package.json //npm配置文件

启动测试服务器：ionic serve

部署到手机和cordova插件的使用

一个简单的Web应用我们已经开发完成了，接下来我们就要做一些部署到移动端之前的准备了。
Ionic支持两个平台ios、android，默认的Ionic项目并没有添加这两个平台，我们需要手动添加，cd到开发目录下执行命令：

ionic platform add android

ionic platform add ios

一般项目都需要两个平台同时部署，所以我们就添加两个，执行完毕之后执行命令查看你已经添加的平台列表：

ionic platform list

结果：

Installed platforms: android 4.0.0, ios 3.8.0

Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8

接下来的部署我们分开讲述：

http://cordova.apache.org/docs/en/5.1.1/guide/platforms/android/index.html

Install the Java Development Kit (JDK)

Install Java Development Kit (JDK) 7 or later.

When installing on Windows you also need to set JAVA_HOME Environment Variable according to JDK installation path (for example, C:\Program Files\Java\jdk1.7.0_75).

Install the Android SDK

Install the Android Stand-alone SDK Tools or Android Studio. Procceed with Android Studio if you plan developing new Cordova for Android plugins or using native tools to run and debug Android platform. Otherwise,Android Stand-alone SDK Tools are enough to build and deploy Android application.

Detailed installation instructions are available as part of installation links above.

For Cordova command-line tools to work, or the CLI that is based upon them, you need to include the SDK'stools and platform-tools directories in your PATH. On a Mac, you can use a text editor to create or modify the~/.bash_profile file, adding a line such as the following, depending on where the SDK installs:

    export PATH=${PATH}:/Development/android-sdk/platform-tools:/Development/android-sdk/tools

This line in ~/.bash_profile exposes these tools in newly opened terminal windows. If your terminal window is already open in OSX, or to avoid a logout/login on Linux, run this to make them available in the current terminal window:

    $ source ~/.bash_profile

Android
Android部署分真机和虚拟机，其实方法类似，在部署之前需要安装JDK、Android SDK到开发环境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到环境变量中去，并把Android SDK安装目录添加到Path中。
配置好之后打开PowerShell输入命令返回正确：

adb version

· 1

接下来就简单了，把手机连接到电脑，并开启usb调试模式，执行命令：

ionic run android

· 1

Ionic开始编译项目生成apk并远程安装到手机上后自动打开应用，是不是很简单？

IOS
ios部署需要一台mac电脑，在mac电脑上面根据本篇ionic的安装过程安装环境之后，添加ios平台到项目，因为apple开发的证书限制我们在没有申请购买apple账号的情况下，使用虚拟机来部署我们的应用，在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的，执行命令：

sudo npm install -g ios-sim

· 1

安装好之后，cd 到开发目录下执行：

sudo ionic build ios

4.调试

我们在前面已经说过，在开发前期我们一般会在web中调试，而Ionic为我们提供了非常方面的web调试环境，只需要执行ionic serve就可以实现lievereload，而在部署到移动端后也可以开启livereload的，我们只需要修改下我们run命令参数：

ionic run android --livereload -c -s

·       1

这是android的调试模式，无论在虚拟机上还是在手机上都可以实现livereload，ios则只需要把android修改为ios即可，不用每次开发完成编译再部署！-c是开启客户端日志输出，-s是开启服务器端日志输出。–livereload参数的的意义在于修改生成包中的起始页面地址，修改为远程服务器地址这样就可以做到修改即通知客户端刷新页面了。