zoukankan      html  css  js  c++  java
  • Android H5混合开发(2):自定义Cordova插件

    前言

    Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能。
    但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了。


    这个“自定义”不是指由Android端任意定义,一般需要各端(H5、原生)讨论来决定,如:插件的名称、action等。

    模拟需求

    插件信息:
          插件名称:MyPlugin
          插件id: com.test.MyPlugin
          插件版本:1.0.0
          action: aaa
    
    插件交互方式:当h5调用时,原生toast弹出h5传入的数据,并返回响应的结果。
    

    创建插件

    使用上一篇文章的目录(Android H5混合开发(1):构建Cordova 项目)

    1. 我们在TestCordova目录下,创建存放自定义插件的目录Plugins
      新建Plugins目录.png
    2. 打开终端,输入命令,进入Plugins目录
      进入Plugins目录.png
    3. 创建插件
      按照约定的插件参数,开始创建插件
    plugman create --name MyPlugin --plugin_id com.test.MyPlugin --plugin_version 1.0.0
    

    创建成功,如下图所示:
    插件目录结构.png
    /src/目前是空目录
    4. 查看www/MyPlugin.js文件
    MyPlugin.js.png
    'MyPlugin'指的是Android端实现该插件的.java类名
    'coolMethod'指的是action的名称,此处我们需要修改成约定的 ‘aaa’
    修改后,如下图:
    MyPlugin.js.png
    5. 查看配置文件plugin.xml
    plugin.xml.png
    id="com.test.MyPlugin" 是指插件id;
    version="1.0.0" 是指插件版本;
    MyPlugin 是指插件名称;
    <js-module 标签指定公共JavaScript接口的路径;(即描述H5与原生的接口对应关系)
    <clobbers 标签指定了H5端调用插件时的对象,字符串可简化,此处我们改成“xyz”(真实项目中,此文本应根据约定,去定义,此处为了突出演示,所以定义成 xyz)
    plugin.xml.png
    6. 根据配置文件,生成java代码
    使用终端,输入命令,进入MyPlugin目录

    cd MyPlugin
    

    使用终端,输入命令,生成java代码

    plugman platform add --platform_name android
    

    终端命令.png

    创建的java代码.png

    查看默认的模板脚本(具体实现,后续介绍),如下图:
    脚本.png

    1. build 插件
      通过终端,输入命令,会创建package.json文件
    npm init
    

    根据需要,终端中填写package.json的相关属性。
    因为,此Demo只是演示,所以没有填写属性,全部直接点击了回车(即:默认值)。
    终端命令.png
    创建的package.json文件,如下图所示:
    插件目录.png
    package.json
    plugin.xml

    至此,插件创建完成。

    将插件导入Cordova工程的安卓项目中

    1.通过终端,执行命令,进入cordova工程目录/TestPlugin/myapp/

    cd cordova项目目录路径 
    

    2.通过终端,执行命令,将插件加入到各平台的项目中

    cordova plugin add 插件的本地路径
    

    执行命令,结果报错了.png

    问题原因:gradle版本权限的问题
    解决办法:设置gradle权限
    终端命令:chmod +x platforms/android/gradlew
    gradle问题解决,重新执行命令,插件成功加入各平台项目中.png

    1. 使用AndroidStuido打开安卓项目,目录:/myapp/platforms/android/
      项目目录.png
      经过了cordova plugin add命令,我们可以看到,在/assets/www下面,已经包含了我们导入的插件信息。
      3.1 cordova_plugins.js 的module.exports(数组) 描述了插件列表的信息(用到的插件都需要在module.exports数组里面配置):
      插件描述文件.png
      3.2 Myplugin.js描述了单个插件的具体信息(代码没什么变化,其实就是直接拷贝过来的):
      Myplugin.js.png
      3.3 /res/xml/config.xml 也导入了该插件的相关信息:
      config.xml.png
      3.4 /src/下自动导入了Java模板代码MyPlugin.java:
      MyPlugin.java.png
    2. 安卓端插件功能开发
      其实,也就是在MyPlugin.java类中按照需求实现相关的功能:
    import android.widget.Toast;
    
    import org.apache.cordova.CordovaPlugin;
    import org.apache.cordova.CallbackContext;
    
    import org.json.JSONArray;
    import org.json.JSONException;
    
    public class MyPlugin extends CordovaPlugin {
    
        @Override
        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
            if (action.equals("aaa")) {
                String message = args.getString(0);
                this.aaa(message, callbackContext);
                return true;
            }
            return false;
        }
    
        private void aaa(String message, CallbackContext callbackContext) {
            //弹框
            Toast.makeText(cordova.getActivity(),"aaa",Toast.LENGTH_LONG).show();
            //h5端传给我什么参数,此处再传回去
            if (message != null && message.length() > 0) {
                callbackContext.success(message);
            } else {
                callbackContext.error("Expected one non-empty string argument.");
            }
        }
    }
    

    5.H5端开发测试页面,然后同步(或拷贝)给安卓项目使用
    直白点,就是H5端做好开发,将WWW目录的内容同步给我们的/assets/www/即可。但是,此处只是个简单的Demo,所以没必要麻烦H5端了,咱们自己写代码实现吧:
    5.1首先打开assets/www/index.html文件,删掉多余的注释
    index.html.png
    5.2注释掉标签中的第一个
    5.3中加入一个button,设置点击事件
    5.4编写javascript,h5端调用我们自定义插件的方式:xyz.aaa(...)


    index.html完整代码:

    <!DOCTYPE html>
    <html>
        <head>
            <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
            --><meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <title>Hello World</title>
        </head>
        <body>
            <div class="app">
                <h1>Apache Cordova</h1>
                <div id="deviceready" class="blink">
                    <p class="event listening">Connecting to Device</p>
                    <p class="event received">Device is Ready</p>
                </div>
                <br><br><br>
                <button onclick="test()">aaa click</button><br><br><br>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script >
    
        function test(){
            xyz.aaa("AAA",function(msg){
                alert('原生返回了:'+msg);
            },function(e){
                alert(e);
            })
        }
    </script>
        </body>
    </html>
    
    
    1. 连上手机,运行androidstudio,点击【aaa click】按钮,如下图:
      运行结果.jpg

    总结

    本篇文章,主要演示了cordova插件的自定义过程和插件的使用,比较基础,没有涉及过多复杂的事情,如果有不明白的地方,建议去官网多查查资料。
    https://cordova.apache.org/docs/en/latest/
    需要使用Cordova童鞋,最好先跟着例子多练习几遍,熟能生巧。
    后续会介绍更多的Cordova使用技巧。
    本次Demo的源码下载地址:https://pan.baidu.com/s/1YmMw2zO7goF7MDViB1wZ2Q


    Android H5混合开发(1):构建Cordova 项目
    https://www.cnblogs.com/qixingchao/p/11654454.html

    Android H5混合开发(2):自定义Cordova插件
    https://www.cnblogs.com/qixingchao/p/11652418.html

    Android H5混合开发(3):原生Android项目里嵌入Cordova
    https://www.cnblogs.com/qixingchao/p/11652424.html

    Android H5混合开发(4):构建Cordova Jar包
    https://www.cnblogs.com/qixingchao/p/11652431.html

    Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova
    https://www.cnblogs.com/qixingchao/p/11652438.html

  • 相关阅读:
    IE6浏览器无法打开QQ邮箱
    vue 项目中 点击回车键 自动登录
    从后台拿数据来排序
    webpack 学习文档 自己留着用
    vue父子之间的传参问题
    vue中引入mint-ui的步骤 + mintui快速上手
    vue页面刷新
    调试兼容性该注意的的点
    垂直居中的几种方式 + css文本框文字溢出显示省略号
    elementui 鼠标悬停出现下拉列表
  • 原文地址:https://www.cnblogs.com/qixingchao/p/11652418.html
Copyright © 2011-2022 走看看