【Ionic实战】一个和AngularJS的跨平台(iOS,Android) APP框架

关于

---

使用HTML5和CSS来开发手机应用，一直是广大前端开发者的理想，并且已经有不少解决方案了。例如

• PhoneGap（用javascript来调用设备原生API）
• JQuery Mobile（UI库）
• Titanium（混合方式）
• AppCan（国产的开发工具）

Ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

资源 案例展示 实例

快速开始

---

安装环境

首先应该安装好 node.js (略)，然后安装cordova、ionic等

sudo npm install -g cordova ionic ios-sim

创建不同类型的项目

目前可以用blank，tabs，sidemenu三种

ionic start myApp tabs

常用插件

cordova plugin add com.ionic.keyboard && cordova plugin add org.apache.cordova.console && cordova plugin add org.apache.cordova.device && cordova plugin add org.apache.cordova.device-motion && cordova plugin add org.apache.cordova.file && cordova plugin add org.apache.cordova.file-transfer && cordova plugin add org.apache.cordova.geolocation && cordova plugin add org.apache.cordova.inappbrowser && cordova plugin add org.apache.cordova.network-information && cordova plugin add org.apache.cordova.splashscreen && cordova plugin add org.apache.cordova.camera && cordova plugin add com.google.cordova.admob

测试运行

cd myApp
ionic platform add ios
ionic build ios
ionic emulate ios #会打开ios的模拟器
ionic run andoird #真机测试，需要先platform add andoird和build android
ionic serve #也可以先在浏览器里看效果，如果chrome安装了livereload插件，可以实现代码编辑时界面即时变化

直接编辑IOS或Android工程

可以直接用xcode或其他IDE来编辑 /platforms/xxxx/ 下的工程，但要注意的是，应该以项目根目录下的 /www/ 文件为主，而不要编辑/platforms/ios/www/ 里的文件。运行下面的命令会自动用 /www/ 覆盖 /platforms/ios/www 里的文件

cordova prepare ios

www文件夹结构与文件分析

开发项目

发布应用在生成之前，去掉不需要的插件

cordova plugin rm org.apache.cordova.console 

发布到android 未完签名。