Android与H5互调使用cordova的WebView，插件调用，插件编写
16lz
2021-01-24
本篇文章是对应cordova官网上的一篇实践内容。（在Android工程插入cordovaWebview的cordova官网介绍）原文可以在以下地址找到：
http://cordova.apache.org/docs/en/latest/guide/platforms/android/webview.html
这篇说明是按照原文根据自己的实践编写的，以更贴近咱们开发实践使用，文章内会包含在实践中遇到问题的详细说明。
写这篇博客主要是因为在实践中遇到了好多问题，顺便就把这些问题记录下来。
安装官方文档开始一步一步的执行：
第一步：你得保证有Android开发环境
包括sdk，jdk即JAVA_HOME和 ANDROID_HOME,也就是说你的有开发安卓所需要的环境，
因为本篇说明指的是大型包含h5的混合应用，所以你肯定还需要Android studio 来编辑原生代码。还有用到ant，因此也得安装ant
注意：此步骤可以跳过，直接到步骤三
从cordova.apache.org下载，我找了好久，终于在网页最下面找到。
在最下面：More Resources下面的Source Distribution里面。
具体下载地址为：https://dist.apache.org/repos/dist/release/cordova/platforms/
打开这个页面后，对于Android我们选择下载：“cordova-android-6.2.3.tgz”
下载完成后解压缩，然后打开命令行，切换到 /framework目录执行命令：ant jar ，用来生成Cordova.jar 生成的目录为：/framework/cordova-x.x.x.jar
实际我执行的时候提示如下：
然后发现：android 这个命令被取消了，不能使用了，导致编译错误，（我用的最新版本的android sdk tool）错误中提示用android studio来搞定编译
最后找到的俩条解决方案：
方案一：使用旧版本的sdk tool
下载了老版本的sdk tool，将就可以编译，生成cordova-6.2.3.jar：
旧版本的sdk tool 下载地址为：https://dl.google.com/android/android-sdk_r24.2-windows.zip
方案二：使用Android Studio 导入工程编译
cordova支持Gradle编译，因此还是建议用android studio来编译生成 jar(而不是降低android sdk tool 的版本)
使用Android Studio 打开目录为C:\project\package\framework下的工程（不是打开package目录的工程，而是子目录framework的工程）、
然后，Android Studio 就会下载各种依赖，然后编译为debug版本。选择右面的Gradle->build->assembleRelease来完成编译release版本。
生成的文件目录为：package\framework\build\outputs\aar\framework-release.aar
用解压缩软件打开.aar文件，里面会发现classes.jar文件而是，这个就是官方文档说的生成的jar文件
第三步：收集建立工程需要用到的cordova文件
思路：需要的文件列表如下：
cordova.js
cordova_plugins.js
xml/config.xml
cordova-6.2.3.jar（已获得）
以下为获取这些文件的过程。如果想直接使用请到以下地址直接下载我获取到的文件
用cordova命令来创建一个标准的cordova工程，然后添加Android 平台，编译。至此工程里面肯定包含了我们需要的文件
其实cordova命令添加Android平台后，就是有了一个Android工程，
注意：我们搭建的混合应用，不使用官方文档“implements CordovaInterface”的方式。
而是就像在命令行里生成的工程使用方法一样，通过“MainActivity extends CordovaActivity”+loadUrl（“www.xx.comn”）来实现
接下来就是使用命令做一个cordova工程，这也是个非常费劲的地方，因为需要，因此在博客里附上以上需要的文件，从而省略这个复杂麻烦的过程。
这里把整个过程讲一遍，是为了记录整个开发过程。（参考使用好了解整个开发过程）
一、执行步骤：
1，拥有可访问google的环境：因为要使用到npm下载cordova库并且创建工程。
使用淘宝的npm（cnpm）则不能正确完成整个流程（依赖下载不完全），已经趟过这个坑了。
//下载npm的地址为
https://nodejs.org/en
2.依次执行以下命令：
npm install -g cordova //安装cordova，注意这里会安装好多库
等整个库安装完成后执行以下命令：
（以下命令为了用命令创建一个android工程，对应官方文档为：http://cordova.apache.org/docs/en/latest/guide/cli/index.html）
1.使用cordova创建一个工程
cordova create hi com.robert.hi HowAreU
命令的执行结果是：Creating a new cordova project.
然后执行：cd hi
然后增加android平台执行以下命令：
cordova platform add android
使用以下命令可以看到我当前电脑的环境情况：
cordova build android
编译完成就获得了一个完整的cordova工程，里面包含Android工程（这个Android工程不能直接用Android Stduio打开）
二、收集我们使用Android Stuido新建cordova工程需要的文件：
分别是：
1.cordova-6.2.3.jar
在“cordova build android” 命令编译完成后，
在目录\platforms\android\CordovaLib\build\outputs\aar 可以找到：CordovaLib-debug.aar， 这个其实就是“cordova-6.2.3.jar”
这里说明一下，获取这个jar的几种方式：
1，用cordova命令新建工程，添加Android平台，编译，然后到，\platforms\android\CordovaLib\build\outputs\aar可以找到CordovaLib-debug.aar
2.使用官方源码：加入把faramework文件夹单独用Android Studio打开，编译（点击小锤子）（不是点执行）
或者使用右侧的Gradle命令（build/assembleDebug、build/assembleRelease）可以生成，CordovaLib-debug.aar 或CordovaLib-release.aar
3.使用源码，使用旧版本的sdk tool 按照官方文档，编译生成，cordova-6.2.3.jar
4.可以把CordovaLib加入到自己的工程中，作为一个库，随着项目编译。实际上还是会生成：CordovaLib-debug.aar （未测试）
注：CordovaLib-debug.aar 解压缩后还会得到classes.jar(classes.jar == cordova-6.2.3.jar)
2.cordova.js cordova_plugins.js
所在文件夹：\platforms\android\assets\www
建议把assets文件夹整体复制走作为新建工程备用
3.build.xml
所在文件夹：\platforms\android\res\xml\config.xml
1.导入cordova库文件
a.如果使用aar包，则导入Android Stuido 工程的方法为：
把CordovaLib-debug.aar放入工程的libs目录下：
在文件：project build.gradle
在文件：moudle build.gradle
b.如果使用jar，导入Android Studio的方法为：
把xxx.jar放入工程的libs目录下
然后，点击android Studio右侧的Gradle,然后点击同步按钮（配图），即可完成导入
2.导入xml\config.xml
把准备好的xml\config.xml放到android项目的res目录下，
并且打开config.xml文件进行修改：把id=“包名字改为自己工程的包名”，
其他的工程信息和开发者信息可以选择修改
注意不要删除文件内原有的内容。
对文件内原有的内容做一些解释：
以下是默认包含的白名单插件，主要作用是设定工程中h5页面也已访问的网络协议类型，
比如http协议，如果不写在白名单里面，则h5页面不能访问http协议的网址，因此这些代码要保留
把之前复制好的assets复制到现在工程的\app\src\main\目录下，即可完成。
assets目录包含以下内容：
/plugins #//放置自己所添加的插件文件的目录
cordova.js
cordova_plugins.js
其它和业务相关的文件（h5页面文件）
index.html
/js
/css
4.Activity调用index.html
Activity的代码如下（这个Activity可以是任意一个，只要app跳转到这个页面就会加载对应的H5页面）：
我这里设计在MainActivity里面点击按键跳转到H5View页面，
请在另一篇文章里阅读
http://cordova.apache.org/docs/en/latest/guide/platforms/android/webview.html
这篇说明是按照原文根据自己的实践编写的，以更贴近咱们开发实践使用，文章内会包含在实践中遇到问题的详细说明。
写这篇博客主要是因为在实践中遇到了好多问题，顺便就把这些问题记录下来。
安装官方文档开始一步一步的执行：
第一步：你得保证有Android开发环境
包括sdk，jdk即JAVA_HOME和 ANDROID_HOME,也就是说你的有开发安卓所需要的环境，
因为本篇说明指的是大型包含h5的混合应用，所以你肯定还需要Android studio 来编辑原生代码。还有用到ant，因此也得安装ant
并且配置ANT_HOME.
%ANT_HOME%\bin%JAVA_HOME%\bin%ANDROID_HOME%\tools%ANDROID_HOME%\platform-tools注意：此步骤可以跳过，直接到步骤三
从cordova.apache.org下载，我找了好久，终于在网页最下面找到。
在最下面：More Resources下面的Source Distribution里面。
具体下载地址为：https://dist.apache.org/repos/dist/release/cordova/platforms/
打开这个页面后，对于Android我们选择下载：“cordova-android-6.2.3.tgz”
下载完成后解压缩，然后打开命令行，切换到 /framework目录执行命令：ant jar ，用来生成Cordova.jar 生成的目录为：/framework/cordova-x.x.x.jar
实际我执行的时候提示如下：
C:\project\package>cd frameworkC:\project\package\framework>ant jarBuildfile: C:\project\package\framework\build.xmlBUILD FAILEDC:\project\package\framework\build.xml:42: You need to create the file 'local.properties' by running 'android update project -p .' here.Total time: 0 seconds然后发现：android 这个命令被取消了，不能使用了，导致编译错误，（我用的最新版本的android sdk tool）错误中提示用android studio来搞定编译
最后找到的俩条解决方案：
方案一：使用旧版本的sdk tool
下载了老版本的sdk tool，将就可以编译，生成cordova-6.2.3.jar：
旧版本的sdk tool 下载地址为：https://dl.google.com/android/android-sdk_r24.2-windows.zip
方案二：使用Android Studio 导入工程编译
cordova支持Gradle编译，因此还是建议用android studio来编译生成 jar(而不是降低android sdk tool 的版本)
使用Android Studio 打开目录为C:\project\package\framework下的工程（不是打开package目录的工程，而是子目录framework的工程）、
然后，Android Studio 就会下载各种依赖，然后编译为debug版本。选择右面的Gradle->build->assembleRelease来完成编译release版本。
生成的文件目录为：package\framework\build\outputs\aar\framework-release.aar
用解压缩软件打开.aar文件，里面会发现classes.jar文件而是，这个就是官方文档说的生成的jar文件
第三步：收集建立工程需要用到的cordova文件
思路：需要的文件列表如下：
cordova.js
cordova_plugins.js
xml/config.xml
cordova-6.2.3.jar（已获得）
以下为获取这些文件的过程。如果想直接使用请到以下地址直接下载我获取到的文件
这里附上下载地址
http://download.csdn.net/download/robert_cysy/9928818
用cordova命令来创建一个标准的cordova工程，然后添加Android 平台，编译。至此工程里面肯定包含了我们需要的文件
其实cordova命令添加Android平台后，就是有了一个Android工程，
注意：我们搭建的混合应用，不使用官方文档“implements CordovaInterface”的方式。
而是就像在命令行里生成的工程使用方法一样，通过“MainActivity extends CordovaActivity”+loadUrl（“www.xx.comn”）来实现
接下来就是使用命令做一个cordova工程，这也是个非常费劲的地方，因为需要，因此在博客里附上以上需要的文件，从而省略这个复杂麻烦的过程。
这里把整个过程讲一遍，是为了记录整个开发过程。（参考使用好了解整个开发过程）
一、执行步骤：
1，拥有可访问google的环境：因为要使用到npm下载cordova库并且创建工程。
使用淘宝的npm（cnpm）则不能正确完成整个流程（依赖下载不完全），已经趟过这个坑了。
//下载npm的地址为
https://nodejs.org/en
2.依次执行以下命令：
npm install -g cordova //安装cordova，注意这里会安装好多库
等整个库安装完成后执行以下命令：
（以下命令为了用命令创建一个android工程，对应官方文档为：http://cordova.apache.org/docs/en/latest/guide/cli/index.html）
1.使用cordova创建一个工程
cordova create hi com.robert.hi HowAreU
命令的执行结果是：Creating a new cordova project.
然后执行：cd hi
然后增加android平台执行以下命令：
cordova platform add android
使用以下命令可以看到我当前电脑的环境情况：
C:\Users\Robert\hi>cordova requirementsRequirements check results for android:Java JDK: installed 1.8.0Android SDK: installed trueAndroid target: installed android-26,android-25,android-24,android-23,Google Apis:Google Apis:23,android-22,android-21,Google Inc.:Google APIs:21,android-20,android-19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:19,android-18,android-17,Google Inc.:Google APIs:17,android-16,android-15,android-14,Google Inc.:Google APIs:14,android-13,android-12,android-11,android-10,Google Inc.:Google APIs:10,android-9,android-8,android-7,android-5Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-3.2\bin\gradlecordova build android
编译完成就获得了一个完整的cordova工程，里面包含Android工程（这个Android工程不能直接用Android Stduio打开）
二、收集我们使用Android Stuido新建cordova工程需要的文件：
分别是：
1.cordova-6.2.3.jar
在“cordova build android” 命令编译完成后，
在目录\platforms\android\CordovaLib\build\outputs\aar 可以找到：CordovaLib-debug.aar， 这个其实就是“cordova-6.2.3.jar”
这里说明一下，获取这个jar的几种方式：
1，用cordova命令新建工程，添加Android平台，编译，然后到，\platforms\android\CordovaLib\build\outputs\aar可以找到CordovaLib-debug.aar
2.使用官方源码：加入把faramework文件夹单独用Android Studio打开，编译（点击小锤子）（不是点执行）
或者使用右侧的Gradle命令（build/assembleDebug、build/assembleRelease）可以生成，CordovaLib-debug.aar 或CordovaLib-release.aar
3.使用源码，使用旧版本的sdk tool 按照官方文档，编译生成，cordova-6.2.3.jar
4.可以把CordovaLib加入到自己的工程中，作为一个库，随着项目编译。实际上还是会生成：CordovaLib-debug.aar （未测试）
注：CordovaLib-debug.aar 解压缩后还会得到classes.jar(classes.jar == cordova-6.2.3.jar)
2.cordova.js cordova_plugins.js
所在文件夹：\platforms\android\assets\www
建议把assets文件夹整体复制走作为新建工程备用
3.build.xml
所在文件夹：\platforms\android\res\xml\config.xml
把这三个部分的文件都放在一个文件夹备用；
这里附上下载地址
http://download.csdn.net/download/robert_cysy/9928818
1.导入cordova库文件
a.如果使用aar包，则导入Android Stuido 工程的方法为：
把CordovaLib-debug.aar放入工程的libs目录下：
在文件：project build.gradle
allprojects { repositories { jcenter() flatDir { dirs 'libs' } }}在文件：moudle build.gradle
compile(name: 'CordovaLib-debug', ext: 'aar')b.如果使用jar，导入Android Studio的方法为：
把xxx.jar放入工程的libs目录下
然后，点击android Studio右侧的Gradle,然后点击同步按钮（配图），即可完成导入
2.导入xml\config.xml
把准备好的xml\config.xml放到android项目的res目录下，
并且打开config.xml文件进行修改：把id=“包名字改为自己工程的包名”，
其他的工程信息和开发者信息可以选择修改
注意不要删除文件内原有的内容。
对文件内原有的内容做一些解释：
以下是默认包含的白名单插件，主要作用是设定工程中h5页面也已访问的网络协议类型，
比如http协议，如果不写在白名单里面，则h5页面不能访问http协议的网址，因此这些代码要保留
把之前复制好的assets复制到现在工程的\app\src\main\目录下，即可完成。
assets目录包含以下内容：
/plugins #//放置自己所添加的插件文件的目录
cordova.js
cordova_plugins.js
其它和业务相关的文件（h5页面文件）
index.html
/js
/css
4.Activity调用index.html
Activity的代码如下（这个Activity可以是任意一个，只要app跳转到这个页面就会加载对应的H5页面）：
我这里设计在MainActivity里面点击按键跳转到H5View页面，
import android.os.Bundle;import org.apache.cordova.CordovaActivity;public class H5View extends CordovaActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set by 第五步：工程的使用说明和几个关于cordova插件使用的概念：
1.在H5View这个Activity里面就会加载loadUrl（）里面的网址或者本地文件，也就是说在H5View这个页面就显示H5页面，
而我们可以配置其他Activity来显示原生页面，也可以做页面之间的切换，就像在原生应用开发一样。
2.这里说一下和cordova-plugin-inappbrowser的区别，这个插件的功能是在js代码里启动一个应用内的浏览器，
显示指定的网址的网页（看样子只能显示网络上的的网页）。而loadUrl（）可以加载放在Assets目录下面的h5页面和网络上的网页
2.h5跳转到原生Activity：使用自定义cordova插件，在插件的java代码里通过intent启动Activity
3.原生Activity跳转到h5：在原生Activity使用Intent启动H5View即可
4.h5给原生代码传递数据：在自定义的插件里插件js调用java方法的时候就可以添加数据以参数形式传递；
5.原生代码给h5传递数据：在自定义的插件里java方法收到js的调用后，返回数据的时候设置保持连接参数，以后java可以随时给js发送数据
示例代码
//send status later serviceCallbackContext = callbackContext;//保存java给js返回数据的context变量 PluginResult pluginResult = new PluginResult(PluginResult.Status.NO_RESULT); pluginResult.setKeepCallback(true);//设置保持回调通道 callbackContext.sendPluginResult(pluginResult); //先返回NO_RESULT，以后java代码随时返回数据请在另一篇文章里阅读
http://blog.csdn.net/robert_cysy/article/details/77073159
更多相关文章
- Android(安卓)数据操作（一） 自定义AttributeSet属性
- Android(安卓)APP 漏洞整理
- 安卓系统的启动流程
- Android代码的工程分为三个部分
- android 在线预览pdf文件（目前最全）
- Android(安卓)FFmpeg移植总攻略——获取视频帧数（亲测可用）
- android NDK学习篇4之two-libs——使用（单个动态库）来生成动态库
- Android7.0适配教程与心得
- 高通平台环境搭建，编译，系统引导流程分析