MUI_5+SDK_Native.js

最新推荐文章于 2023-03-07 20:06:00 发布

LoadTown

最新推荐文章于 2023-03-07 20:06:00 发布

阅读量3.3k

点赞数

分类专栏： React Native 文章标签： Html5+ 5+SDK MUI Native.js

本文链接：https://blog.csdn.net/zcmain/article/details/51203037

版权

React Native 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

5+SDK提供丰富的API以此来访问Native层的对象/方法，本篇主要功能实现html层调用native层的自定义方法以及从html层调转到指定的Activity,以及Activity关闭或者Html关闭后回调启动onActivityResult
涉及到Html5+方法：

importClass: 导入Java类对象
newObject: 创建实例对象
invoke: 调用对象（类对象/实例对象）的方法

runtimeMainActivity: 获取应用主Activity实例对象

1. html层调用Native层自定义方法

1.1 html调用当前所处实列对象(Activity)的方法：

代码片段：

      html层:（native.html）
       invokecurrentbt.addEventListener('tap', function() {
			// 获取当前运行Activity实列对象
			StartWebApp = plus.android.runtimeMainActivity();
			// 调用当前实列对象的静态方法
			plus.android.invoke(StartWebApp, 'testMethod');
		});

      java层:（StartWebApp.class）
       public static void testMethod(){
		  Toast.makeText(context, "OMG！native方法被html调用了", Toast.LENGTH_SHORT).show();
	    }

1.2 html调用Native层指定类的方法：

代码片段：

      html层:(native.html)
       invokecommonbt.addEventListener('tap', function() {
		StartWebApp = plus.android.runtimeMainActivity();
		/**
		* 方法1：通过importClass导入Java类对象，通过对象调用方法
		* 缺 点：导入java类消耗内存过大
		* 优 点：创建对象后灵活调用方法不局限静态方法
		*/
		var Commutils = plus.android.importClass('com.example.utils.Commutils'); // 导java类对象
		var mcommonutils = new Commutils(); // new方式创建对象实例
		mcommonutils.showToast(); // 调用对象方法
		/**
		* 方法2：通过newObject创类对象，通过invoke方式调用类对象静态方法
		* 缺点：只能调用静态方法
		* 优点:减少系统资源消耗</span>
		*/
		var Commutils = plus.android.newObject('com.example.utils.Commutils');  // 创建对象实例
		plus.android.invoke(Commutils, 'showToast',StartWebApp,'newObjecinvoke');// 调用对象方法
		/**
		* 方法三：直接使用invoke调用类的静态方法
		* 缺点：只能调用静态方法
		* 优点：减少系统资源消耗
		*/
		plus.android.invoke('com.example.utils.Commutils', 'showToast', StartWebApp, 'invoke');
	 });

      java层:（Commutils.class）
       public class Commutils {
	       public static void showToast(Context context,String text){
		     Toast.makeText(context, text, Toast.LENGTH_SHORT).show();
	       }
	
       public static void showToast(){
		    System.out.println("html invoke native method");
	      }
      }

2. html层跳转指定Activity

方法一：
$1. html层通过importClass/newObject 获取Intent对象
$2. 通过runtimeMainActivity获取当前的主Activity实列对象
$3. 调用startActivity(intent)跳转目标Activity
代码片段：

         var Intent = plus.android.importClass("android.content.Intent");
         var ComponentName = plus.android.importClass("android.content.ComponentName");
         var intent= new Intent();
         intent.setComponent(new ComponentName("com.example", "com.example.JumpActivity"));
         var currentActivity = plus.android.runtimeMainActivity();
         currentActivity .startActivity(intent);

方法二：
通过Native层封装方法跳转方法，供html层调用即可
代码片段：

      JAVA层：   
       public static void jumptoActivity(Context contxt){
		  Intent intent = new Intent(contxt,JumpActivity.class);
		      contxt.startActivity(intent);
       }

      HTML层：
       jumpactivity.addEventListener('tap', function() {
		  /**
		   * 方法1：通过native层封装，html层调用封装方法即可
		   */
		   currentActivity = plus.android.runtimeMainActivity();
		   plus.android.invoke('com.example.utils.Commutils', 'jumptoActivity', currentActivity);
		});

3. Activity/Html关闭回调 onActivityResult

3.1 Activity关闭回调 html中实现的onActivityResult

流程：从A.html中跳转BActivity，BActivity退出后携带参数回调A.html中实现的onActivityResult。
代码片段：

      HTML层：
       jumpActivitybackvalue.addEventListener('tap', function() {
			var currentActivity = plus.android.runtimeMainActivity();
			var Intent = plus.android.importClass('android.content.Intent')
			var ComponentName = plus.android.importClass("android.content.ComponentName");
			var intent = new Intent();
			intent.setComponent(new ComponentName("com.example.fristdemo_5sdk", "com.example.fristdemo_5sdk.JumpActivity"));
			currentActivity.startActivityForResult(intent, 100);
			currentActivity.onActivityResult = function(requestCode, resultCode, data) {
				plus.android.importClass(data);
				var str = data.getStringExtra('zcmain');
				alert('回调成功啦....' + str);
			}
		});

      Java层：
       Intent intent = new Intent();
	   intent.putExtra("zcmain", "张三");
	   setResult(100,intent);
	   finish();

3.2 Activity通过startWebApp方式启动html,html关闭退出携带参数回调 Activity的onActivityRersult方法

流程： AActivity 启动 BActivity通过B.html页面通过startWebApp启动html，B.html退出回调AActivity的onActivityResult方法
代码片段：

      Java层:
       AActivity:
       bt.setOnClickListener(new OnClickListener() {
		    @Override
			public void onClick(View v) {
			     Intent intent = new Intent(MainActivity.this,StartWebApp.class);
			     startActivityForResult(intent, 200);  
			   }
		});			
			
       @Override
       protected void onActivityResult(int requestCode, int resultCode, Intent data) {
            super.onActivityResult(requestCode, resultCode, data);
            Bundle mBundle = data.getBundleExtra("bundle");
            String  user = (String) mBundle.get("person");
            Gson gosn = new Gson();
            User m = gosn.fromJson(user, User.class);
			log.i(TAG,"html退出传回参数为：" + m.getName());
       }

<pre code_snippet_id="1658073" snippet_file_name="blog_20160422_10_2633119" name="code" class="java">       StartWebApp:

// webapp 目录 String appBasePath = "/apps/sandcard"; mIApp = SDK.startWebApp(acitvity, appBasePath, null, new IWebviewStateListener() { //TODO。。。}

      HTML层：
	   B.html:
       /**
		 * Activity 跳转html 并接受html返回数据
		 */
		jumpHtmlbackvalue.addEventListener('tap', function() {
				var person = new Object();
				person.name='张三';
				person.age= '20';
				person.address = 'shanghai';
				var str = JSON.stringify(person);
				var currentActivity = plus.android.runtimeMainActivity();
				var Intent = plus.android.importClass('android.content.Intent')
				var intent = new Intent();
				var Bundle = plus.android.importClass('android.os.Bundle');
				//var Serializable = plus.android.importClass('java.io.Serializable');
				var bundle = new Bundle();
				bundle.putString("person",str);
				intent.putExtra('bundle', bundle);
				currentActivity.setResult(200, intent);
				currentActivity.finish();
		});

4.HTML跨页面方法调用参数传递

通常开发中常会遇见多个html页面之间相互传递数据以及调用方法：这里介绍2个方法：

mui.fire(); // 通过mui.fire()方法可触发目标窗口的自定义事件：
evalJS(); // 将JS脚本发送到Webview窗口中运行，可用于实现Webview窗口间的数据通讯。

fire()使用：调用目标窗口自定的事件（可携带参数）
代码案列：

       A页面：
	     //初始化预加载详情页面
	     mui.init({
	        preloadPages:[{    // 预加载B页面
		       id:'detailed.html',
		       url:'detailed.html'           
	         }
	      ]
	    });
	  
	    //添加列表项的点击事件
	    document.getElementById('testfire').addEventListener('tap', function(e) {
	       detailPage = plus.webview.getWebviewById('detailed.html');
	       mui.fire(detailPage,'newsId',{//触发（调用）详情页面的newsId事件
		     id:id
	       });      
	       mui.openWindow({ //打开详情页面
		     id:'detailed.html'
	       });
	    }); 
       detailed页面：
        //添加newId自定义事件监听
        window.addEventListener('newsId',function(event){
           var id = event.detail.id;//获得事件参数,根据id向服务器请求新闻详情
           .....
        });

evalJS()使用 // 案列从A页面打开B页面，b页面操作完成关闭后将数据返回给A页面

       A页面：
		 mui.openWindow({
		       url: 'B.html',
		       id: 'B.html',
		       extras: {
				name: content
				}
			});

        function Callback(str){
			alert('返回啦' + str);
		}

       B页面：（返回触发 beforeback函数）
		  mui.init({
			beforeback: function() {
				var html_data_interaction = plus.webview.getWebviewById('html/A.html');
				 var str = 'zcmain';
				 html_data_interaction.evalJS("back('"+str+"')");
				return true;
			}
		});

HTML5+ API 参考： http://www.html5plus.org/doc/zh_cn/android.html