【Andriod中Webview与JS交互】

Andriod中Webview与JS交互

AgentWeb

AgentWeb 是一个高度封装的 Android WebView ，简单易用 ， 带有进度条 、 支持文件上传 、 下载 、 简化 Javascript 通信 、 链式调用 、 加强 Web 安全的库 。

AgentWeb使用

Gradle 引入

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

	    //AgentWeb
	    implementation 'com.github.Justson.AgentWeb:agentweb-core:v5.0.6-androidx' // (必选)
	//    implementation 'com.github.Justson.AgentWeb:agentweb-filechooser:v5.0.6-androidx' // (可选)
	//    implementation 'com.github.Justson:Downloader:v5.0.4-androidx' // (可选)

AgentWeb设置

	AgentWeb.PreAgentWeb mAgentWeb = AgentWeb.with(this)
	                .setAgentWebParent(frameLayout, new FrameLayout.LayoutParams(-1, -1))
	                .closeIndicator()
	                .setWebViewClient(new MyWebViewClient())
	                .createAgentWeb()
	                .ready();
	AgentWeb agentWeb = mAgentWeb.go(uri.toString());

JS交互实现

自定义uri协议

	methods: {
        finishWeb(){
            window.location.href = "finishweb://finish/webview";
        },
        trMassage(){
            window.location.href = "trmassage://tr?data=" + JSON.stringify(this.str);
        },
    },

解析uri协议

定义一个继承WebViewClient的类，重写shouldOverrideUrlLoading方法，解析uri协议并执行相关操作，其中可以利用GSON将传递过来的数据JSON化。

	implementation 'com.google.code.gson:gson:2.9.1'

	private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            //解析uri协议并执行相关操作
            Uri uri = request.getUrl();
            if("finishweb".equals(uri.getScheme())){
                finish();
            } else if ("trmassage".equals(uri.getScheme())) {
                String data = uri.getQueryParameter("data");
                DataTest test = new Gson().fromJson(data, new TypeToken<DataTest>(){}.getType());
                textView.setText(test.getData().getNodes().get(0).getName());
            }
            return true;
        }
    }

与 Javascript 通信

利用AgentWeb封装好的方法，可以简化和 Javascript 通信

	if(agentWeb != null){
		String s = textView.getText().toString();
        agentWeb.getJsAccessEntrace().quickCallJs("app.reTitle",s);
	}

完整代码

Android代码

package com.example.webjsdemo;

import android.annotation.SuppressLint;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.widget.FrameLayout;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.example.webjsdemo.model.DataTest;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.just.agentweb.AgentWeb;
import com.just.agentweb.WebViewClient;

public class WebActivity extends AppCompatActivity {
    private FrameLayout frameLayout;
    private TextView textView;
    private TextView bt;
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        frameLayout = findViewById(R.id.web);
        textView = findViewById(R.id.tv_data);
        bt = findViewById(R.id.bt_com);

        Uri uri = Uri.parse("file:///android_asset" + "/h5/index.html")
                .buildUpon()
                .build();

        AgentWeb.PreAgentWeb mAgentWeb = AgentWeb.with(this)
                .setAgentWebParent(frameLayout, new FrameLayout.LayoutParams(-1, -1))
                .closeIndicator()
                .setWebViewClient(new MyWebViewClient())
                .createAgentWeb()
                .ready();
        AgentWeb agentWeb = mAgentWeb.go(uri.toString());
        bt.setOnClickListener(view -> {
            if(agentWeb != null){
                String s = textView.getText().toString();
                agentWeb.getJsAccessEntrace().quickCallJs("app.reTitle",s);
            }
        });
    }

    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            //解析uri协议并执行相关操作
            Uri uri = request.getUrl();
            if("finishweb".equals(uri.getScheme())){
                finish();
            } else if ("trmassage".equals(uri.getScheme())) {
                String data = uri.getQueryParameter("data");
                DataTest test = new Gson().fromJson(data, new TypeToken<DataTest>(){}.getType());
                textView.setText(test.getData().getNodes().get(0).getName());
            }
            return true;
        }
    }
}

H5代码

H5代码放入app/src/main/assets/ 中,访问路径为“file:///android_asset”+assets文件夹中h5路径
index.html

<!DOCTYPE html>
<html>
    <head>
        <link href="index.css" rel="stylesheet">
        <title>WebJs</title>
    </head>
    <body>
        <div id="app">
            <div class="title" style="display: flex;">
                <span style="flex-grow: 1; text-align: left; color: white;" @click="finishWeb">返回</span>
                <span style="flex-grow: 2; text-align: center;">{{title}}</span>
                <span style="flex-grow: 1; text-align: right; color: white;" @click="trMassage">将H5数据传给Android</span>
            </div>
        </div>
        <script type="text/javascript" src="common/vue.global.js" charset="utf-8"></script>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app;
app = Vue.createApp({
	data() {
		return{
			str: {
				"code": 0,
				"msg": "success",
				"data": {
					"id": "333333333",
					"name": "测试测试测试测试测试测试测试",
				}
			},
			title: 'WebJs相互调用',
		}
	},
    methods: {
        finishWeb(){
            window.location.href = "finishweb://finish/webview";
        },
        trMassage(){
            window.location.href = "trmassage://tr?data=" + JSON.stringify(this.str);
        },
        reTitle(res){
            this.title = res;
        }
    },
}).mount('#app')