Ionic Mac 平台开发实战

Ionic 是一个用来开发混合手机应用的Html5代码库,绑定了AngularJS和Saas.这个框架的目的是从Web的角度开发混合的手机应用,基于Cordova(Phonegap的核心)的编译平台,可以实现编译成各个平台的应用程序。Once write,Run everywhere.

Ionic整合了Cordova,AngularJS,一个CSS组件库和一个Javascript 的UI库,同时支持定制的android和IOS插件。

本人是在Mac 10.11.2 版本下进行开发的,需要安装的软件包括Node.js,Cordova,Ionic Android SDK和Xcode.

1 安装Node

  在https://nodejs.org/en/官网下载最新版的Node.js,在运行的过程中,需要用到Node.js的npm包管理器。

2 安装ionic和Cordova

  npm install -g cordova ionic

3 安装SDK

  安装Android SDK

   由于Google 在中国使用不了,所以可以从国内的镜像网站找到对应的android SDK,这里介绍的是中科院开源镜像协会的网站。http://mirrors.opencas.cn/android/ .下载android-sdk_r24.0.2-macosx.zip的SDK包,然后解压。

  我是放在了/Users/用户/Library/Android/sdk目录下面,然后设置好系统变量。

  进入控制行界面, 输入cd ~,进入主目录。

  创建.bash_profile文件,如果有的话就直接添加。

  输入export  PATH = ${PATH}:/Users/用户名/Library/sdk/android-sdk-macosx/tools

   然后保存,在控制台输入$PATH.

   如果配置成功,会出现例如下所示的提示:

       -bash: /usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/opt/X11/bin:/Users/dev/Library/Android/sdk/android-sdk-macosx/tools: No such file or directory

   android sdk下面的各个目录功能如下:

   docs:离线文档

   extras:Google和其它设备的驱动程序

   platform-tools:开发和调试工具

   tools:更多的测试和调试工具

   platforms:各个 Android SDK的安装目录

   sources:所安装SDK的源码

   然后开始配置Android SDK.

   在控制台输入 android sdk,出现 sdk的管理界面。这里我们要设置一个国内的镜像代理,东软的镜像: mirrors.neusoft.edu.cn 。

  在Android SDK Manager->Preferences中

  http proxy server 输入mirrors.neusoft.edu.cn ,端口是80,然后把Force https:// 勾上,然后在Tools->Manage Add-on Site,中的User Defined Sites 中,将以下网址一个一个输入:

 http://mirrors.neusoft.edu.cn/android/repository/addon-6.xml 
http://mirrors.neusoft.edu.cn/android/repository/addon.xml 
http://mirrors.neusoft.edu.cn/android/repository/extras/intel/addon.xml 
http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-tv/sys-img.xml 
http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-wear/sys-img.xml 
http://mirrors.neusoft.edu.cn/android/repository/sys-img/android/sys-img.xml 
http://mirrors.neusoft.edu.cn/android/repository/sys-img/google_apis/sys-img.xml 
http://mirrors.neusoft.edu.cn/android/repository/sys-img/x86/addon-x86.xml 
http://mirrors.neusoft.edu.cn/android/repository/addons_list-2.xml 

http://mirrors.neusoft.edu.cn/android/repository/repository-10.xml

然后勾选需要的Android API平台。这里介绍一个网址http://www.cnblogs.com/yjmyzz/p/4219829.html

专门设置android镜像代理。

将需要的平台建立之后,就可以建立一个Android模拟器。

输入 android avd,建立模拟器。输入模拟器的名称,设备(这里选nexus 5),目标平台(这里选API 22)及其它信息。启动模拟器,启动过程可能会比较长。还有一点需要注意,在ionic调试过程中,如果要调试Android平台,那么要先启动模拟器,不然会出现错误。

 安装xcode编辑器

  在app store上面直接找到xcode 编辑器进行安装,现在我需要的xcode版本是 6.x 以上。

所有的环境都安装完了之后,就可以开始项目的开发:

 首先创建一个程序

 ionic start myapp tabs/blank/sidemenu

 myapp是项目名称,tabs/blank/sidemenu是ionic内置的网站模版

 进入项目

 cd myapp

 ionic platform add ios //添加ios平台,android 平台改为android, 可在项目目录下输入 ionic platform看支持的平台

                                 // ionic platform list

 ionic build ios //编译ios

 ionic emulate ios //模拟运行

也可以现在浏览器下面先试看运行效果

 ionic serve

 选择运行的地址,然后可以直接在浏览器中进行live load(实时加载)开发。

  在运行过程中,可能出现类似的权限问题,可以直接添加sudo来运行,这是由于我们在安装npm包时用了sudo去安装导致的权限问题。

Error: EACCES, permission denied '/Users/dev/.config/configstore/update-notifier-cordova.json'

You don't have access to this file.


    at Object.fs.openSync (fs.js:427:18)

    at Object.fs.readFileSync (fs.js:284:15)

    at Object.create.all.get (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:34:26)

    at Object.Configstore (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:27:44)

    at new UpdateNotifier (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/index.js:34:17)

    at module.exports (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/index.js:123:23)

    at checkForUpdates (/usr/local/lib/node_modules/cordova/src/cli.js:64:20)

    at cli (/usr/local/lib/node_modules/cordova/src/cli.js:114:5)

    at Object.<anonymous> (/usr/local/lib/node_modules/cordova/bin/cordova:41:1)

    at Module._compile (module.js:456:26)




 


   


  

你可能感兴趣的:(Ionic Mac 平台开发实战)