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

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

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

 

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

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

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

5.index.js是index.html的js文件。之前在这里遇到一个坑，在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
”的弹出框。

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申明一样。

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