Android studio 学习 WebView

最新推荐文章于 2025-04-24 22:34:17 发布

原创最新推荐文章于 2025-04-24 22:34:17 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

安卓同时被 3 个专栏收录

40 篇文章

订阅专栏

39 篇文章

订阅专栏

计算机

34 篇文章

订阅专栏

本文介绍如何使用Android的WebView控件进行混合开发，包括展示网页、与JavaScript交互及调用相机功能。通过WebView加载本地HTML文件，实现Android与JS的相互调用，完成拍照并更新图片的功能。

简介

WebView是android中一个非常重要的控件，它的作用是用来展示一个web页面。它使用的内核是webkit引擎，4.4版本之后，直接使用Chrome作为内置网页浏览器。

作用

显示和渲染网页；
可与页面JavaScript交互，实现混合开发。

创建一个assets 造一个html文件
在这里插入图片描述

代码

xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent" 
        android:layout_height="match_parent">
    </WebView>

</LinearLayout>

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function camera(){
				window.make.photo();
			}
			function change_image(path){
				document.getElementById("image").src=path;
			}
		</script>
	</head>
	<body>
		<img id="image" src="" width="100" height="100" />
		<button onclick="camera()">拍照</button>
	</body>
</html>

activity中的代码

public class MainActivity extends AppCompatActivity {

    private WebView webview;
    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        requestPermissions(new String[]{Manifest.permission.CAMERA,Manifest.permission.READ_EXTERNAL_STORAGE,Manifest.permission.WRITE_EXTERNAL_STORAGE},101);

        //加载本地网页
        webview=findViewById(R.id.webview);
        webview.loadUrl("file:///android_asset/Myfile.html");

        //安卓能够调用js
        WebSettings settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setAllowContentAccess(true);//设置webview能够访问网页
        //设置js能调用安卓
        webview.addJavascriptInterface(this,"make");//安卓暴露出来的接口 暗号 make
    }
    //接口
    @JavascriptInterface
    public void photo(){
        Toast.makeText(this, "123456789", Toast.LENGTH_SHORT).show();
        Intent intent = new Intent();
        intent.setAction(MediaStore.ACTION_IMAGE_CAPTURE);
        Uri uri = FileProvider.getUriForFile(this, "com.example.webview.fileProvider", new File("/sdcard/DCIM/html.jpg"));
        intent.putExtra(MediaStore.EXTRA_OUTPUT,uri);
        startActivityForResult(intent,101);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode==101&&resultCode== Activity.RESULT_OK){
            webview.loadUrl("JavaScript:change_image('/sdcard/DCIM/html.jpg')");
        }
    }
}