Android与webview混合开发

最新推荐文章于 2024-06-07 22:39:00 发布

浩海

最新推荐文章于 2024-06-07 22:39:00 发布

阅读量747

点赞数

分类专栏： Android 文章标签： java android html js webview

本文链接：https://blog.csdn.net/haohaiwangji/article/details/109779542

版权

Android 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文中用到了echarts图表
链接地址：https://echarts.apache.org/zh/index.html

前期基本配置

一.前端

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
	<title></title>
</head>
<body>
    //1.设置一个盒子容器显示图标，定义一个id
	<div id="box" style="width: 600px; height: 600px;"></div>
	<script>
    //2.echarts初始化一下，init,初始值给盒子的id
		var echartss=echarts.init(document.getElementById("box"));
		var option = {
		    backgroundColor: '#2c343c',
		
		    title: {
		        text: 'Customized Pie',
		        left: 'center',
		        top: 20,
		        textStyle: {
		            color: '#ccc'
		        }
		    },
		
		    tooltip: {
		        trigger: 'item',
		        formatter: '{a} <br/>{b} : {c} ({d}%)'
		    },
		
		    visualMap: {
		        show: false,
		        min: 80,
		        max: 600,
		        inRange: {
		            colorLightness: [0, 1]
		        }
		    },
		    series: [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius: '55%',
		            center: ['50%', '50%'],
		            data: [
		                {value: 335, name: '直接访问'},
		                {value: 310, name: '邮件营销'},
		                {value: 274, name: '联盟广告'},
		                {value: 235, name: '视频广告'},
		                {value: 400, name: '搜索引擎'}
		            ].sort(function (a, b) { return a.value - b.value; }),
		            roseType: 'radius',
		            label: {
		                color: 'rgba(255, 255, 255, 0.3)'
		            },
		            labelLine: {
		                lineStyle: {
		                    color: 'rgba(255, 255, 255, 0.3)'
		                },
		                smooth: 0.2,
		                length: 10,
		                length2: 20
		            },
		            itemStyle: {
		                color: '#c23531',
		                shadowBlur: 200,
		                shadowColor: 'rgba(0, 0, 0, 0.5)'
		            },
		
		            animationType: 'scale',
		            animationEasing: 'elasticOut',
		            animationDelay: function (idx) {
		                return Math.random() * 200;
		            }
		        }
		    ]
		};
//3.最后在用初始化后的echarts设置打开图表，显示到盒子中
		echartss.setOption(option);
	</script>
</body>
</html>

二.Android端

2.1在Android中建立assets文件。然后放入文件echarts.html
在这里插入图片描述
2.2在xml布局中添加webview控件

2.3 在java文件，这里注意，webview想要加载本地的文件得写上固定的路径

 webview = (WebView) findViewById(R.id.webview);
 WebSettings settings = webview.getSettings();
 settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setJavaScriptEnabled(true);
//固定路径
 webview.loadUrl("file:///android_asset/echarts.html");

H5调用Android端

1.在Java中写上

webview.addJavascriptInterface(this,"text");//第二个参数可自己取

2.此时写完后你会发现会报错
在这里插入图片描述

3.这是因为这个语句写完后需要在H5调用Android方法上加上一条注解@JavascriptInterface
在这里插入图片描述

4.java代码

package com.example.tool;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private WebView webview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initfuction();
    }

    private void initView() {
        webview = (WebView) findViewById(R.id.webview);
    }
    private void initfuction() {
        WebSettings settings = webview.getSettings();
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setJavaScriptEnabled(true);
        webview.addJavascriptInterface(this,"text");

        webview.loadUrl("file:///android_asset/echarts.html");
    }
    @JavascriptInterface
    public void H5_Post(){
        Intent intent=new Intent(MainActivity.this,Index.class);
        startActivity(intent);
    }

}

5.H5中，只需要添加一行代码就可以实现H5调用Android端

// H5调用Android端
//我这里写的是用按钮点击调用
		btn.onclick=function(){
			javasrcipt:text.H5_Post();
		}

Android端调H5

1.在h5写好将要调用的代码（我这就直接写了个弹框）
在这里插入图片描述
2.在java中，点击按钮调用H5

final String name="haohai";
btn_text.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //这里特别注意（）中的参数要加单引号，不加这里就没有作用了
        webview.loadUrl("javascript:android_text('"+name+"')");
    }
});
//调用谷歌内核，才能显示H5的弹框
webview.setWebChromeClient(new WebChromeClient()
{

});

好了，这就是以上Android混合开发的基本教程了，简单来说，基本的话只要掌握 H5调用Android====Android调用H5就行了。

浩海

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Android与webview混合开发

文中用到了echarts图表链接地址：https://echarts.apache.org/zh/index.html前期基本配置一.前端<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-.
复制链接

扫一扫