webview中的js调用native的实例

颜鸿云
2023-12-01

一、首先简单的布局文件main.xml,主要有两个控件我们主要研究webview控件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="
http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
    <WebView
        android:id="@+id/appView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

</RelativeLayout>

 

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

二、定义的activity文件MainActivity.java:

package com.liu;


import org.apache.cordova.DroidGap;

import android.os.Bundle;
import android.webkit.WebView;
import android.annotation.SuppressLint;
import android.app.Activity;


@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {

private WebView appView;
@Override
public void onCreate(Bundle savedInstanceState) {
 // TODO Auto-generated method stub
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 appView = (WebView) findViewById(R.id.appView);
 //appView = new WebView(this);
 appView.getSettings().setJavaScriptEnabled(true);

         appView.addJavascriptInterface(new PluginMethod(this, appView), "SM"); // 注意这里一句

        //appView.setIntegerProperty("splashscreen", R.drawable.ic_launcher);

        
         appView.loadUrl("
file:///android_asset/www/accountInfo.html");

}

}

其中
1、appView.addJavascriptInterface(new PluginMethod(this, appView), "SM"); // 注意这里一句

是主要注册给js调用本地方法的接口

2、appView.loadUrl("file:///android_asset/www/accountInfo.html");

这句主要是加载本地的html文件,

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

三、本地被js调用的函数及其方法PluginMethod.java:

package com.liu;

import org.apache.cordova.CordovaWebView;
import org.apache.cordova.DroidGap;

import android.content.Context;
import android.util.Log;
import android.webkit.WebView;

public class PluginMethod {

 Context  droidGap;
 WebView webView;
 
 public PluginMethod(Context droidGap, WebView appView) {
  this.droidGap = droidGap;
  this.webView = webView;
 }

 /**
 
      * JS调用  用于更新App
 
      * @param path 更新门店的地址
 
      */
 
     public void UpdateApp(final String path) {
 
         Log.e("---------------", path);  //注意这里日志输出
 
     }
 
 

}
-----------------------------------------------------------------

四、本地的html文件accountInfo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <title>Hello World</title>
    <style type="text/css" >body,div,p{font-size:28px;line-height:150%;}</style>
</head>
<body>
    账号公司信息demo:
    <br />
    <input type="button" value="读取账号信息"  οnclick="window.SM.UpdateApp('http://192.168.0.1');"/>
  
    <div id="info"></div>
  

   
</body>
</html>

 

这样运行这个程序,则点击按钮就会调用本地的java方法

 

 类似资料: