osx环境下
安装nodejs,0.10.26版本的就好,太新或者太旧都不好用
node -v和npm -v查看安装是否成功
安装ionic和cordova
npm install -g cordova ionic
ionic实际上就是基于cordova和angularjs的一个框架
ionic start [project name]创建一个项目
首先看index.html,是主页面,里面引入了angularjs, cordova等js支持,此外还有app.js, controllers.js, services.js三个文件,这三个文件构建了app的应用逻辑,app是主程序,包含一些设置和启动脚本,services是数据支持部分,也就是model部分,用于提供数据的增删改查操作,controllers用于控制,包含业务逻辑控制代码
ionic platform add ios
ionic build ios
然后进文件目录,project name/platform/ios用xcode打开就好了
如果装了ios-sim,可以继续
ionic run ios 或者
ionic emulate android等
修改www中的文件,主要是css,img,js,templates
其中css控制样式
js里面app.js控制页面跳转
.state(‘tab.friends’, {
url: ‘/friends’,
views: {
‘tab-friends’: {
templateUrl: ‘templates/tab-friends.html’,
controller: ‘FriendsCtrl’
}
}
})
控制的是tab页面,friends页的形式,在tab-friends这个view里面显示templates名字叫tab-friends的html,然后控制器叫FriendsCtrl
controller.js控制逻辑
$scope是全局变量,定义一些数据和方法
另外还有$ionicTabsDelegate等,注意传递参数
controller里面可以console.log输出,或者直接alert
services.js提供数据等
页面都在templates里面,用到的一些模板的语法,有一些特定的框架和元素,以ion-开头的
注意js中的.controller, .factory等,多个之间没有任何符号,直接换行即可
最后有分号
直接用ionic serve,开启浏览器调试模式,所见即所得
ionic popover的css, 4388行,opacity为什么是0呢?
leancloud,集成云存储,通信等,移动开发不再需要后台,json数据交互
ionic连接leancloud也非常简单,申请好账号,得到appid和appkey之后
在index.html中引入两个js
<script src=”https://cdn1.lncld.net/static/js/av-mini-0.6.1.js”></script>
<script src=”https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js”></script>
然后在app.js中
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
//里面,添加AV初始化即可
//leancloud
AV.initialize(‘vGdoW****beS1D’, ‘5LubapRJ*****lcQw8zx2’);
});
})