学习ionic和cordova

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’);

  });

})

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注