Android 入门第八讲02-WebView的高级用法（Android调用 JS 代码（ loadUrl 方法，案例练习），JS调用 Android 代码，流行框架总结，跨平台技术）

其他 2020-08-11 10:38:32 阅读次数: 0

Android 入门第八讲02-WebView（Android调用 JS 代码（ loadUrl 方法，案例练习），JS调用 Android 代码，流行框架总结，跨平台技术）

Android 入门第八讲01-WebView（WebView概述，基本用法（加载远程网页，加载本地网页），进阶用法（前进返回，清除缓存，网页自适应屏幕，缩放），WebView的三个子类）

准备工作

第一步，添加权限
在mainifests里添加权限代码

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

在<application结点下添加

		android:usesCleartextTraffic="true"

在这里插入图片描述
第二步，添加控件
布局文件中添加WebView控件

<?xml version="1.0" encoding="utf-8"?>
<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">

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

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
第三步，创建Assets文件夹
在这里插入图片描述
第四步，创建 test.html 页面文件在这里插入图片描述
编写网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">//自适应屏幕
    <title>Document</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<div>div content</div>
</body>
</html>

在这里插入图片描述

第五步，加载本地网页



public class MainActivity extends AppCompatActivity {


    WebView mWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView=findViewById(R.id.webview);
        mWebView.loadUrl("file:///android_asset/test.html");

        WebSettings webSettings = mWebView.getSettings();

        //如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
        webSettings.setJavaScriptEnabled(true);//js开关默认不打开，网页中的所有js方法就无法执行，如果我们把这个方法设置为ture，网页中搞得js方法才可以执行
        mWebView.setWebChromeClient(new WebChromeClient(){

            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Log.i("Main","------onJsAlert");
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this)
                        .setIcon(R.mipmap.ic_launcher)
                        .setTitle("title")
                        .setMessage("message")
                        .setPositiveButton("确定",
                                new DialogInterface.OnClickListener() {
                                    @Override
                                    public void onClick(DialogInterface dialogInterface, int i) {
                                        Toast.makeText(MainActivity.this, "确定按钮", Toast.LENGTH_LONG).show();
                                    }
                                }).setNegativeButton("取消", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {
                                Toast.makeText(MainActivity.this, "关闭按钮", Toast.LENGTH_LONG).show();
                                dialogInterface.dismiss();
                            }
                        });
                builder.create().show();

                return true;//屏蔽默认的js弹框

            }

        });






    }

}

运行
在这里插入图片描述

1.WebView 和Android互调概述

1、H5网页端 调用Android某些功能

举个例子，我们之前讲过，在微信中的公众号大多是用webview来呈现的， 那么有些好的文章或者公众号可能会出现 打赏 的需求，我们在点击打赏以后，一般都会要跳转到支付功能，也就是说在我们点击打赏以后，会跳出一个微信支付框，那这个微信支付框是从哪里调用的呢，网页里是没有微信支付功能的，实际上这个功能是由安卓来实现的，所以这就用到了 H5网页端 调用Android某些功能

2、Android 要传递数据到网页

举个例子，在支付宝中，有很多页面都是用webview加载的，在这个加载的网页当中，可能会显示一些用户信息，比如姓名，那这个网页是从哪里得到这个“姓名”的呢，实际上这个信息是安卓端传给这个webview的，所以这就用到了 Android 要传递数据到网页

2.WebView 的高级用法

1.Android调用 JS 代码

第一步，添加html网页代码（复制粘贴到原来的test.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<script>
// Android需要调用的方法
function callJS() {
alert("Android调用了JS的callJS方法");
}
</script>
</body>
</html>

第二步，添加按钮

<?xml version="1.0" encoding="utf-8"?>
<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">




<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"/>

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@id/button"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

loadUrl 方法

1.在button的点击事件里，调用loadUrl ，从而使得点击按钮可以调用到js里的方法


        Button button=findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Log.i("Main","onclik");
                //加载当前网页上的js方法
                mWebView.loadUrl("javascript:callJS()");
            }
        });

在这里插入图片描述
test.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<script>
// Android需要调用的方法
function callJS() {
alert("Android调用了JS的callJS方法");
}
</script>
</body>
</html>

在这里插入图片描述

运行
在这里插入图片描述

2.点击按钮，向js页面传值，这里我们传一个username


        Button button=findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Log.i("Main","onclik");
                //加载当前网页上的js方法
                mWebView.loadUrl("javascript:callJS('username')");//这里 字符串需要用 单引号 'xxx' 框起来，不然会当做对象来传递
            }
        });

在这里插入图片描述
test.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<div id="show">test</div>
<script>
// Android需要调用的方法
function callJS(data) {
     document.getElementById("show").innerHTML = data
}
</script>
</body>
</html>

在这里插入图片描述
运行（可以看到点击按钮后，test变成了username）
在这里插入图片描述
还有一种方式

  Button button=findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

               String url="username111";
                //加载当前网页上的js方法
                mWebView.loadUrl("javascript:callJS('"+url+"')");//这里 字符串需要用 单引号 框起来，不然会当做对象来传递
            }
        });

在这里插入图片描述
运行
在这里插入图片描述

案例练习-网络访问获取数据传到webview网页端

第一步，导入网络访问所需的代码
加依赖

		implementation 'org.xutils:xutils:3.8.5'

MainActivity中添加网络访问的代码

IP地址：http://148.70.46.9/usercenter

	        x.Ext.init(getApplication());
        x.Ext.setDebug(BuildConfig.DEBUG);// 是否输出debug日志, 开启debug会影响性能.
        x.view().inject(this);//没有用到view注解可以先不用

        RequestParams params = new RequestParams("http://148.70.46.9/usercenter");
        x.http().get(params, new Callback.CommonCallback<String>() {
            @Override
            public void onSuccess(String result) {
            }
            @Override
            public void onError(Throwable ex, boolean isOnCallback) {
            }
            @Override
            public void onCancelled(CancelledException cex) {
            }
            @Override
            public void onFinished() {
            }
        });

第二步，传值
在这里插入图片描述
第三步，解析json数据
在网页端解析json对象就比安卓端简单些，只需要用到JSON.parse()这个方法就可以帮助我们解析数据
test.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<div id="show">test</div>
<script>
// Android需要调用的方法
function callJS(data) {
     var result = JSON.parse(data);
     document.getElementById("show").innerHTML = result.nickname
}
</script>
</body>
</html>

在这里插入图片描述

总结一下：我们所有的数据，这个网页上的数据是从哪里得到？可以通过安卓网络请求帮我们得到这个数据结果，然后再把数据传到前端的页面，前端的页面拿到数据以后，前端可以自己去做解析，而且json解析在前端会比较方便一点，前端通过解析字符串，就可以直接拿到里面的数据，然后再把里面的数据传递出来

3.JS调用 Android 代码

第一步，加入html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<div id="show">test</div>
<button onclick="myclick()">点击按钮</button>
<script>
// Android需要调用的方法
function callJS(data) {
     var result = JSON.parse(data);
     document.getElementById("show").innerHTML = result.nickname
}
            function myclick(){
                    document.location ="test for webview"

            }
</script>
</body>
</html>

在这里插入图片描述

mWebView.setWebViewClient(new WebViewClient(){

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //所有页面加载都要经过这个方法

                Log.i("Main","url:"+url);
                view.loadUrl(url);
                return true;
            }
        });

在这里插入图片描述

运行（可以看到打印了网页端返回的数据）
在这里插入图片描述
还有一种传值方式（但是我的模拟器版本低了，所以我用真机调试一下果然是可以的）

这里值得一提的是，这是通过返回的request，去得到其中的数据，还有button要声明全局变量

@Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {


                Log.i("Main", "url" + request.getUrl().getQueryParameter("nickname"));
                mButton.setText(request.getUrl().getQueryParameter("nickname"));

                return true;
            }
        });

在这里插入图片描述
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Android调用 JavaScript</title>
</head>
<body>
<h1>这是H1</h1>
<div id="show">test</div>
<button onclick="myclick()">点击按钮</button>
<script>
// Android需要调用的方法
function callJS(data) {
     var result = JSON.parse(data);
     document.getElementById("show").innerHTML = result.nickname
}
            function myclick(){
                document.location ="js://baidu.com?nickname=test123"

            }
</script>
</body>
</html>

在这里插入图片描述
运行（可以看到，点击网页端的按钮以后，安卓端的按钮文本改变了）
在这里插入图片描述
换了一个新模拟器（雷电模拟器4），运行也成功了，点击按钮，打印日志，并且把数据传递给button
在这里插入图片描述

4.流行框架总结

1.ui框架

控件有很多差异
uniapp： https://uniapp.dcloud.io/

uniapp中有很多样式，只需要引入js，就可以达到和安卓开发一样的效果
在这里插入图片描述

vuejs:https://cn.vuejs.org/

vuejs，前端目前最火的框架

mui： https://dev.dcloud.net.cn/mui/

类似于uniapp

cordova：http://cordova.axuer.com/

网页端 有些android功能实现比较难得这些点,比如调用摄像头，获取蓝牙的数据，就可以用cordova来帮我们解决

2.WebView框架

TBS:https://x5.tencent.com/tbs/sdk.html

5.跨平台技术

1.H5+ 原生混合开发

适用场景：

  • 微信小程序
  • H5

缺点：但是 网页端的页面编写的速度，比起 android写法会 速度慢大概30%

2.Javascript 开发 + 原生渲染

常用框架：

  • React Native
  • Weex-基于Vue.js

还是用H5来写页面 ，但是可以用像React Native或者这个Weex，帮助我们把H5的代码翻译成Android代码，所以还是相当于安卓的原生运行，所以在一定程度上减小了性能的损耗

3.自绘 UI

  • Flutter

谷歌官方推出的技术
它可以用一种语言来写程序，可以在android上运行也可以在ios上运行，还可以在网页端运行，而且甚至可以把WebView在性能上的损耗降到0或以下，也就是说用Flutter写出来的代码可能比android写出来的代码性能还会更高，是目前安卓最流行的一种技术之一

关于WebView的所有知识就先讲到这里啦，感兴趣的小伙伴们还可以去挖掘其中更深层的知识，也欢迎来和博主分享哦，毕竟博主也只是一个小小白，还需努力嘿嘿嘿，谢谢您的阅读。

Android 入门第九讲01-音频（本地音乐播放，暂停，继续播放，获取播放时间，快进到指定位置，变速播放，播放data/data/目录下的音频文件，播放网络歌曲）

猜你喜欢

转载自blog.csdn.net/qq_46526828/article/details/107832314
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022