Cordova系列二、自定义插件

一、概括

  • 通过 Cordova 官方提供的插件,我们可以轻松的在 H5 上调用 Android 封装好的调用手机硬件的方法

  • 个人理解,Cordova 插件就是 java 开发中的 jar 工具包、H5 开发中的 Ionic/AngularJs 等封装好的框架,方便我们一行代码或者一个标签就能实现一个完整的效果

  • Cordova 自定义插件的官方文档

二、Cordova 能干嘛

  • 能让 H5 调用任何原生封装好的功能(照相、对话框、数据库、二维码扫描、指纹、NFC)

  • 可以用一个 js 文件指向多个平台下封装好的原生方法

  • 最后,想要开发自己的插件,还是参考官方已有的插件结构来最好

    • 举例:官方 Vibration 插件结构(仅列出重要文件)

      |cordova-plugin-vibration
      ----|src
      ---------|android
      --------------Vibration.java(①)
      ----|www
      ---------|vibration.js(②)
      ----plugin.xml(③)
      
    • ①**java 代码:**继承 CordovaPlugin,复写 execute() 方法,在方法中接收 js 传来的 action,匹配相应的java方法

    • ②**js 中间件:**调用 java 的方法暴露方法给 H5 调用

    • ③**配置文件:**重要性参考 Android 的 AndroidManifest.xml、Servlet 的 Web.xml


三、开始自定义插件

  • PART_0:照猫画虎,仿照官方明确插件结构

      |catface.toast
      ----|src
      ---------|android
      --------------MyToast.java
      ----|www
      ---------|toast.js
      ----plugin.xml
    
  • PART_A:plugin.xml – 配置清单

    • | 结尾为相对不重要或为固定写法

    • ** 结尾为重要内容,需仔细核对

      // 清单模板
      plugin
      
      	· id:插件唯一标识|
      	· version:版本号|
      	
      	··· name:插件名称|
      	··· description:插件描述|
      	··· license:证书|
      	··· keywords:关键字|
      	··· repo:仓库地址|
      	··· issue:问题地址| 
      
      
      js-module
      
      	· src:js中间件相对目录地址**
      	· name://|
      	
      	··· clobbers/merges
      		·target:H5通过它调用js中间件方法,可以配置多个**
      
      
      platform
      
      	· name:对应平台"android"|
      	
      	··· source-file
      		· src:"src/android/java类名"**
      		· tartget-dir:"src/包类"**会复制进项目包中
      		
      	··· config-file
      		· target:"res/xml/config.xml"|
      		· parent:"/*"|
      		
      		··· feature
      			· name:"js中间件通过它调用java方法"**
      			
      			··· param
      				· name:"android-package"|
      				· value:原生插件类的包类路径**
      
      	··· config-file
      		· target:"AndroidManifest.xml"|
      		· parent:"/manifest"|
      
      		··· uses-permission:相关权限|
      		
      

      
      
      <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
      	id="catface.javat"
      	version="0.0.2">
      	<name>Catface Native Toastname>
      	<description>this is...description>
      
      	<js-module src="www/toast.js" name="toast">
      		<clobbers target="catface"/>
      	js-module>
      
      	<platform name="android">
      		<source-file src="src/android/MyToast.java" target-dir="src/catface"/>
      
      		<config-file target="res/xml/config.xml" parent="/*">
      			<feature name="Toast">
      				<param name="android-package" value="catface.MyToast"/>
      			feature>
      		config-file>
      
      		<config-file target="AndroidManifest.xml" parent="/*">  
                  <uses-permission android:name="android.permission.READ_PHONE_STATE" />  
              config-file> 
      	platform>
      
      plugin>
      
  • PART_B:toast.js – 中间件

    • prototype. 跟上暴露给 H5 的接口方法,可带参数及回调函数

    • exec 通过传入配置文件中的 js-module/clobbers/target 的属性值 、传给 java 类的 action 参数来调用 java 方法

      var exec = require('cordova/exec');
      var myFunc = function(){};
      
      // arg1:成功回调
      // arg2:失败回调
      // arg3:将要调用类配置的标识
      // arg4:调用的原生方法名
      // arg5:参数,json格式
      myFunc.prototype.javaShow=function() {
      	exec(null, null, "Toast", "javaShow", []);
      };
      
      myFunc.prototype.javaShowJs=function(text, lenth) {
      	exec(null, null, "Toast", "javaShowJs", [text, lenth]);
      }
      
      myFunc.prototype.jsShowJava=function(success, error) {
      	exec(success, error, "Toast", "jsShowJava", []);
      }
      
      myFunc.prototype.jsShowJs=function(text, success, error) {
      	exec(success, error, "Toast", "jsShowJs", [text]);
      }
      
      myFunc.prototype.openVideo=function(content){
              exec(null, null, "Toast", "openVideo", [content]);
      };
      
      var showt = new myFunc();
      module.exports = showt;
      
  • PART_C:MyToast.java – 原生 java 类

    • 继承 CordovaPlugin 接口,复写 execute 方法.

    • arg1:js 传来的 action 参数,通过匹配执行相应方法.

    • arg2:js 传来的参数,以 JSONArray 格式,通过 get 方法获取值.

    • arg3:java 提供的接口供回调给 H5.

      public class MyToast extends CordovaPlugin {  
          
          private static final String TAG = "Toast";
      
      	@Override public void initialize(CordovaInterface cordova, CordovaWebView webView) {
               
              super.initialize(cordova, webView);
              Context context = this.cordova.getActivity().getApplicationContext();
               
          }
          
          @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {  
              
              Activity activity = cordova.getActivity();
              
              if("javaShow".equals(action)) {
                  Toast.makeText(activity, "java show...", Toast.LENGTH_SHORT).show();
              
              } else if("javaShowJs".equals(action)) {
                  String str = args.getString(0);
                  int lenth = args.getInt(1);
                  
                  if (lenth == 1) {
                      Toast.makeText(activity, "::" + str, Toast.LENGTH_LONG).show();
                  } else {
                      Toast.makeText(activity, "::" + str, Toast.LENGTH_SHORT).show();
                  }
              
              } else if("jsShowJava".equals(action)) {
                  int a = 4, b = 5;
                  if (a > b) {
                      callbackContext.success("sucsucsuc" + a);
                  } else {
                      callbackContext.error("errerrerr" + b);
                  }
                  return true;
      
              } else if("jsShowJs".equals(action)) {
                  String text = args.getString(0);
                  if (!(text.equals(""))) {
                      callbackContext.success("js'text: " + text);
                  } else {
                      callbackContext.error("errjsjs");
                  }
                  return true;
      
              } else if("openVideo".equals(action)) {
                  openVideo(args.getString(0));
              }
           
              callbackContext.success();  
              return true;  
          }
        
          private void openVideo(String text){
              String url = text;
              String extension = MimeTypeMap.getFileExtensionFromUrl(url);  
              String mimeType = MimeTypeMap.getSingleton().getMimeTypeFromExtension(extension);  
              Intent mediaIntent = new Intent(Intent.ACTION_VIEW);  
              mediaIntent.setDataAndType(Uri.parse(url), mimeType);  
              //startActivity(mediaIntent); 
              cordova.startActivityForResult((CordovaPlugin) this, mediaIntent, 200);
          }   
      }
      
  • PART_D:H5 调用演示

    <script type="text/javascript">
            
    	    function bt1() {
    	        catface.javaShow();
    	    }
    	
    	    function bt2() {
    	        catface.javaShowJs('fuck me', 1);
    	    }
    	
    	    function bt3() {
    	        catface.jsShowJava(function(msg) {
    	            alert(msg);
    	        }, function(msg) {
    	            alert(msg);
    	        });
    	    }
    	
    	    function bt4() {
    	        catface.jsShowJs("from js", function(msg) {
    	            alert(msg);
    	        }, function(msg) {
    	            alert(msg);
    	        });
    	    }
    	
    	    function bt5() {
    	        catface.openVideo('video net src');
    	    }
    
    </script>
    
  • PART_END:无关紧要

    • 细心的朋友会发现,本案例介绍了四种调用方式,希望大家满意
    1. js ------> java

    2. js ---args---> java:js带参给java处理

    3. js ------> java ---args---> js:js得到java返回的参数

    4. js ---args---> java ---args---> js

你可能感兴趣的:(Cordova系列二、自定义插件)