原生cordova插件_cordova 插件原生界面 - CSDN
  • webApp对于原生功能的调用可以采用第三方的框架,例如phonegap或者cordova等,...封装cordova插件 cordova教程:https://www.w3cschool.cn/cordova/。官方已经封装了很多通用的功能插件,对于极个别特定的需...

    webApp对于原生功能的调用可以采用第三方的框架,例如phonegap或者cordova等,phonegap和cordova的操作模式类似,此处仅针对cordova进行讲解。

    主要分为两步:1.创建cordova项目     2.封装cordova插件

    cordova教程:https://www.w3cschool.cn/cordova/。官方已经封装了很多通用的功能插件,对于极个别特定的需求,需要自定义封装插件。

    1.创建一个cordova的项目:

    语法:cordova create LocalToast com.hjk.localToast HelloCordova

    进入创建的目录LocalToast下,添加运行平台,此处以android举例,语法:cordova platform add android

    开发平台添加完毕,打开android studio ,选择LocalToast下,platform下,android项目运行。将项目的视图模式切换为project,在src目录下创建包,org.apache.cordova.bluetooth目录,在toast目录下创建java文件,此处以HjkPlugin.java为例。

    package org.apache.cordova.bluetooth;
    
    import android.widget.Toast;
    
    import org.apache.cordova.CallbackContext;
    import org.apache.cordova.CordovaArgs;
    import org.apache.cordova.CordovaPlugin;
    import org.json.JSONArray;
    import org.json.JSONException;
    
    public class HjkPlugin extends CordovaPlugin {
    
        @Override
        public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {
    		//localTost 为对外调用的方法名
            if("localTost".equals(action)){
                Toast.makeText(cordova.getActivity(),"cordova plugin test :" + args.getString(0),Toast.LENGTH_LONG).show();
    			//callbackContext用来调用回调函数,success为调用成功的回调
                callbackContext.success("toast success");
    			return true;
            }
    		//error为返回错误时的回调
            callbackContext.error("toast error");
            return false;
        }
    }
    

    2.创建一个plugin插件

    在全局环境中安装plugman插件,语法:npm install -g plugman。使用plugman创建一个plugin插件,语法:

    plugman create --name HjkPlugin --plugin_id HjkPlugin --plugin_version 1.0.0

    创建好的插件目录结构如下:

     src目录下还要创建目录android,表示为android的平台插件资源,同理,如果是ios,则在src下创建ios的目录。这些都是手动创建的。

     将编辑好的java文件放置在android目录下,然后编辑www目录下的HjkPlugin.js文件,

    var exec = require('cordova/exec');
    
    exports.coolMethod = function(arg0, success, error) {
        exec(success, error, "HjkPlugin", "coolMethod", [arg0]);
    };
    
    var hjkFunc = function(){};
    // arg1:成功回调
    // arg2:失败回调
    // arg3:将要调用类配置的标识
    // arg4:调用的原生方法名
    // arg5:参数,json格式
    hjkFunc.prototype.localTost=function(success, error) {
        exec(success, error, "HjkToast", "showToast",[] );
    };
    
    var locshow = new hjkFunc();
    module.exports = locshow;

    编辑plugin.xml配置文件

    <?xml version='1.0' encoding='utf-8'?>
    <plugin id="HjkPlugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
        <!--指js文件名,而这个文件会自动以`<script`>标签的形式添加到Cordova项目的起始页。
        通过在*js-module*中列出插件,可以减少开发者的工作。*clobbers*元素说明了
        *module.exports*自动添加到*window*对象,让插件方法能够在窗口级别使用。-->
    	<name>HjkPlugin</name>
    	
    	<!--文件中js-module元素定义了js的名字,它将在应用开始时自动加载。
        它定义了向Cordova公开的js接口。clobbers元素指明了js对象赋值给加载的js对象。
        本例中,HjkPlugin插件通过一个cordova.plugins.HjkPlugin对象向Cordova应用公开。-->
        <js-module name="HjkPlugin" src="www/HjkPlugin.js">
            <clobbers target="cordova.plugins.HjkPlugin" />
        </js-module>
    	
    	<!--它定义了某个移动平台专用的设置,包括了相关native代码的设置。可以有一个或多个平台。-->
        <!--android的配置-->
        <platform name="android">
    
            <!--config-file元素定义了在插件安装过程中的改动。在例子中,一个叫HjkToast
            的特性添加到Android项目的config.xml文件中,指向Java类org.apache.cordova.bluetooth.HjkPlugin-->
            <config-file parent="/*" target="res/xml/config.xml">
                <feature name="HjkToast">
                    <param name="android-package" value="org.apache.cordova.bluetooth.HjkPlugin" />
                </feature>
            </config-file>
    
            <!--android权限,本例没有用到下权限,仅示例-->
            <config-file parent="/*" target="AndroidManifest.xml">
                <uses-permission android:name="android.permission.READ_PHONE_STATE" />
            </config-file>
    
            <!--source-file元素指出了一个或多个Android native源代码文件,当插件安装时由CLI安装。
            下面的例子指示plugman或CLI复制HjkPlugin.java文件到Cordova项目
             Android平台文件夹的*src/org/apache/cordova/bluetooth/HjkPlugin文件夹中。jar包放到libs下-->
            <source-file src="src/android/HjkPlugin.java" target-dir="src/org/apache/cordova/bluetooth" />
            <source-file src="src/android/xxx.jar" target-dir="libs" />
    
        </platform>
    	

    最后对插件进行初始化,进入插件目录,使用cmd初始化,语法:npm init

    4.将插件安装到cordova项目后,即可正常调用,安装语法:cordova plugin add F:\demo\Test\HjkPlugin

    之后即可正常启动项目运行

     

    提供初学者理解的自定义插件代码地址:

    https://download.csdn.net/download/kangkang_style/10611753

    深入一些的,可以查看下面这个demo:

    https://download.csdn.net/download/kangkang_style/10611763

    展开全文
  • 本文主要是简单说明下cordova插件中的原生是怎样一步步的调用到混合中的js的方法的。以下以本地通知的插件为例讲解下。原生中发送本地通知的代码,我这边就不细说了,有不懂的同学直接百度吧。我们直

    最近搞了个本地推送的cordova插件,里面有这么个需求,在点击推送的本地消息时需要给混合的那边通知下,然后调用某个JS中的方法。

    首先我们要知道想要实现原生调用js,那么一定要借助原生中的webview组件。

    本文主要是简单说明下cordova插件中的原生是怎样一步步的调用到混合中的js的方法的。

    以下以本地通知的插件为例讲解下。

    原生中发送本地通知的代码,我这边就不细说了,有不懂的同学直接百度吧。我们直接从点击本地消息的那个动作说起。
    这里需要说明一下,我的本地消息推送的PendingIntent 用的是广播,所以在点击本地通知的时候会调用我广播接收的代码。

    我在广播的接收中调用handlingNotificationOpen函数。

     private void handlingNotificationOpen(Context context,  Bundle bundle) {
            Log.i(TAG, "----------------  handlingNotificationOpen");
    
            //AlarmClockCordova是插件中继承CordovaPlugin 的类
            AlarmClockCordova.transmitNotificationOpen();
    
            Intent launch = context.getPackageManager().getLaunchIntentForPackage(
                    context.getPackageName());
            launch.addCategory(Intent.CATEGORY_LAUNCHER);
            launch.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_SINGLE_TOP);
            context.startActivity(launch);
        }

    transmitNotificationOpen 要是全局的函数

    public class  AlarmClockCordova extends CordovaPlugin {
        private static AlarmClockCordova instance;
        private static Activity cordovaActivity;
    
       public AlarmClockCordova() {
            instance = this;
        }
    
    
    
        @Override
        public void initialize(CordovaInterface cordova, CordovaWebView webView) {
            super.initialize(cordova, webView);
            cordovaActivity = cordova.getActivity();
        }
    
        @Override
        public void onDestroy() {
            super.onDestroy();
            cordovaActivity = null;
            instance = null;
        }
       ...
    
      static void transmitNotificationOpen() {
            if (instance == null) {
                return;
            }
            final String format = "window.plugins.alarmClock.openNotificationInAndroidCallback();";
           // final String js = String.format(format);
            cordovaActivity.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    instance.webView.loadUrl("javascript:" + format);
                }
            });
    
        }
       ...
    }

    我们可以看到CordovaPlugin类中是有个CordovaWebView的webveiw,我们直接用这个来调用JS代码就可以了。

    public CordovaWebView webView;

    主要的代码是webView.loadUrl(“javascript:” + format);这句就是在调用js的函数

    js代码

     function AlarmClock() {
      }
    
     AlarmClock.prototype.openNotificationInAndroidCallback = function () {//cordova.fireDocumentEvent('alarm.openNotification', {})
    //你的操作。。。
                              alert("提醒下!");
                            }
    
    
        if (!window.plugins) {
          window.plugins = {}
        }
    
        if (!window.plugins.alarmClock) {
          window.plugins.alarmClock = new AlarmClock()
        }

    这样点击本地的消息通知就会蹦出个”提醒下!”的提示。一个简单的小例子。希望对做插件的小伙有点帮助。当然其实原生开发的时候想在里面调用JS的方法,也可以用webView.loadUrl(“javascript:” + method);method是js的function名字。

    展开全文
  • > 此实例代码为 Android Studio 原生项目集成 Cordova 插件演示,而非通过 Cordova 直接编译,方便您在现有 Android Studio 项目中集成 Cordova 进行 H5 混合开发。 为了结构清晰及易维护性,项目分三个 Module ,...
  • 上文开发的插件没有调用原生界面,本文介绍开发带有activity的插件 本文很多操作与上文重复,重复部分会省略 首先打开plug1,先开发插件原生代码 在以下命名空间创建一个activity 名称为Act1Activity ...

    上文开发的插件没有调用原生界面,本文介绍开发带有activity的插件

     

    本文很多操作与上文重复,重复部分会省略

     

    首先打开plug1,先开发插件的原生代码

     

    在以下命名空间创建一个activity

    名称为Act1Activity

     

    添加成功后,修改此文件

    内容如下:

    package com.cesc.ewater.cordovaPlugin;

     

    import android.support.v7.app.AppCompatActivity;

    import android.os.Bundle;

    import android.widget.TextView;

     

    import com.cesc.ewater.plug1.R;

     

    public class Act1Activity extends AppCompatActivity {

        @Override

        protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_act1);

     

            //以下实现获取打开此Activity时传进来的参数值(参数的key是thisText),并显示到一个TextView

            TextView txt = (TextView) this.findViewById(R.id.txtInput);

            txt.setText(this.getIntent().getStringExtra("thisText"));

        }

    }

     

    再修改他的layout,文件在此

    内容如下:

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout 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="com.cesc.ewater.cordovaPlugin.Act1Activity">

     

        <LinearLayout

            android:layout_width="368dp"

            android:layout_height="495dp"

            android:orientation="vertical"

            tools:layout_editor_absoluteX="8dp"

            tools:layout_editor_absoluteY="8dp">

     

            <TextView

                android:id="@+id/textView"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:text="下面是传入参数例子" />

     

            <TextView

                android:id="@+id/txtInput"

                android:layout_width="match_parent"

                android:layout_height="wrap_content" />

        </LinearLayout>

    </android.support.constraint.ConstraintLayout>

     

    再创建plugin,类名为Act1Plugin,新建成功如下:

    把文件内容修改为:

    package com.cesc.ewater.cordovaPlugin;

     

    import android.content.Intent;

     

    import org.apache.cordova.CallbackContext;

    import org.apache.cordova.CordovaArgs;

    import org.apache.cordova.CordovaPlugin;

    import org.json.JSONArray;

    import org.json.JSONException;

     

    public class Act1Plugin extends CordovaPlugin {

        @Override

        public boolean execute(String action, String rawArgs, CallbackContext callbackContext) throws JSONException {

            return super.execute(action, rawArgs, callbackContext);

        }

     

        @Override

        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

            return super.execute(action, args, callbackContext);

        }

     

        @Override

        public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {

            if (action.equals("show")) {

                //以下用原生代码打开一个Act1Activity(可以理解为让界面跳转到Act1Activity这个界面)

                //PS:原生很多地方都要获取当前Activity的实例对象(如果在Activity里就用this),在CordovaPlugin用的是cordova.getActivity()

                Intent intent = new Intent(cordova.getActivity(), Act1Activity.class);

                //传入参数,参数分别是key和value

                intent.putExtra("thisText", "哈哈哈");

                cordova.getActivity().startActivity(intent);

                return true;

            }

            return false;

        }

    }

     

    到此插件编码完成,以上编码的功能意思为,调用插件Act1Plugin时,会跳转到原生安卓界面Act1Activity

     

    回到capp1,开始创建插件

     

    命令行进入capp1目录,执行以下命令创建插件,插件命名为act1-plugin

    plugman create --name act1-plugin --plugin_id act1-plugin --plugin_version 1.0.0

     

    在新建的插件文件夹下创建android文件夹

    把插件相关的类文件和layout文件都拷到此目录下

    PS:不用管原来的文件目录结构,都放在此目录下就行

     

    然后开始编辑plugin.xml ,修改成以下的内容(提供全文内容可以直接复制)

    <?xml version='1.0' encoding='utf-8'?>

    <plugin id="act1-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

        <!--插件名-->

           <name>act1-plugin</name>

           <!--js部分配置-->

        <js-module name="Act1Plugin" src="www/act1-plugin.js">

                  <!--js调用的对象名-->

            <clobbers target="Act1Plugin" />

        </js-module>

          

           <!--添加安卓平台-->

        <platform name="android">

            <config-file target="res/xml/config.xml" parent="/*"> 

                         <!--js调用的对象名-->

                <feature name="Act1Plugin">

                                <!-- value=java类名全路径-->

                    <param name="android-package" value="com.cesc.ewater.cordovaPlugin.Act1Plugin"/>

                </feature> 

            </config-file> 

                  <!-- src:java源文件的路径, target-dir:插件安装好后,源文件的位置,要和上面的包名对应 -->

                  <!--跟插件所有有关的类文件,layout文件等等都要一一配置在下方-->

            <source-file src="src/android/Act1Plugin.java" target-dir="src/com/cesc/ewater/cordovaPlugin" /> 

                  <source-file src="src/android/Act1Activity.java" target-dir="src/com/cesc/ewater/cordovaPlugin" /> 

                  <!--添加layout文件的例子,注意target-dir的值与改文件在as的目录是一样的-->

                  <source-file src="src/android/activity_act1.xml" target-dir="res/layout" />    

        </platform>

    </plugin>

     

     

    然后开始编辑此文件

    内容如下,可以直接复制进去,

    var exec = require('cordova/exec');

     

    //一个exports.XXX代表插件的一个方法,exports后面和exec方法的参数4都是方法名称(此例都是show)

    var exec = require('cordova/exec');

     

    //一个exports.XXX代表插件的一个方法,exports后面和exec方法的参数4都是方法名称(此例都是show)

    exports.show = function (arg0, success, error) {

           //参数1和参数2分别是调用插件成功和失败的回调方法(js)

           //参数3是插件名

           //参数4是方法名

           //参数5是js的传参

        exec(success, error, 'Act1Plugin', 'show', [arg0]);

    };

     

    打开控制台,进入插件目录,执行npm init

     

    完成后插件目录多了个package.json文件,开始编辑他

     

    添加此部分,下面有文本内容

    PS:id是插件名称

      "cordova": {

        "id": "act1-plugin",

        "platforms": [

          "android"

        ]

      },

     

    插件修改到此结束,开始把插件添加到cordova应用

     

    控制台进入capp1的安卓平台目录,输入以下命令cordova plugin add E:\project\201712cordovaTest\code\capp1\act1-plugin,命令中的路径是插件的目录

    PS:此命令意思是把某个目录的插件添加capp1的cordova应用

     

    成功后capp1会多了如下文件,可以见到插件的文件

     

    到此完成添加插件到cordova应用

     

    接下来开始修改h5应用代码,在h5应用中使用js调用插件

     

    打开vue1

    找到主页的js文件

    添加代码:Act1Plugin.show();

     

    修改代码完毕,npm build一下

    PS:从这段操作开始,在之前的 使用cordova把h5应用打包成apk 已经有说明,也就是h5应用修改后,通过一系列操作把他打包成apk,但在此也重复说明一次

     

    打开www(用webstrom打开,之前有说过),把刚才生成的文件拷过去

    PS:注意每次build生成的文件都会有一堆随机数,如果随机数变了就说明该文件内容有修改所以重新生成,反之就没变

     

    然后修改indel.html文件里引用文件的文件名

     

    然后开始cordova打包apk,命令行进入capp1的目录,运行命令cordova build android

     

    然后build一下,会发现很多报错

    这是因为capp1只有cordova的基础引用,跟完整的安卓应用的代码还是缺少很多引用

    例如Act1Activity会报不能引用android.support.v7.app.AppCompatActivity

    PS:以下解决编译错误的方法,估计不具有普遍性,解决以下问题需要一定的原生安卓开发能力

     

    把基类改为Activity

     

    然后import com.cesc.ewater.plug1.R有错

    把import com.cesc.ewater.plug1.R删掉,对R使用alt+enter import class

     

    此时build没错了,插上手机,开始调试

    PS:其实还有问题的,只是暂时还看不出来

     

    手机开始调试,点击左上角的按钮,但是没有效果,在logcat发现报错

    错误大意是找不到Act1Activity,后面还提示是否在AndroidManifest.xml里配置了此Activity

     

    于是去capp1的AndroidManifest.xml,配置Act1Activity

    <activity android:name="com.cesc.ewater.cordovaPlugin.Act1Activity" />

     

    然后再次调试,这次app直接崩掉,logcat报错,其中看到Didn't find class "android.support.constraint.ConstraintLayout,意思是找不到ConstraintLayout

     

    回到plug1,可以发现上面的类的引用配置

    把这行拷到capp1的相同文件的相同位置

    拷完后build一下,发现报错

    这原因是plug1的gradle是4.1,而capp1是2.14.1,不同版本的gradle配置文件语法不同,因此这行应该修改成

    compile  'com.android.support.constraint:constraint-layout:1.0.2'

     

    解决后再插上手机调试,这次终于成功了

    点击左上角按钮

    会跳转到下个界面

     

    到此开发完成

    转载于:https://www.cnblogs.com/cannel/p/11074383.html

    展开全文
  • cordova应用如果需要调用原生安卓接口,方法是使用cordova插件,cordova官方提供了主流原生功能的插件,但如果还不能满足需求,也可以自己开发cordova插件 以下介绍开发一个最简单的插件,功能是调用原生的toast...

    cordova应用如果需要调用原生安卓接口,方法是使用cordova插件,cordova官方提供了主流原生功能的插件,但如果还不能满足需求,也可以自己开发cordova插件

     

    以下介绍开发一个最简单的插件,功能是调用原生的toast弹出信息

     

    首先先用as创建新工程,用于编写插件的代码

    PS:开发cordova插件其中一个坑是没有一个好的编写代码环境,甚至插件的所有类文件都要手动添加到配置文件,这点后面会有体验

     

    项目名叫plug1,包(package)名要倒着写

    默认添加empry activity

    配置完成后等待一段时间,待进度条消失后,build一下,没报错就说明成功

     

    建名为org.apache.cordova的包,步骤如下:

     

    回到capp1,可以看到有org.apache.cordova包,把此包下所有文件,拷到上一步新建的包,目的是让plug1拥有cordova的类(使得可以开发cordova插件)

     

    拷后效果图

    用于开发cordova插件时编码的plug1项目到此建立完成,后续如果还有多个插件开发都可以重用此项目

    此项目不是必须的(因为最终编译不在此),理论上可以用记事本来编码

     

    然后开始插件的编码,首先新建包com.cesc.ewater.cordovaPlugin

     

    新建类ToastPlugin,此类内容在下面有提供,可以直接拷进去

    package com.cesc.ewater.cordovaPlugin;

     

    import android.widget.Toast;

     

    import org.apache.cordova.CallbackContext;

    import org.apache.cordova.CordovaArgs;

    import org.apache.cordova.CordovaPlugin;

    import org.apache.cordova.PluginResult;

    import org.json.JSONArray;

    import org.json.JSONException;

     

    /**

     * Toast插件

     */

    public class ToastPlugin extends CordovaPlugin {

        @Override

        public boolean execute(String action, String rawArgs, CallbackContext callbackContext) throws JSONException {

            return super.execute(action, rawArgs, callbackContext);

        }

     

        @Override

        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

            return super.execute(action, args, callbackContext);

        }

     

        /**

         * js调用插件方法后,会进入到此方法

         *

         * @param action          插件的方法名,如果一个插件有多个方法,通过此值区分

         * @param args            js传入的参数,用于插件外给插件传值,数组类型,可以传入多个参数

         * @param callbackContext The callback context used when calling back into JavaScript.

         * @return 插件是否正常执行,bool类型。还会影响到js调用的回调,如果是true就执行success的回调,false执行fail的回调

         * @throws JSONException

         */

        @Override

        public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {

            //通过action判断调用哪个方法

            if (action.equals("showToast")) {

                //这里可以实现一些你的原生逻辑功能

                //args.getString(0)意思是读取第1个传入参数,且类型是string

                Toast.makeText(cordova.getActivity(), args.getString(0), Toast.LENGTH_SHORT).show();

     

                //插件给外部js返回值的实现,PluginResult构造函数参数1代表执行结果状态,参数2是返回的值

                PluginResult pluginResult = new PluginResult(PluginResult.Status.OK, "插件返回的值");

                pluginResult.setKeepCallback(true);

                callbackContext.sendPluginResult(pluginResult);

                return true;

            }

            return false;

        }

    }

     

    最终效果

     

    然后回到capp1

     

    首先用npm安装plugman(全局安装),命令如下:npm install -g plugman,在此没有截图

    PS:只要在第一次使用安装

     

    命令行进入capp1目录,执行以下命令创建插件,插件命名为toast-plugin

    plugman create --name toast-plugin --plugin_id toast-plugin --plugin_version 1.0.0

    PS:其中—name后面是插件名,--plugin_id后面是插件id,--plugin_version后面是版本

     

    成功后生成此目录

     

    在此目录下,新建文件夹android

     

    把刚才在plug1编辑的ToastPlugin类文件拷到android文件夹里

    PS:原则上要把此插件所有的文件都放到此目录,此例只拷一个文件因为此例的插件确实只有一个类文件,非常简单

    PS:此目录下的文件的目录结构不需要跟包匹配,所有文件都放根目录都可以,因为后面还会有配置文件配置类文件和包名

     

    然后开始编辑plugin.xml

    修改成以下的内容(提供全文内容可以直接复制)

    <?xml version='1.0' encoding='utf-8'?>

    <plugin id="toast-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

        <!--插件名-->

           <name>toast-plugin</name>

           <!--js部分配置-->

        <js-module name="ToastPlugin" src="www/toast-plugin.js">

                  <!--js调用的对象名-->

            <clobbers target="ToastPlugin" />

        </js-module>

          

           <!--添加安卓平台-->

        <platform name="android">

            <config-file target="res/xml/config.xml" parent="/*"> 

                         <!--js调用的对象名-->

                <feature name="ToastPlugin">

                                <!-- value=java类名全路径-->

                    <param name="android-package" value="com.cesc.ewater.cordovaPlugin.ToastPlugin"/>

                </feature> 

            </config-file> 

                  <!-- src:java源文件的路径, target-dir:插件安装好后,源文件的位置,要和上面的包名对应 -->

            <source-file src="src/android/ToastPlugin.java" target-dir="src/com/cesc/ewater/cordovaPlugin" />         

        </platform>

    </plugin>

     

    PS:此文件的详细说明,也可以先跳过不看

     

    此文件是插件注入js的对象,根目录在插件目录

     

    这几个都是js调用插件的对象名,应该是一样的

     

    插件所有的文件(包括类文件,layout的xml文件,引用的jar包文件等等)都要配置到此

    plugin.xml说明到此为止

     

    然后开始编辑此文件

    内容如下,可以直接复制进去,

    var exec = require('cordova/exec');

     

    //一个exports.XXX代表插件的一个方法,exports后面和exec方法的参数4都是方法名称(此例都是showToast)

    var exec = require('cordova/exec');

     

    //一个exports.XXX代表插件的一个方法,exports后面和exec方法的参数4都是方法名称(此例都是showToast)

    exports.showToast = function (arg0, success, error) {

           //参数1和参数2分别是调用插件成功和失败的回调方法(js)

           //参数3是插件名

           //参数4是方法名

           //参数5是js的传参

        exec(success, error, 'ToastPlugin', 'showToast', [arg0]);

    };

     

    打开控制台,进入插件目录,执行npm init

     中间有很多输入项,直接回车即可,成功的效果

     

    完成后插件目录多了个package.json文件,开始编辑他

     

    添加此部分,下面有文本内容

    PS:id是插件名称

        "cordova": {

        "id": "toast-plugin",

        "platforms": [

          "android"

        ]

      },

     

    插件修改到此结束,开始把插件添加到cordova应用

     

    控制台进入capp1的安卓平台目录,输入以下命令cordova plugin add E:\project\201712cordovaTest\code\capp1\toast-plugin,命令中的路径是插件的目录

    PS:此命令意思是把某个目录的插件添加capp1的cordova应用

    成功的效果

    成功后capp1会多了如下文件,可以见到插件的ToastPlugin.java类文件

     

    到此完成添加插件到cordova应用

     

    接下来开始修改h5应用代码,在h5应用中使用js调用插件

     

    打开已经被遗忘的vue1

    找到主页的js文件

    添加代码:ToastPlugin.showToast("hello world");

    意思是调用名称为ToastPlugin的插件的showToast方法,并传入参数”hello world”

     

    修改代码完毕,npm build一下

    PS:从这段操作开始,在之前的 使用cordova把h5应用打包成apk 已经有说明,也就是h5应用修改后,通过一系列操作把他打包成apk,但在此也重复说明一次

     

    打开www(用webstrom打开,之前有说过),把刚才生成的文件拷过去

    PS:注意每次build生成的文件都会有一堆随机数,如果随机数变了就说明该文件内容有修改所以重新生成,反之就没变

     

    然后修改indel.html文件里引用文件的文件名

     

    然后开始cordova打包apk,命令行进入capp1的目录,运行命令cordova build android

    build成功后,回到capp1,插上手机,开始调试

     

    成功的话,点击左上角的【功能1】按钮,会弹出消息“hello world”

     

    追加小章节:

    插件修改后如何使修改生效:

    假设把弹出的文本内容加上123

     

    代码修改完后,控制台进入capp1目录,执行命令:cordova plugin rm toast-plugin,意思是删除插件

     

    然后再执行添加插件的命令

    成功后,在capp1的as build一下,再运行可看到修改后的效果

     

    PS:虽然有插件更新的命令cordova plugin update xxx,然而使用过发现无效,因此只能删除再添加

    转载于:https://www.cnblogs.com/cannel/p/11074377.html

    展开全文
  • cordova 插件想要访问Android原生的Activity 操作如下  步骤1.在生成插件的文件夹中找到自动生成的 plugin.xml文件 配置此文件 步骤2.插件文件夹 src/android/ 文件夹下准备拷贝资源 ...

    cordova 插件想要访问Android原生的Activity


    操作如下 



    步骤1.在生成插件的文件夹中找到自动生成的 plugin.xml文件 配置此文件










    步骤2.插件文件夹 src/android/ 文件夹下准备拷贝资源







    步骤3.提交插件到cordova 项目



    步骤4.提交成功后 在Cordova项目中platforms/android/ 找到对应的代码


    1.生成的相应android 清单文件



    2.对应的java类



    3.插件类中操作


    @Override
        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
            if ("alipay".equals(action)) {
                Intent intent=new Intent();
                intent.setAction("XXXXXXXXXXXXXXXXXXX");
                cordova.getActivity().startActivity(intent);
                return true;//返回true
            }else if("weixinpay".equals(action)){
                Intent intent=new Intent();
                intent.setAction("XXXXXXXXXXXXXXXXXXXXXXXXX");
                cordova.getActivity().startActivity(intent);
                return true;//返回true
            }
            return false;
        }



    至此就完成了将原生android代码打包成Cordova插件 并能在Cordova插件中调用android原生代码


    注意1.android原生代码 直接拷贝的话 到Corodva插件中 是找不到R.layout.XX 或是R.id.XX 的


    解决方法 

     

    提供工具类 MResource


    public class MResource {


        public static int getIdByName(Context context, String className, String resName) {
            String packageName = context.getPackageName();
            int id = 0;
            try {
                Class r = Class.forName(packageName + ".R");
                Class[] classes = r.getClasses();
                Class desireClass = null;
                for (Class cls : classes) {
                    if (cls.getName().split("\\$")[1].equals(className)) {
                        desireClass = cls;
                        break;
                    }
                }
                if (desireClass != null) {
                    id = desireClass.getField(resName).getInt(desireClass);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            return id;
        }


    }



    然后Android原生Activity 中


    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(MResource.getIdByName(this, "layout", "XXXXX"));
            initView();
        }



    public void initView(){
    paytextview= (TextView) findViewById(MResource.getIdByName(this, "id","XXXX"));
    paytextview.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View v) {
                    
                }
            });
     }


    这样就解决了导入后R.layout.XX 和R.id.XX 找不到问题了




    注意2 插件中跳转Android原生actiivty是 不能直接跳转 隐式跳转


    Intent intent=new Intent();
    intent.setAction("XXXXXXXXXXXXXXXXXXX");
    cordova.getActivity().startActivity(intent);
    return true;//返回true



    相应的原生Activity 注册时


    <activity android:name="com.wjn.paydemo.activity.XXXX">
                <intent-filter>
                    <action android:name="XXXXXXXXXXXXXXXXXXX" />
                    <category android:name="android.intent.category.DEFAULT" />
                </intent-filter>
     </activity>



    希望对你有所帮助!!!!

    展开全文
  • 最近公司项目要我给前端做一个基于Android原生cordova插件,让他们调用,心想好不容易走出来一个模板,看快写下心得,免得后面再做的时候给忘了,废话不多说,记录下来。 第一步:配置环境 这个不多说了,具体...
  • 这个cordova插件是我项目中用到的,其中引用到的库文件是.aar文件,不是通常的jar包,所以有些特别。针对这种特殊aar文件,插件添加完成后需要手动在app的gradle文件中添加以下代码repositories { flatDir { dirs ...
  • 本篇文章讲述的是Android Cordova插件实践过程,具体实现包括以下五个方面: 1,实现原生自定义插件类; 2,配置Cordova插件; 3,注册Cordova插件; 4,定义Cordova插件调用方式; 5,调用Cordova插件; 本篇文章以...
  • Cordova 插件中使用Android 原生的页面 进行交互跳转时 如何不进行特殊设置 Cordova项目跳转到原生Activity 页面时 布局会非常难看 例如 而我们想要的至少是这样的 解决办法 ...
  • cordova插件汇总大全

    2017-08-01 15:46:44
    cordova plugin add cordova-plugin-app-version 2、获取网络连接信息 cordova plugin add cordova-plugin-network-information 3、获取GPS数据 cordova plugin add cordova-plugin-geolocation
  • 概述最近项目中要使用cordova插件开发,cordova是phonegap的开源版本,能使H5开发的应用能访问原生设备功能的能力,关于它的介绍,自行Google、baidu。之前,我并没有接触过phonegap或者cordova,所以刚开始也是...
  • 调用方法 JS_NAMESPACE 需要注意是插件下的plugin <js-module src="www/device.js" name="device"> <clobbers target="device" /> </js-module> target 相同.不然会爆不识别的方法 带参数的...
  • Cordova项目中,Android端访问远程网站调用Cordova插件正文补充 正文 最近的Cordova项目中,采用了将前端项目放到服务器,App直接跳转到链接的方式开发。这样的目的是为了能频繁的更新,而不用发布新的版本。但是...
  • 自定义Cordova插件详解

    2019-08-10 14:03:36
    现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件、或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的相关知识。 那Cordova插件的基础...
  • cordova js 如何调用原生引用 cordova 安装插件 cordova 生成插件代码与引用文件是否一致。(xcode打包使用代码与web使用代码是否一致) 程序中如何调用cordova 插件 web 浏览插件效果 app 浏览插件效果
  • var last = function(n,lORr){ if(n==1){ return 1 }else{ if(lORr){//from left to right if(n%2 === 0){ return 2*last((n/2),false) }else{
  • 可以通过 js 调用cordova 插件的方式来实现。本文通过一个简单的例子程序,来实现通过ionic 来调用 原生接口。该例子通过网页打开原生的的一个UIViewController。  一.cordova 插件生成  1. 安装plugman   npm ...
  • cordova可以把html css js写的代码打包成app,还可以让js调用原生的api,Ionic...下面我们看看Vue cordova开发混合app之Vue调用Cordova插件 Vue 调用 cordova插件有两种方法: 如果想通过视频教程学习请访问:...
1 2 3 4 5 ... 20
收藏数 3,154
精华内容 1,261
关键字:

原生cordova插件