Android WebView专题

news2024/10/6 6:03:09

WebView 专题

第一个WebView程序：加载远程网址

  1. Layout添加WebView组件；

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

  2. 初始化组件，加载Url;

    public class FirstWebViewActivity extends AppCompatActivity{

    private WebView webView_first;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_first_web_view);
        webView_first=findViewById(R.id.webView_first);
        webView_first.loadUrl("https://www.baidu.com/");
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        webView_first.removeAllViews();
        webView_first.destroy();
    }
}

  3. Manifest文件添加网络访问权限

    <uses-permission android:name="android.permission.INTERNET" />

  4. 出现错误：

    NetworkSecurityConfig   com.hymy.webviewstarter              D  No Network Security Config specified, using platform default
Denied starting an intent without a user gesture, URI

    解决方法：

    res/xml下添加 network_security_config.xml 文件：

    <?xml version="1.0" encoding="utf-8"?>
<network-security-config> //默认配置：允许明文通信
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

    在AndroidManifest.xml中引用

    <application
        android:networkSecurityConfig="@xml/network_security_config"
        ...

  5. 出现错误：

    访问bing.com无法加载封面图片：

    The resource xxx was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

    解决方法：

    webView_first=findViewById(R.id.webView_first);
//启用JavaScript
WebSettings webSettings = webView_first.getSettings();
webSettings.setJavaScriptEnabled(true);
webView_first.loadUrl("https://cn.bing.com/?mkt=zh-CN");

  6. 下载：在bing搜索网站首页，好看的壁纸，点击可以下载图片，将图片下载到 SD 卡下的Downloader目录下

    参考：https://cloud.tencent.com/developer/article/1742327

  7. 将 JavaScript代码绑定到Android代码

    js调用Android代码中的方法

    新建 WebAppInterface 类

    /**
 * @Author : alex
 * @Date : on 2023/11/14 09:21.
 * @Description :描述
 */
public class WebAppInterface {
    Context mContext;

    /**
     * 初始化接口，并设置context
     * @param c
     */
    WebAppInterface(Context c){
        mContext=c;
    }

    /**
     * 在Web页面显示消息提示
     * @param toast
     */
    @JavascriptInterface
    public void showToast(String toast){
        Toast.makeText(mContext,toast,Toast.LENGTH_SHORT).show();
    }
}

    webview 绑定接口：

     webView_first.addJavascriptInterface(new WebAppInterface(this),"Android");

    html代码示例：

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">
      function showAndroidToast(toast) {
            Android.showToast(toast);
      }
    </script>
  </body>
</html>

  8. webview中的跳转连接

    参考：https://www.digitalocean.com/community/tutorials/android-webview-example-tutorial

    当 html 中有跳转链接的时候，可以直接阻止、选择性阻止在我们的App跳转、或者可以打开系统浏览器，加载外部链接。

    webView_first.setWebViewClient(new MyWebViewClient());

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        Log.i("FirstWebViewActivity",request.getUrl().getHost());
        if ("192.168.96.108".equals(request.getUrl().getHost())) {
            // This is my website, so do not override; let my WebView load the page
            return false;
        }
        // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
        Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
        startActivity(intent);
        return true;
    }
}

  9. webview加载本地网页，实现 sqlite 数据库增删改查

    使用的库 gson:

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

    首先新建assets文件夹，android默认工程没有创建。

    在这里插入图片描述

    编写 DBHelper ，定义数据库名，在 onCreate 中初始化数据库：

    public class MyDatabaseHelper extends SQLiteOpenHelper {
    public static final String DATABASE_NAME = "student.db";
    public static final int DATABASE_VERSION =1;

    public MyDatabaseHelper(Context context){
        super(context,DATABASE_NAME,null,DATABASE_VERSION);
    }

    @Override
    public void onCreate(SQLiteDatabase db) {
        // 数据库首次创建时调用，执行创建表等语句
        // 创建student表
        db.execSQL("CREATE TABLE student (" +
                "id INTEGER PRIMARY KEY AUTOINCREMENT," +
                "name TEXT," +
                "age INTEGER," +
                "birth TEXT)");
        // 如果需要初始化数据可以在这里插入:
        db.execSQL("INSERT INTO student (name, age, birth) " +
                "VALUES ('张三', 18, '1980-01-01')");
    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
        // 数据库版本更新时调用

    }
}

    然后定义 MyApplication，在程序启动的时候初始化数据库：

    public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        //检测数据库是否存在，不存在则创建数据库
        Context context = getApplicationContext();
        MyDatabaseHelper dbHelper = new MyDatabaseHelper(context);
        SQLiteDatabase db = dbHelper.getWritableDatabase();
    }
}

    定义数据增、查接口类，供H5中调用：

    public class JsDBInterface {
    private SQLiteDatabase db;
    public JsDBInterface(Context context){
        // 在构造函数中打开数据库
        MyDatabaseHelper helper = new MyDatabaseHelper(context);
        db = helper.getWritableDatabase();
    }

    /**
     * 插入数据
     * @param name
     * @param age
     * @param birth
     */
    @JavascriptInterface
    public void insertData(String name,int age,String birth){
        //检查参数
        if(name==null||name.isEmpty()){
            return;
        }
        //插入数据
        ContentValues values = new ContentValues();
        values.put("name",name);
        values.put("age",age);
        values.put("birth",birth);
        db.insert("student",null,values);
        Log.i("插入数据",name);
    }

    /**
     * 查询数据
     * @return
     */
    @JavascriptInterface
    public String getAllStudents(){
        List<Student> students = new ArrayList<>();
        //查询数据库中的所有学生
        Cursor cursor = db.query("student",null,null,null,null,null,null);
        //获取所有列
//        String[] cols = cursor.getColumnNames();
//        int nameIndex=-1;
        while (cursor.moveToNext()){
            int columnIndex1=cursor.getColumnIndex("id");
            int columnIndex2=cursor.getColumnIndex("name");
            int columnIndex3=cursor.getColumnIndex("age");
            int columnIndex4=cursor.getColumnIndex("birth");
            int id=0;String name="null";int age=0;String birth="0000-00-00";
            if(columnIndex1>=0){
                id = cursor.getInt(columnIndex1);
            }
            if(columnIndex2>=0){
                name=cursor.getString(columnIndex2);
            }
            if(columnIndex3>=0){
                age = cursor.getInt(columnIndex3);
            }
            if(columnIndex4>=0){
                birth=cursor.getString(columnIndex4);
            }

            Student stu = new Student(id,name,age,birth);
            students.add(stu);
        }
        cursor.close();
        Gson gson = new Gson();
        String json = gson.toJson(students);
        return json;
    }
}

    数据实体类：

    public class Student {
    private int id;
    private String name;
    private int age;
    private String birth;

    public int getId() {
        return id;
    }

    public Student(int id,String name, int age, String birth) {
        this.id=id;
        this.name = name;
        this.age = age;
        this.birth = birth;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getBirth() {
        return birth;
    }

    public void setBirth(String birth) {
        this.birth = birth;
    }
}

    在 Activity 中注册接口：

    webView.addJavascriptInterface(new JsDBInterface(MainActivity.this),"JsDBInterface");

加载本地网页：
private String localUrl="file:///android_asset/index.html";
webView_first.loadUrl(localUrl);

    HTML 使用了vue，调用代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <ul>
            <li v-for="user in users" :key="user.id">{{user.name}}</li>
        </ul>
        <button id="btnInsertStudent" onclick="addStudent()">新增学生</button>
        <button id="btnGetAllStudents" onclick="getAllStudent()">查询所有学生</button>
        <ul id='studentList'></ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data(){
                return {
                    message:'Hello Vue!'
                }
            },
            mounted(){
            }
        })
        function addStudent(){
            JsDBInterface.insertData("小明",18,"2010-01-01");
            alert('添加成功')
        }
        function getAllStudent(){
            var data = JsDBInterface.getAllStudents();
            var students = JSON.parse(data);
            var studentTxt='';
            for(var i = 0; i < students.length; i++) {
                var stu = students[i];
                studentTxt += '<li>' + stu.name + ',' + stu.age + ',' + stu.birth + '</li>';
              }
              var ul = document.getElementById('studentList');
              ul.innerHTML = studentTxt;
        }
    </script>
</body>
</html>

    结果：
    在这里插入图片描述

  10. webview h5 alert 不运行

    参考：https://copyprogramming.com/howto/modify-alert-title-javascript-in-android-webview

    最简单的处理方法是：添加下面的代码

    webView_first.setWebChromeClient(new WebChromeClient());

    在这里插入图片描述

但是上面的标题会显示网址，可以用下面的方法进行修改：

webView_first.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        AlertDialog dialog = new AlertDialog.Builder(view.getContext())
            .setTitle("提示")
            .setMessage(message)
            .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    // do nothing
                }
            }).create();
        dialog.show();
        result.confirm();
        return true;
    }
});

修改后：

在这里插入图片描述

此外如果对 alert, prompt, confirm统一进行修改，可以使用下面代码：

webView_first.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        new AlertDialog.Builder(view.getContext())
            .setTitle("alert")
            .setMessage(message)
            .setPositiveButton("确定", (DialogInterface dialog, int which) -> result.confirm())
            .setOnDismissListener((DialogInterface dialog) -> result.confirm())
            .create()
            .show();
        return true;
    }

    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        new AlertDialog.Builder(view.getContext())
            .setTitle("confirm")
            .setMessage(message)
            .setPositiveButton("确定", (DialogInterface dialog, int which) -> result.confirm())
            .setNegativeButton("取消", (DialogInterface dialog, int which) -> result.cancel())
            .setOnDismissListener((DialogInterface dialog) -> result.cancel())
            .create()
            .show();
        return true;
    }

    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        final EditText input = new EditText(view.getContext());
        input.setInputType(InputType.TYPE_CLASS_TEXT);
        input.setText(defaultValue);
        new AlertDialog.Builder(view.getContext())
            .setTitle("prompt")
            .setMessage(message)
            .setView(input)
            .setPositiveButton("确定", (DialogInterface dialog, int which) -> result.confirm(input.getText().toString()))
            .setNegativeButton("取消", (DialogInterface dialog, int which) -> result.cancel())
            .setOnDismissListener((DialogInterface dialog) -> result.cancel())
            .create()
            .show();
        return true;
    }
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1206654.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

新闻发稿有什么用？新闻发稿怎么做？

新闻发稿有什么用？新闻发稿怎么做？

随着互联网的普及和信息传播速度的加快&#xff0c;新闻发稿成为越来越多企业和个人宣传自身形象、扩大品牌知名度和影响力的有效手段。本文将探讨新闻发稿的作用和如何进行新闻发稿。 一、新闻发稿的作用 1.提高品牌知名度 通过新闻发稿&#xff0c;企业或个人可以在媒体上展…
阅读更多...
谁输了，就往衣服里面倒水，欲望秀场与亲密的操控，当一位女博士生成为主播

谁输了，就往衣服里面倒水，欲望秀场与亲密的操控，当一位女博士生成为主播

在澎湃新闻上&#xff0c;读到香港大学博士生王怡霖的一篇自述文章。 为了研究秀场直播&#xff0c;她跟一家公会签约&#xff0c;当了秀场主播。 感谢王怡霖&#xff0c;愿意做这样的研究&#xff0c;为我们提供了解社会现实的一个观察视角。 三年主播体验观察下来&#xff0c…
阅读更多...
【SpringBoot篇】使用Spring Cache高效处理缓存数据

【SpringBoot篇】使用Spring Cache高效处理缓存数据

文章目录 &#x1f339;简述Spring Cache&#x1f3f3;️‍&#x1f308;常用注解&#x1f33a;使用SpringCache&#x1f6f8;Cacheable注解⭐测试 &#x1f6f8;CacheEvict&#x1f38d;一次清理一条数据&#x1f38d;一次删除多条数据 Spring Cache是一个框架,只要简单加一个…
阅读更多...
电脑监控软件不联网是不是就没事？

电脑监控软件不联网是不是就没事？

电脑监控软件不联网是不是就没事&#xff1f; 回答&#xff1a;不是&#xff0c;不联网仍旧会正常工作。 虽然电脑监控软件在不联网的情况下无法通过网络进行数据传输&#xff0c;但并不意味着它完全失效。 有些监控软件在安装时可能分为管理端、服务器端和员工端&#xff0c…
阅读更多...
基于 Lua 写一个爬虫程序

基于 Lua 写一个爬虫程序

你想要基于 Lua 写一个爬虫程序来爬取的内容。我可以给你一个基本的框架&#xff0c;但是请注意这只是一个示例&#xff0c;并且你可能需要根据实际情况进行调整。 -- 首先&#xff0c;我们需要引入一些必要的模块 local http require "socket.http" local json r…
阅读更多...
【Python基础篇】变量

【Python基础篇】变量

博主&#xff1a;&#x1f44d;不许代码码上红 欢迎&#xff1a;&#x1f40b;点赞、收藏、关注、评论。 格言&#xff1a; 大鹏一日同风起&#xff0c;扶摇直上九万里。 文章目录 一 Python中变量的定义二 Python中变量的使用三 Python中变量的类型四 Python中变量的删除五 …
阅读更多...
什么是稳定扩散中的采样步骤？

什么是稳定扩散中的采样步骤？

在线工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 3D数字孪生场景编辑器 本指南将深入探讨采样步骤的基础知识、它们对图像生成的影响&#xff0c;以及优化这些步骤以获得最佳结果的技巧。 了解稳定扩散中…
阅读更多...
锅鸡unity和unityHub泼姐

锅鸡unity和unityHub泼姐

链接在下面 支持pj所有国际版本的Unity和UnityHub。 自从 Unity2022.2.0 及以上版本重构了License逻辑&#xff0c;目前无法pj。问题跳转&#xff1a;#78 下载地址 Unity国际版 官方下载地址&#xff08;需要配置代理&#xff0c;代理没配置好可能会下载的国内版&#xff09…
阅读更多...
应用亚马逊云科技，Share Creators1个月内上线生成式AI生图模块

应用亚马逊云科技，Share Creators1个月内上线生成式AI生图模块

随着生成式AI在全球范围爆火&#xff0c;如何充分利用生成式AI自动生成内容提高创作效率已成为设计领域创新的关键突破口。对于设计行业和游戏行业的众多企业和团队而言&#xff0c;管理数字资产的能力是其实现高效创作最大的挑战之一&#xff0c;也是在降本增效的流程中非常容…
阅读更多...
服务器CPU高居不下，JAVA线程占用如何排查

服务器CPU高居不下，JAVA线程占用如何排查

1. 查看占用cpu占用过高进程的pid 使用 top名称查看 这里可以看的出来进程是20943 2. 查看该进程中哪个线程占用大量 CPU ps -mp 20943 -o THREAD,tid,time | grep $(ps -mp 20943 -o THREAD,tid,time |awk NR>2 {print $2}|sort -nr|head -1)|head -1 root 1.0 1…
阅读更多...
Fourier分析导论——第5章——实数据R上的Fourier变换(E.M. Stein R. Shakarchi)

Fourier分析导论——第5章——实数据R上的Fourier变换(E.M. Stein R. Shakarchi)

第5章 实数域ℝ上的Fourier变换 The theory of Fourier series and integrals has always had major difficulties and necessitated a large math- ematical apparatus in dealing with questions of con- vergence. It engendered the development of methods of summa…
阅读更多...
arcgis--浮点型栅格数据转整型

arcgis--浮点型栅格数据转整型

利用【Spatial Analyst工具】-【数学】-【转为整型】工具&#xff0c;将浮点型数据转为整型。如下&#xff1a; 【转为整型】对话框参数设计如下&#xff1a; 转换结果如下&#xff1a;
阅读更多...
聚焦车用AI算力，奕行智能EVAS完成超亿元Pre-A+轮融资并即将推出端侧算力芯片产品

聚焦车用AI算力，奕行智能EVAS完成超亿元Pre-A+轮融资并即将推出端侧算力芯片产品

近日&#xff0c;奕行智能科技&#xff08;广州&#xff09;有限公司&#xff08;以下简称&#xff1a;“奕行智能”&#xff09;完成超亿元人民币Pre-A轮融资。本轮融资由广州南沙科金控股集团有限公司下属广州南沙区南金基金管理有限公司作为领投方&#xff0c;东南亚最大的金…
阅读更多...
【反编译系列】二、反编译 .pyc 文件（uncompyle6）

【反编译系列】二、反编译 .pyc 文件（uncompyle6）

文章目录 【反编译系列】二、反编译 .pyc 文件&#xff08;uncompyle6&#xff09;1. 介绍2. 反编译Reference 【反编译系列】二、反编译 .pyc 文件&#xff08;uncompyle6&#xff09; 1. 介绍 .pyc 文件是 Python 将 .py 源代码编译后生成的字节码文件,主要有以下几个特点和…
阅读更多...
【java进阶】Java中线程的实现方式

【java进阶】Java中线程的实现方式

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 线程的四种实现方式&#xff1a; 1. 继承Thread类 2. 实现Runnable接口 3. 实现Collable接口 4. 线程池获取线程 1. 继承Thread类 &#x1f4a7;优点&#xff1a; 简单易懂&#xff0c;适用于简单的线程需求。直接…
阅读更多...
Python开源项目VQFR——人脸重建（Face Restoration），模糊清晰、划痕修复及黑白上色的实践

Python开源项目VQFR——人脸重建（Face Restoration），模糊清晰、划痕修复及黑白上色的实践

Python Anaconda 的安装等请参阅&#xff1a; Python开源项目CodeFormer——人脸重建&#xff08;Face Restoration&#xff09;&#xff0c;模糊清晰、划痕修复及黑白上色的实践https://blog.csdn.net/beijinghorn/article/details/134334021 VQFR也是 腾讯 LAB 的作品&…
阅读更多...
无代码：解决非程序员的开发难题

无代码：解决非程序员的开发难题

最近&#xff0c;有个小型企业的负责人找上我&#xff0c;说他公司需要一个内部管理系统&#xff0c;来提高工作和协作效率&#xff0c;但他没有编程经验&#xff0c;也不打算花费大量时间和金钱雇佣专业的开发团队&#xff0c;他问我有没有什么解决方案。 针对这个问题&#…
阅读更多...
臀部筋膜炎怎么治疗最有效

臀部筋膜炎怎么治疗最有效

臀部筋膜炎的主要症状包括以下几点&#xff1a; 一、筋膜炎发生时会导致臀部疼痛以及局部红肿的情况。 二、可能会引起臀部活动受限。 三、可能会导致患者不能取坐位&#xff0c;因为坐位时可能由于局部压迫而引起筋膜炎疼痛症状加重&#xff0c;而引起患者不能取坐位的情况…
阅读更多...
酷开科技丨酷开系统，带你进入惊喜不断的影视世界！

酷开科技丨酷开系统，带你进入惊喜不断的影视世界！

随着科技的迅速发展&#xff0c;智能电视已经成为家庭娱乐的重要组成部分。而要说到智能电视&#xff0c;就不得不提到酷开系统&#xff0c;作为一款智能电视操作系统&#xff0c;酷开系统以其独特的功能和出色的使用体验&#xff0c;让观众们看到了到惊喜不断的影视世界。 如…
阅读更多...
智慧渔业捕捞计数项目设计书

智慧渔业捕捞计数项目设计书

&#xff08;一&#xff09;项目背景 根据捕捞水域的不同&#xff0c;我国水产捕捞可划分为海洋捕捞、远洋捕捞以及淡水捕捞三大类型。其中&#xff0c;淡水渔业主要是指在淡水水域进行捕捞、养殖以获得淡水水产品并对这些水产品进行加工的社会生产领域。 近年来&#xff0c;随…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023