Ionic入门

日期:2015-11-4 22:23 | 标签: Ionic | 阅读:723

Ionic是当今使用Web技术开发移动端应用最好的框架(至少我是这么认为的)。我也用过React Native(IOS),坑巨多,至少当前是的,作为企业级应用开发的话,我会先等一会。

Ionic技术形态

Ionic是一个CSS框架也是一个JS UI库,说到这,你可能马上就想到了Bootstrap,当然区别也很明显,术业有专攻嘛。值得一提的是Bootstrap基于JQuery,Ionic基于AngularJS,学习成本嘛,Ionic自然要高点。
Ionic使得你在浏览器上调试完成后,只需要简单的几个命令就可以生成Android或者IOS App,由于去掉了对市面占有率少的手机以及低版本手机的支持,性能和效果上要甩一般的Phonegap方案几条街。不过其内核还是cordova,这个没变。

安装

要开发Android或者IOS免不了配置开发环境,由于Ionic和Phonegap都是基于Cordova,你可以参考我的这篇文章Phonegap小试
要在移动设备上运行,最终需要编译成本地程序,Cordova提供了一组设备相关的API,通过这组API,移动应用能够使用JavaScript访问原生的设备功能,如摄像头、麦克风等。只需要根据需要的功能以插件的形式安装即可,只是有些API可能不支持跨平台,或者有版本限制,需要注意。

 // 安装cordova与 ionic命令行工具
 npm install -g cordova ionic
 // 初始化一个项目
 ionic start myApp tabs
 // 按平台编译->运行
 cd myApp
 ionic platform add ios
 ionic build ios
 ionic emulate ios

当然,你可以先在网页上进行调试

ionic serve --address 192.168.xxx.xxx

也可以基于wenire远程调试。

项目结构

---这里欠一张图---
以下内容,参考自(本人有删改):https://www.douban.com/group/topic/82615768/

  1. hooks
    Cordova安装时生成的文件夹,该文件夹有脚本可以定制Cordova命令,一般情况下,不对该文件夹中的文件进行更改。
  2. plugins
    用于放置Ionic扩展文件的文件夹。比如升级或者扩展Ionic的时候。为了安装这些扩展文件,你需要确保安装了Git。通常不对该文件夹进行改动。
  3. .bowerrc
    偶尔会用Bower安装一些组件,所以bowerrc文件产生了,通常不对该文件进行修改
  4. .gitignore
    用来指定git管理时忽略文件
  5. config.xml
    另外一个Cordova安装文档,通常也不需要修改。
  6. gulpfile.js
    控制着允许Ionic自动重载浏览器的自动操作。同时,它还负责其他事情,比如:处理文件。
  7. package.json
    它定义了这个项目所需要的各种模块,以及项目的配置信息,比如名称、版本、许可证等元数据 。 Node和Gulp工具可以依据文件中的项目需求和配置信息,去履行责任。一般不修改该文件。
  8. scss文件夹
    想要使用CSS的预处理语言SASS来修改应用程序的样式,那么你可以在scss文件夹下的相应文件覆盖Ionic的默认值。如果你熟悉SASS语言,你可以在相应scss文件添加SASS命令,或者更改目录结构,增加子文件夹。如果你想在项目中使用SASS去工作,你需要首先运行Ionic SASS 命令。
  9. www文件夹
    主工程目录,我们一般在这里编程。
    1. css
    2. img
    3. js文件夹,这个可以根据需要有所增改,比如说我的是这样的:
      • app.js
        入口文件
      • Controller.js
        控制器
      • services.js
        通用服务
      • directives
        指令,其实就是组件啦。
      • routes
        路由
      • config
        配置,这里放一些常量,如base url什么的。
    4. lib 用于集中存放项目需要用到的库文件和其他项目资源,比如AngularJS, CSS,SCSS相关等。创建的应用程序能够访问这些库文件和资源。其中,在这个文件夹下引用的AngularJS文件,不一定是最新版本的,一般情况下,不建议修改或更新这些文件。
    5. templates
      存放AngularJS模板页面
    6. index.html
      入口文件

可视化构建工具

链接(需要先注册):https://creator.ionic.io
当我构建的页面较多时,会很卡,不知道是怎么回事,此外,个人觉得自带样式还是有点丑。

插件平台

一般通用的功能或者调用硬件相关的功能那就不要重复造轮子了, 参考地址:
http://angular-js.in/ng-cordova/
此外就是在github上多逛逛吧。
实现复杂不通用的功能,就得自己开发插件了,在大公司一般有专门平台的开发人员负责,对我们来说,还是好好地看看插件开发教程吧,地址:
http://cordova.apache.org/docs/en/latest/

重要辅助方法

  1. ionic.extend(obj, {timeout: 15000});

报错

  1. java.util.zip.ZipException: error in opening zip file,直接下载解压失败的文件到对应目录,接下来的事情交给程序完成
  2. 不支持 大约2G 的 heap 大小,直接添加系统变量:_JAVA_OPTIONS = -Xmx512m,重启电脑可以解决问题。
  3. http://repo1.maven.org/maven2/com/google/guava/guava/18.0/guava-18.0.jar这个包死活下载不下来。后来只好在同事电脑上找到这个包放到相应位置。
  4. 提示没有通过 platform25 协议,实际上是我没有安装 sdk 版本(25),该操作主要是 cordova 的要求,运行 cordova requirements 可以看得到
  5. Source path does not exist: resources\android\icon\,检查config.xml,删掉对应记录。(成功)

总结

当你需要快准狠的做一个APP的话,当是首选,但是不可避免的会遇到性能问题以及交互问题,此外,如果有专业的复杂界面的话,还得亲自动手去实现咯。

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式