cordova ,ionic 简单使用指南

最新推荐文章于 2022-08-24 09:57:15 发布

sundaylover

最新推荐文章于 2022-08-24 09:57:15 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sundaylover/article/details/43448199

本文详细介绍了如何将Cordova与Ionic框架整合至Android项目中，包括编译Cordova库、添加Ionic资源、配置引用、继承CordovaActivity及实现cordova plugin的方法。此外，文章还对Ionic框架进行了简单说明，并提供了基于Angular的快速上手指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo代码链接：http://download.youkuaiyun.com/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.