您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
85_采用html编辑界面ui&java_javascript代码的互相调用
发布时间：2021-03-26 17:43:37编辑：雪饮阅读（）
这里要实现的功能是通过安卓调用webview中的js方法，也可以让webview中的js来调用安卓的方法，即网页中的调用一个为定义的js方法如window.demo.callPhone()，该方法虽然在js中未定义，但是要将其定义在当前这个webview中，也就是说这个网页中调用这个方法在其它浏览器中可能行不通，但是在我们定义的这个webview中是可以行得通的。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.webview">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CALL_PHONE"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Webview"
android:usesCleartextTraffic="true"
>
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
在安卓中的布局完成了，接下来就是网页的布局，因为需要安卓调用网页中的js方法，所以这个网页中要声明对应的js方法，同时这个网页中因为也需要调用安卓的方法，所以网页中至少需要定义一个js方法，还有存在一个调用安卓中方法的按钮或者a链接之类，其余的就是随便一些纯纯静态的内容了。所以网页如test.html:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="调用javascript"
android:onClick="calljavascript"
>
</Button>
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/webview"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
安卓和网页的布局都完成之后就需要完成在安卓端对于webview的逻辑了，如MainActivity.java:
package com.example.webview;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
createWebView();
}
//调用网页中提供的fillContent的js方法
public void calljavascript(View view) {
webView.loadUrl("javascript:fillContent()");
}
public void createWebView(){
webView = (WebView) this.findViewById(R.id.webview);
//相当于创建了一个浏览器
WebSettings settings = webView.getSettings(); // 得到浏览器的设置
//开启javascript的支持
settings.setJavaScriptEnabled(true);
//以java形式为网页提供一个javascript接口，网页中调用如：window.demo.callPhone()
webView.addJavascriptInterface(new JavaJs(this), "demo");
String url = getResources().getString(R.string.serverurl);
webView.loadUrl(url);
}
private class JavaJs {
private Context context;
JavaJs(Context context) {
this.context = context;
}
@JavascriptInterface
public void callPhone() {
System.out.println("callphone");
Intent intent = new Intent();
intent.setAction(Intent.ACTION_CALL);
intent.setData(Uri.parse("tel:1351234567"));
startActivity(intent);
}
}
}其实这个逻辑是更正之后的，对于以前老的以api17为分界点，之前的以java为网页提供js方法实现逻辑大致如
webView.addJavascriptInterface(new Object(){
public void callPhone(){
System.out.println("callphone");
Intent intent = new Intent();
intent.setAction(Intent.ACTION_CALL);
intent.setData(Uri.parse("tel:1351234567"));
startActivity(intent);
}
}, "demo");
但是这种方式在api17之后就行不通了。
最后就是逻辑中所用到的网页地址url的配置文件，建立于values/config.xml如：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="serverurl">http://192.168.4.184:8080/javaweb/test.html</string>
</resources>本人这里将上面网页文件服务开启于http://192.168.4.184:8080/javaweb/test.html这个地址，关于如何开启，这里就不再多加赘述了。前面提到了很多次。
最后部署到设备上勾选了对应权限后经过操作之后的效果大致如
关键字词：android,html,java,javascript,webview