什么是Hybird App

Hybrid App又叫混合应用，是一种介于Native App、Web App之间的App，它虽然看上去是一个Native App，但只是一个UI WebView，里面访问的是一个Web App。Hybrid App实质是伪造一个浏览器的apk/ipa原生程序，并运行了一个Web APP。Hybrid App兼具Native App良好用户交互体验的优势和Web App跨平台开发的优势。它可以使web开发人员可以几乎零成本的转型成移动应用开发者，并且相同的代码只需针对不同平台进行编译就能实现在多平台的分发，而相较于Web App，开发者可以通过包装好的接口，调用大部分常用的系统API。

Ionic3简介

Ionic是一个开源的手机端App混合开发框架，依赖于Angular,Sass,Cordova，它使得开发出高质量的原生应用和渐进增强的网站变得更加简单。

Ionic是基于Angular1.x开发的，Ionic2基于Angular2进行开发的，最新的Ionic3基于Angular4.x进行开发。

与ReactNative的对比

  • Ionic3

    • 一次开发，随处运行（一套代码，两个平台运行）
    • html+css+angularjs开发方式
    • 不添加crosswalk插件 体验较差，添加 crosswalk 插件以后 体验较好，但是app打包偏大。程序运行内存占用较大
    • 纯web思想，开发速度快，文档全面，开发者多
    • 但不适合游戏类型app，对于比较耗性能的地方无法利用native的思维实现优势互补，如高体验的交互，动画等。

  • ReactNative

    • 一次学习，随处开发（也就是ios和android开发两套代码）
    • js+css开发方式
    • 接近原生性能,js 到 native 需要经过两层桥接，性能与原生差别不大
    • 开发要求较高，需要懂native code，学习曲线高
    • 发展还不成熟，目前很多ui组件只有ios的实现，android的需要自己实现

  • 建议

    • 在小项目不太注重性能的应用中应用ionic，这样不会有太大的负担。
    • 在特别考虑性能的应用中使用ReactNative。

Cordova简介

Cordova是PhoneGap贡献给Apache后的开源项目，是从 PhoneGap中抽离出的核心代码，是驱动PhoneGap的核心引擎。

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。
Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os,Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

Android开发环境安装

  • Git安装

下载并安装Githttps://git-scm.com/downloads

  • JDK安装

安装JDKhttp://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html并配置好环境变量。
注意不能安装jdk1.9，否则运行和打包的时候会报错

  • Android SDK安装

下载并安装Android Studiohttps://developer.android.com/studio/index.html
配置环境变量ANDROID_HOME为你的Android SDK的目录，将tools, tools/bin, platform-tools添加到PATH中

  • Nodejs安装

下载最新稳定版nodejs并安装https://nodejs.org/en/download/

  • Ionic和Cordova安装

npm install -g cordova ionic

基本命令使用

ionic start myNewProject  #创建一个新的项目
ionic serve # 在浏览器中运行调试
ionic cordova build android --prod --release #打包成apk

语法高亮插件安装

打开sublimeText3的包安装管理器，安装typescript, sass这两个插件，可以高亮显示typescript, sass的语法。

目录结构

  • node_modules ：node 各类依赖包
  • resources ：android/ios 资源（更换图标和启动动画）
  • src：开发工作目录，页面、样式、脚本和图片都放在这个目录下
  • www：静态文件
  • platforms：生成 android 或者 ios 安装包路径（platforms\android\build\outputs\apk：apk所在位置）
  • plugins：插件文件夹，里面放置各种 cordova 安装的插件
  • config.xml: 打包成 app 的配置文件
  • package.json: 配置项目的元数据和管理项目所需要的依赖
  • tsconfig.json: TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选
  • tslint.json：格式化和校验 typescript
  • src/app：应用根目录
  • src/assets：资源目录（静态文件（图片，js 框架）
  • src/pages：页面文件，放置编写的页面文件，包括：html，scss，ts。
  • src/theme：主题文件，里面有一个 scss 文件，设置主题信息。

参考资料