一个基于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 未完签名。