您的位置：首页 > 其它

cordova ,ionic 简单使用指南

2015-02-03 12:43 260 查看

demo代码链接：http://download.csdn.net/detail/sundaylover/8419289

1.编译、添加codova library

把编译好的cordovalib.jar 拷贝到android 项目libs文件夹下，cordova源码可直接

从官网下载下后载入eclipse编译，或者直接使用编译好的jar

2.添加ionic框架

拷贝ionic 资源到assets/www 文件夹下

3.配置引用cordova

在res里面加入xml文件夹，下边放入config.xml文件，文件内容为cordova配置项目

<content src="ionic cascade.html" /> 指明载入的首页

<feature />这个指定用户自定义plugin

eg:

<feature name="DevTransPlugin">

<param name="android-package" value="com.ghl.airpos.DevTransPlugin" />

</feature>

4.继承CordovaActivity

android 主窗体类需继承 CordovaActivity

在其onCreate 方法里面载入cordova主页资源：

super.loadUrl(Config.getStartUrl());

5.继承实现cordova plugin

cordova 为页面与原生交互提供了单向plugin调度通道，

方向是js==>原始代码

plugin的实现也需要3个步奏

1.java接口继承：CordovaPlugin ，用以处理页面调用命令

2.js 实现 plugin 页面调度接口

a.编写js plugin对象

b.通过cordova plugin调度通道方法 cordova.exec（）实现调度

eg.cordova.exec(function succ(){},function fail(){}, 'DevTransPlugin', 'run_action', ['audio_start']);

Parameters: 1,2, callback function. 3, plugin name,必须与配置文件中一致 4.plugin action name 5. action parameters,it 's array object.

3.配置文件中指明 plugin 对象

<feature name="DevTransPlugin">

<param name="android-package" value="com.ghl.airpos.DevTransPlugin" />

</feature>

ionic简单说明

ionic是新一代(html5)技术框架，为手机设计。是目前与cordova搭配最好的技术框架之一。

详细请参考：http://ionicframework.com/

简单的使用步奏：

1.声明angular模块，初始化ionic eg: angular.module('ionicApp', ['ionic']) param1:app name。 param2:指明ionic框架名，程序默认。

2.继承实现angular.controller接口，添加对应页面的controller和事件处理逻辑

3.基于mvc设计，可以直接通过$scope访问页面对象,该对象可以作为参数传入contoller 回调函数

4.在页面部分，声明ionic 作用域比如demo中：

<body ng-controller="MyCtrl"> ,一个页面只能有一个controller。

5.ionic 控件类：

ion-header-bar

ion-list

等，详细见demo page.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航