h5开发之cordova/phonegap自定义组件调用android native代码

本文介绍了如何在HTML5混合开发中利用Cordova/PhoneGap创建自定义插件,实现JS与Android原生代码的交互。以展示Toast和播放视频为例,详细阐述了从创建Android工程、打包插件到在Cordova项目中应用的整个过程,包括plugin.xml配置、Java代码编写和JavaScript接口设计。
摘要由CSDN通过智能技术生成

h5混合开发有时需要调用本地的代码,就是js和原生代码交互。当然rn的封装和调用都很方便,现在用下cordova封装自定义插件plugin,cordova和phonegap的关系自行百度吧,当然cordova的安装此处也省略。

首先以 js 调用安卓的Toast为例,显示Toast提示,同时android studio中Log 一下。

具体怎么做,下面然后我们来一件一件的抽肢剖解  

当然新建一个android 工程,比如这样

------------------------------------------------------------------------------

----------------------------------------------------------------------

------------------------------------------------------------------------------------

然后 导入CordovaLib 在建的工程里  在Cordova 新建的项目里有这个 复制出来导入到 android studio中就好了

------------------------------------------------------------------------------------------

-------------------------------------------------------------------------

---------------------------------------------------------------------

<span style="color:#000000">package plugins.com.test;

import android.util.Log;
import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

/**
 * Created by Administrator on 2018/1/18.
 */

public class Demo extends CordovaPlugin{
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("demoToast")) {
            String string = args.getString(0);
            this.demoToast(string, callbackContext);
            return  true;
        }
        return  false;
    }
    private void demoToast(String str, CallbackContext callbackContext) {
        Log.i("demo", "demo_demo");
        if (str != null || str.length() > 0) {
            Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_LONG).show();
            callbackContext.success(str);
        } else {
            callbackContext.error("str 不能为空~~~!!");
        }
    }
}</span>

写到这里需要用plugman 打包插件了 先安装plugman  npm install plugman -g

plugman create --name 插件名 --plugin_id 插件ID --plugin_version 插件版本号

如下图 三个步骤

把java代码复制到 src目录下 新建android 目录

www目录下的plugins-com-demo.js 代码如下

var exec = require('cordova/exec');
module.ex
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值