Cordova Android 自定义插件开发

最新推荐文章于 2022-08-26 14:25:26 发布

z184924

最新推荐文章于 2022-08-26 14:25:26 发布

阅读量306

点赞数 1

文章标签： cordova

本文链接：https://blog.csdn.net/z184924/article/details/79743119

版权

前言：

本文是自己在查看别人博客，及自己尝试所总结的方法，如果有不对的地方，还请多指教。

正文

1.首先构建cordova项目

cordova create TestCordova cn.zhangjingyao.TestCordova TestCordova

2.进入项目

cd TestCordova

3.导入Android平台环境

cordova platform add android

4.在另一目录中使用plugman创建插件

plugman create --name TestPlugin --plugin_id TestPlugin --plugin_version 1.0.0

5.进入插件目录

cd TestPlugin

6.为插件添加Android环境

plugman platform add --platform_name android

7.创建packagejson

plugman createpackagejson .

如果没有需要特别设置的，使用默认值即可（敲回车敲下来）

8.创建Android工程

9.创建Library

10.在Library中创建Activity

11.编写Activity及layout

TestActivity

注意：要继承自Activity

package cn.zhangjingyao.testpluginlibrary;

import android.app.Activity;
import android.os.Bundle;

public class TestActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
    }
}

activity_test.xml

<?xml version="1.0" encoding="utf-8"?>
<android.widget.RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.zhangjingyao.testpluginlibrary.TestActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="TextView" />
</android.widget.RelativeLayout>

12.build arr 文件

13.制作插件

插件目录结构

先将aar文件复制到src/android目录下

再在该目录创建gradle文件

repositories{
    jcenter()
    flatDir{
        dirs 'libs'
    }
}

dependencies {
    compile(name:'testPluginLibrary-debug', ext:'aar')
}

android {
    packagingOptions {
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/LICENSE'
    }
}

修改plugin.xml

<?xml version='1.0' encoding='utf-8'?>
<plugin id="TestPlugin" version="1.0.0" 
    xmlns="http://apache.org/cordova/ns/plugins/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <name>TestPlugin</name>
    <js-module name="TestPlugin" src="www/TestPlugin.js">
        <clobbers target="cordova.plugins.TestPlugin" />
    </js-module>
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="TestPlugin">
                <param name="android-package" value="TestPlugin.TestPlugin" />
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml"></config-file>
        <source-file src="src/android/TestPlugin.java" target-dir="src/TestPlugin/TestPlugin" />
        <!-- 添加Activity注册 -->
        <config-file target="AndroidManifest.xml" parent="/manifest/application">
            <activity android:name="cn.zhangjingyao.testpluginlibrary.TestActivity"/>
        </config-file>
        <!-- 添加权限 -->
        <config-file target="AndroidManifest.xml" parent="/manifest">
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
            <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
            <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
            <uses-permission android:name="android.permission.READ_PHONE_STATE" />
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.INTERNET" />
            <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
            <uses-permission android:name="android.permission.READ_LOGS" />
            <uses-permission android:name="android.permission.VIBRATE" />
            <uses-permission android:name="android.permission.WAKE_LOCK" />
            <uses-permission android:name="android.permission.WRITE_SETTINGS" />
        </config-file>
        <!-- 添加gradle文件引用和aar文件导入 -->
        <framework src="src/android/testPluginLibrary-debug.gradle" custom="true" type="gradleReference"/>
        <source-file src="src/android/testPluginLibrary-debug.aar" target-dir="libs" />
    </platform>
</plugin>

TestPlugin.java

package TestPlugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import cn.zhangjingyao.testpluginlibrary.TestActivity;
import android.content.Intent;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * This class echoes a string called from JavaScript.
 */
public class TestPlugin extends CordovaPlugin {
    public static int REQUEST_CODE=1;
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("coolMethod")) {
            Intent intent = new Intent(this.cordova.getActivity().getBaseContext(), TestActivity.class);
            // avoid calling other phonegap apps
            this.cordova.startActivityForResult(this, intent, REQUEST_CODE);

            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

其中以下两句为调用Activity

Intent intent = new Intent(this.cordova.getActivity().getBaseContext(), TestActivity.class);
this.cordova.startActivityForResult(this, intent, REQUEST_CODE);

14.Cordova 项目添加自定义插件

在Cordova工程目录下执行

cordova plugin add D:\AS-workspace\TestPlugin

新建test.html

修改index.html

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <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"><a href="test.html"> Device is Ready </a></p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

编写test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script>
        function test(){
            alert("test");
            cordova.plugins.TestPlugin.coolMethod("test","test");
        }
    </script>
</head>
<body>
    <button οnclick="test()">Test</button>
</body>
</html>

15.编译并运行项目

cordova run android

备注：

调用的方法

cordova.plugins.TestPlugin.coolMethod()

为自定义插件的方法

clobbers内所写的是方法的包含关系

在config.xml中可修改图标和app

<?xml version='1.0' encoding='utf-8'?>
<widget id="cn.zhangjingyao.testCordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>TestCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <!-- APP名称 -->
        <name>测试插件APP</name>
        <!-- 图标配置 -->
        <icon density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
        <icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
        <icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
        <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-camera" spec="^2.4.1" />
    <plugin name="TestPlugin" spec="D:\AS-workspace\TestPlugin" />
    <engine name="android" spec="^5.1.0" />
</widget>