uniapp原生插件开发之调用原生方法(android)

由于uniapp官方更新,最新版的插件开发请跳转https://www.jianshu.com/p/89afba199d69

系列文章

uniapp插件开发与发布

需要实现的功能:

点击uniapp页面view,传递参数,调用android原生代码,然后原生代码处理数据,返回到uniapp页面

步骤

1.编写uniapp的视图页面







代码中的注释是后面会用到的,咱们按步骤来,写好后的界面是这样,其实也就是创建一个项目后,加了一个view节点,并且增加了一个点击事件


B04D6E22-4DCF-4059-862E-3A576F91F14F.png

2.在当前uniapp目录下新建common目录,在目录下新建一个js文件,我这里叫plugin.js


8C1A31BB-EDC1-4675-B77D-489523687706.png

文件的内容如下
! function(root, factory) {  
if (typeof exports == 'object' && typeof module != 'undefined') {  
    module.exports = factory()  
} else if (typeof define == 'function' && define.amd) {  
    define(factory)  
} else {  
    document.addEventListener('plusready', function(){  
    // 修改此处为插件命名  注释---1
    var moduleName = 'elitetyc';   
    
    root.plus[moduleName] = factory()  
    },false);  
}  
}(this, function() {  
//在此处定义自己的方法  注释---2
var _BARCODE = 'elitetyc';  
var plugintest = {  
    // 这里定义了一个名叫CalcNameAddNumFunction的方法,传递三个参数,后面两个是回调函数
    CalcNameAddNumFunction: function(num, successCallback, errorCallback) {
        var success = typeof successCallback !== 'function' ? null : function(args) {
                successCallback(args);
            },
            fail = typeof errorCallback !== 'function' ? null : function(code) {
                errorCallback(code);
            };
      // 注释---3
        var callbackID = plus.bridge.callbackId(success, fail);
    // 注释---4
        return plus.bridge.exec(_BARCODE, "calcMyNameAddNum", [callbackID, num]);
    }
};  
return plugintest;  
});  

注释讲解:

  • 注释1:这里是定义插件的名称
  • 注释2:这里也是插件的名称,可以看到在后面的
plus.bridge.exec(_BARCODE, "calcMyNameAddNum", [callbackID, num]);

// 官方讲解有同步与异步,我这里只用了异步
void plus.bridge.execSync( String service, String action, Array args );  
service: 插件类别名,对应dcloud_properties.xml的feature name。  
action: 调用android端插件方法名称。对应java文件的方法名。  
args: 参数列表。  

void plus.bridge.exec( String service, String action, Array args );  
service: 插件类别名,对应dcloud_properties.xml的feature name。  
action: 调用android端插件方法名称。对应java文件的方法名。  
args: 参数列表。  
  • 注释3:回调ID,后面原生代码中会用到,就好像你调用我,我有结果了,我该知道我把数据返回给谁把?这个id就是这个作用
  • 注释4:在上面有讲到过,这里需要注意的是前两个参数,第一个参数是插件类别名,后面再原生代码中的dcloud_properties.xml文件中会用到
    第二个参数,是android原生代码中的方法名要一致
    3.到这里uniapp页面差不多都编写完成了,我们使用android studio导入sdk中的插件项目示例HBuilder-Integrate-AS


    AB229329-5534-487D-8534-D3C08566840C.png

    导入完成后,我们需要在项目中新建一个java文件,并且继承自:StandardFeature ,我写好的代码如下,功能很简单,主要就是为了完成uniapp调用原生

public class ElitetycPluginTest extends StandardFeature {

    /**
     * 定义一个方法 将自己的名字加上数字进行返回
     * @param pWebview
     * @param array
     */
    public void calcMyNameAddNum(IWebview pWebview, JSONArray array){
//        获取回调ID
        String CallBackID = array.optString(0);
//        获取参数并计算(这里模拟原生处理)
        String newstring = "你好,这个字符串来自android原生代码,您传过来的参数是:"+array.optString(1);
//        构建回传参数
        JSONArray newArray = new JSONArray();
        newArray.put(newstring);
//        JSUtil.execCallback(IWebview pWebViewImpl,String pCallbackId,String pMessage,int pStatus,boolean pKeepCallback)
//        参数:
//        pWebViewImpl - webview对象
//        pCallbackId - 回调方法ID
//        pMessage - 回调信息
//        pStatus - 回调code值 如:OK、ERROR
//        pKeepCallback - js层回调function是否要保存

    // 第一个参数是当前函数的入参,直接传入, 第二个是根据入参获取的回调id,第三个是回调的数据,是一个json数组
        JSUtil.execCallback(pWebview,CallBackID,newstring,JSUtil.OK,false);
    }
}

这里的方法名calcMyNameAddNum需要和plugin.js中的plus.bridge.exec( String service, String action, Array args ); 方法的action参数一致,必须一模一样
4.将第一步中的注释代码打开,都是很简单的,就是js文件的引入,点击事件的编写


5.打开uniAPP刚才写的plugintest这个项目,点击发行,然后本地生成app资源


2BB96F0D-954D-4E6C-B3B7-2340C3A64B1A.png

等待完成后,在当前项目的unpackage里面会生成对应的资源包,然后拷贝到androidstudio项目的assets的apps目录下,一定要从带appid那一层拷贝,拷贝后的目录


854D2E66-3BE1-4A6E-B5C7-8966761F1FE2.png

6.修改配置文件
  • 修改assets目录下的data目录下的dclould_control.xml文件appid修改为,刚才自己uniapp的appid
  • 修改dclould_properties.xml ,在里面新建

然后再androidstudio运行当前项目,然后点击视图,就可以看到toast弹窗


D9A6598D-BE68-449E-8CA1-39D952D48EAB.png

你可能感兴趣的:(uniapp原生插件开发之调用原生方法(android))