cordova结构简单介绍并实现简单demo

时间:2024-04-11 08:18:05

目前主要尝试加载本地的h5网页,以此来介绍cordova的结构,并实现简单的Demo。

1.创建好的android项目在platforms下面,点开之后有个android的工程,里面就是一个android studio的项目。直接导入android studio即可。

 cordova结构简单介绍并实现简单demo

2.Assets文件夹下面有一个WWW文件夹,里面全部放网页相关内容。本地h5页面可以全部放此文件夹里面。里面包含css、html、js等。Src文件夹为java代码。

cordova结构简单介绍并实现简单demo


3.MainActivity.java是app启动后的页面。这个和原生的android没有任何差别。此类是继承CordovaActivity,生命周期和activity没有差别,首先执行onCreate,直接使用loadUrl就可以加载本地网页。launchUrl是本地index.html的地址,在config.xml里面设置。此类也可以加载布局文件,使用加载网页的控件来显示网页。

cordova结构简单介绍并实现简单demo


4.index.html是我们需要显示的本地html,这里的html和js全部是前端页面的一套流程,只不过是用android手机加载出来。和在pc端的没有任何差异。其中的cordova.js是cordova框架的js,相当于我们在java程序中引用了其他的jar包。加载了此js,我们可以使用cordova的框架进行html页面和原生android之间的交互。Index.js则是html对应的js文件,我们在里面对一些html控件做操作。

cordova结构简单介绍并实现简单demo


	5.index.jsindex.htmljs文件。之前在这里遇到一个坑,在html里面写的js完全不起作用,找不出原因在哪里。后来把js全部放入index.js文件夹就可以了。在html里面写js放在pc端是没有问题的,放在android环境中就有问题,这个可能是pc端和android端环境中存在差异。在android环境中,可能是因为需要等设备deviceready之后才能调用js。此处原因暂时存疑,以后继续研究。加载index.js之后,程序会首先调用初始化方法,初始化的时候会去绑定事件监听:document.addEventListener('deviceready', this.onDeviceReady, false);“deviceready”属于系统标签,该事件是在 cordova 载入完成后发生的事件,它表示cordova 加载完成并准备访问。this.receivedEvent('deviceready')中的“deviceready”
<span style="" font-size:"="">
	经过上面的几个步骤,现在已经能在android手机上进行html页面单方面的交互了。点击html页面上的button,弹出一个“This is a test program

”的弹出框。

cordova结构简单介绍并实现简单demo



	6. Cordova 只是提供一个应用框架,要真正和手机平台实现交互,则是通过各种 plugin 来实现。CordovaPlugin是Cordova插件的父类,用户自定义的插件必须继承父类。此处事例的插件功能是点击html页面上的button,调用原生android里面的toast,弹出一个toast弹框。初步实现html页面和android原生页面之间的交互。前面js里面调用了一个addToCal的function,里面执行了cordova的一个方法,此方法是html和android原生之间进行交互的方式。此处需要注意的是MyPlugin类里面的execute方法,此处的action参数必须和html页面js里面的参数对应,插件名也必须一一对应。



7.自己的插件写好之后,需要在config.xml里面进行配置插件。在此文件中,需要添加feature的属性,name字段必须和定义的插件类名一致(我程序里面的插件类名为MyPlugin),下面的param name一样,都是“android-package”,后面的values是MyPlugin类所在的包名。和创建新的activity时,需要在AndroidMainfest.xml申明一样。

cordova结构简单介绍并实现简单demo

点击html页面的button标签之后,调用成功android原生的toast控件。这里实现了最基本的html和原生页面之间的交互。

cordova结构简单介绍并实现简单demo