一个基于ionic框架和AngularJS的跨平台(iOS,Android) APP

jopen 4年前

关于


使用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 未完签名。

项目主页:http://www.open-open.com/lib/view/home/1416898439483