注:在做例子之前要先做好准备工作,在app下新建一个名为:assets的目录(不懂怎么创建的可参考:https://blog.csdn.net/Biegral/article/details/47170037)
assets目录下存放要加载的HTML文件等
有关webView的讲解自行百度,这里直接用例子来大概了解一下:
Xml布局文件:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <WebView android:id="@+id/obd_webview" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <TextView android:id="@+id/obd_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:text=""/> </LinearLayout>
HTML内容:
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript"> function actionFromNative(){ document.getElementById("log_msg").innerHTML += "<br>Native调用了js函数"; } function actionFromNativeWithParam(arg){ document.getElementById("log_msg").innerHTML += ("<br>Native调用了js函数并传递参数:"+arg); } </script> </head> <body> <p>WebView与Javascript交互</p> <div> <button onClick="window.web.actionFromJs()">点击调用Native代码</button> </div> <br/> <div> <button onClick="window.web.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button> </div> <br/> <div id="log_msg">调用打印信息</div> </body> </html>
Android中的逻辑处理:
public class OBDCheckWebView extends AppCompatActivity { private WebView OBDmwebView; private TextView OBDTextView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_obdcheck_webview); OBDmwebView = this.findViewById(R.id.obd_webview); OBDmwebView.getSettings().setJavaScriptEnabled(true); //启用Javascript OBDmwebView.loadUrl("file:///android_asset/web.html"); //加载文件的路径以及文件名 OBDmwebView.addJavascriptInterface(this,"web"); OBDTextView = this.findViewById(R.id.obd_text); String [] data = {"20190606001","fs301","13024","粤-A888","白色","2019-02-02 15:38:28","338km"}; } //此方法没参数 @android.webkit.JavascriptInterface public void actionFromJs() { runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(OBDCheckWebView.this, "js调用了Native函数", Toast.LENGTH_SHORT).show(); String text = OBDTextView.getText() + " js调用了Native函数"; OBDTextView.setText(text); } }); } //可传递参数 @android.webkit.JavascriptInterface public void actionFromJsWithParam(final String[] str) { runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(OBDCheckWebView.this, "js调用了Native函数传递参数:" + str, Toast.LENGTH_SHORT).show(); String text = OBDTextView.getText() + " js调用了Native函数传递参数:" + str; OBDTextView.setText(text); } }); } }
运行效果如图: