0
点赞
收藏
分享

微信扫一扫

Android(五十七):WebView - 获取网页logo和标题、监听页面滚动、刷新页面、两端交互


展示

Android(五十七):WebView - 获取网页logo和标题、监听页面滚动、刷新页面、两端交互_webview

源码

web端

<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>WebView 页面</title>
<link rel="shortcut icon" href="./imgs/avatar.png" type="image/png">
<link rel="stylesheet" href="./css/index.css">
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script src="./js/index.js"></script>
</head>

<body>
<input id="text" type="text" placeholder="请输入" />
<button onclick="handleAndroidFun()">交互</button>
<script>const handleAndroidFun = () => {
let { value } = document.getElementById('text');
const str = Android.ShowToast(value);
console.log(Android, str);
}</script>
</body>

</html>

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:padding="5dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="@color/colorPrimary"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_marginBottom="5dp">

<ImageView
android:id="@+id/icon"
android:layout_width="30dp"
android:layout_height="match_parent"
android:src="@drawable/avatar"/>

<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="@string/app_name"/>

<Button
android:id="@+id/refresh"
android:layout_width="60dp"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:text="刷新"/>

<Button
android:id="@+id/js_btn"
android:layout_width="60dp"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:text="调js"/>

</LinearLayout>

<RelativeLayout
android:id="@+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

脚本

using Android.App;
using Android.Content;
using Android.Graphics;
using Android.OS;
using Android.Views;
using Android.Webkit;
using Android.Widget;
using Java.Interop;
using Java.Lang;

namespace PrimaryBlankApp
{
[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
public class MainActivity : Activity
{
public static ImageView IconView;
public static TextView TitleView;
private WebView _webView;
private long _exitTime;

protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.activity_main);

IconView = FindViewById<ImageView>(Resource.Id.icon);
TitleView = FindViewById<TextView>(Resource.Id.title);
var refresh = FindViewById<Button>(Resource.Id.refresh);
var jsBtn = FindViewById<Button>(Resource.Id.js_btn);
var contentLayout = FindViewById<RelativeLayout>(Resource.Id.content_layout);

_webView = new WebView(this);
_webView.LayoutParameters =
new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);
_webView.SetWebChromeClient(new MyWebChromeClient());
_webView.Settings!.JavaScriptEnabled = true; // 允许执行js脚本
// 必须,参数一为供前端使用的对象Value(仅暴露的),参数二为供前端使用的对象Key
_webView.AddJavascriptInterface(new JavaScriptMethod(this), "Android");
_webView.LoadUrl("http://10.10.1.184:5500/");

contentLayout?.AddView(_webView);

// 监听WebView滚动
_webView.ScrollChange += (sender, args) => { JavaScriptMethod.ShowToast($"监听网页滚动 ---> {args.ScrollY}"); };

// 刷新
if (refresh != null)
refresh.Click += delegate { _webView.Reload(); };

// 调js
if (jsBtn != null)
jsBtn.Click += delegate { _webView.LoadUrl("javascript:handleAndroidFun()"); };
}

// 返回键
public override void OnBackPressed()
{
// 判断网页是否能后退,可以则后退
if (_webView.CanGoBack())
_webView.GoBack();
// 网页不能后退,则连续点击两次间隔不超过2000退出App
else
{
if (JavaSystem.CurrentTimeMillis() - _exitTime > 2000)
{
Toast.MakeText(this, "再按一次退出程序", ToastLength.Short)?.Show();
_exitTime = JavaSystem.CurrentTimeMillis();
}
else
base.OnBackPressed();
}
}

// 前端的方法类
private class JavaScriptMethod : Object
{
private static Context _context;

public JavaScriptMethod(Context context)
{
_context = context;
}

// 需要引入 Mono.Android.Export.dll
[Export("ShowToast")] // 暴露给前端的方法名称
[JavascriptInterface] // 将方法暴露给前端
public static string ShowToast(string str)
{
Toast.MakeText(_context, str, ToastLength.Short)?.Show();
return str;
}
}
}

internal class MyWebChromeClient : WebChromeClient
{
public override void OnReceivedIcon(WebView view, Bitmap icon)
{
MainActivity.IconView.SetImageBitmap(icon);
base.OnReceivedIcon(view, icon);
}

public override void OnReceivedTitle(WebView view, string title)
{
MainActivity.TitleView.Text = title;
base.OnReceivedTitle(view, title);
}
}
}


举报

相关推荐

0 条评论