不准备做原生开发，就一直研究各种混合开发的框架，各种对比之后确定ionic框架，主要有几点理由：
- 漂亮的界面（基本就是模仿ios的UI来开发的）
- 入门简单，基本上根据官方提示，很快就进入demo
- 集成cordova简单(好像cordova官方说ionic贡献不少)
- 基本iOS和Android没什么差别
- 基本UI控件齐全
- 社区支持很到位。
ionic， ，官方对他的定位是：HTML5前端混合框架（不是取代PhoneGap）。入门介绍可以直接参考官网，这里说一下，各种最佳实践。
工具
个人建议使用这个 HBuilder, ,功能绝对强过WebStorm，遗憾的是：妈的需要注册，而且密码居然是明文的，另外没有Linux发行版。但比较强大就忍了。
初始化
首先确定你的app大致框架，确定采用哪种模板，主要有blank、sidemenu、tabs三个模板
ionic start MyApp sidemenu # 我主要采用sidemenu来导航
修改您的项目信息，如app中文名、描述、作者等等
vi config.xml # 基本上一眼就能看出来哪些信息需要你重新改
修改iOS和Android可能在显示上不一致的地方，基本参考 ，我主要修改sidemenu title对齐问题，checkbox样式、tabs上下问题
vim www/js/app.js.config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) { $ionicConfigProvider.form.checkbox("circle"); $ionicConfigProvider.form.toggle("large"); $ionicConfigProvider.tabs.position("bottom"); $ionicConfigProvider.tabs.style("standard");
对齐问题：
浏览器测试
# 浏览器测试(默认iOS的样子)ionic serve # 浏览器测试(iOS和Android同时测试)ionic serve --lab# iOS/Android 环境配置# Android需要按照Android虚拟机，并创建4.2以上版本的模拟机# iOS需要Xcode环境ionic platform add ios/androidionic run ios/android
几点建议
- 先看看别人踩过的坑：
- iOS CORS跨域不行，没办法只能jsonp
- 尽量搞个Mac，提高工作效率
- iOS“无痕模式”不能写localstorage数据，这个只能提示用户不能使用
# 在app就绪的时候提示，www/js/app.js.run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } try { window.localStorage.isBrowser = ionic.Platform.platforms[0] === 'browser'; } catch (_) { alert("本地储存写入错误，请关闭“隐身模式”或“无痕浏览”。"); } });}) - iOS真机测试，尽量搞个开发者账号，实在不行淘宝一个“开发者证书”，这样可以真机测试
ionic build ios # 编译出xcode工程
- 根据《ionic action》一书说，如果ionic的某个组件在CSS和api中都有，请优先选用css
- 更改绑定IP
ionic address # 重新选择绑定IP
PS：
附上我的网站：的Android版下载地址，iOS由于没开发者账号不发布。
Android：
wap:
样子基本一模一样。
