目录:
WebViewNativeApi.cs 文件中的代码实现了一个 NativeBridge 类，用于在 .NET MAUI 应用程序中的 WebView 和本地代码之间进行通信。以下是该代码的工作原理说明：
通过这种方式，NativeBridge 类实现了在 .NET MAUI 应用程序中的 WebView 和本地代码之间的双向通信。
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Text.Json;
using System.Text.RegularExpressions;
namespace WebViewNativeApi;
///
/// NativeBridge 类, 用于在 .NET MAUI 应用程序中的 WebView 和本地代码之间进行通信, 主要负责在 WebView 和本地代码之间建立桥梁
///
public class NativeBridge
{
///
/// 默认的 URL scheme，用于识别本地调用
///
private const string DEFAULT_SCHEME = "native://";
///
/// JavaScript 代码，用于在 WebView 中创建一个代理对象，通过该对象可以调用本地方法
///
private const string INTERFACE_JS = "window['createNativeBridgeProxy'] = " +
"(name, methods, properties, scheme = '" + DEFAULT_SCHEME + "') =>" +
"{" +
" let apiCalls = new Map();" +
"" +
" function randomUUID() {" +
" return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c =>" +
" (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16));" +
" }" +
"" +
" function createRequest(target, success, reject, argumentsList) {" +
" let uuid = randomUUID();" +
" while(apiCalls.has(uuid)) { uuid = randomUUID(); };" +
" apiCalls.set(uuid, { 'success': success, 'reject': reject, 'arguments': argumentsList });" +
" location.href = scheme + name + '/' + target + '/' + uuid + '/';" +
" }" +
"" +
" return new Proxy({" +
" getArguments : (token) => {" +
" return apiCalls.get(token).arguments;" +
" }," +
" returnValue : (token, value) => {" +
" let ret = value;" +
" try { ret = JSON.parse(ret); } catch(e) { };" +
" let callback = apiCalls.get(token).success;" +
" if (callback && typeof callback === 'function')" +
" callback(ret);" +
" apiCalls.delete(token);" +
" }," +
" rejectCall : (token, error) => {" +
" let callback = apiCalls.get(token).reject;" +
" if (callback && typeof callback === 'function')" +
" callback(error);" +
" apiCalls.delete(token);" +
" }" +
" }," +
" {" +
" get: (target, prop, receiver) => {" +
" if (methods.includes(prop)) {" +
" return new Proxy(() => {}, {" +
" apply: (target, thisArg, argumentsList) => {" +
" return new Promise((success, reject) => {" +
" createRequest(prop, success, reject, argumentsList);" +
" });" +
" }" +
" });" +
" }" +
" if (!properties.includes(prop)) {" +
" return Reflect.get(target, prop, receiver);" +
" }" +
" return new Promise((success, reject) => {" +
" createRequest(prop, success, reject, []);" +
" });" +
" }," +
" set: (target, prop, value) => {" +
" return new Promise((success, reject) => {" +
" createRequest(prop, success, reject, [value]);" +
" });" +
" }" +
" });" +
"};";
///
/// WebView 控件的引用
///
private readonly WebView? _webView = null;
///
/// 用于存储本地对象的字典,存储目标对象及其名称和 scheme
///
private readonly Dictionary _targets = [];
///
/// 是否已经初始化
///
private bool _isInit = false;
///
/// 存储当前的查询信息
///
private (string?, string?, string?, object?) _query = ("", "", "", null);
///
/// 存储上一次导航的域名
///
private string? lastDomain;
///
/// 存储要注入的目标 JavaScript 代码
///
public string? TargetJS;
///
/// 构造函数，初始化 WebView 并注册导航事件
///
///
public NativeBridge(WebView? wv)
{
if (wv != null)
{
_webView = wv;
_webView.Navigated += OnWebViewInit;
_webView.Navigating += OnWebViewNavigatin;
}
}
///
/// 添加目标对象及其名称和 scheme
///
///
///
///
public void AddTarget(string name, object obj, string sheme = DEFAULT_SCHEME)
{
if (obj == null)
{
return;
}
_targets.Add((name, sheme), obj);
if (_isInit)
{
AddTargetToWebView(name, obj, sheme);
}
}
///
/// WebView 初始化事件处理程序,在 WebView 导航完成后调用，注入 JavaScript 代码并初始化目标对象。
///
///
///
private async void OnWebViewInit(object? sender, WebNavigatedEventArgs e)
{
var currentDomain = new Uri(e.Url).Host;
if (lastDomain != currentDomain)
{
_isInit = false;
lastDomain = currentDomain;
}
else
{
var isInjected = await RunJS("window.dialogs !== undefined");
if (isInjected == "false")
{
_isInit = false;
}
}
if (!_isInit)
{
_ = await RunJS(INTERFACE_JS);
if (TargetJS != null)
{
_ = await RunJS(TargetJS);
}
foreach (KeyValuePair entry in _targets)
{
AddTargetToWebView(entry.Key.Item1, entry.Value, entry.Key.Item2);
}
_isInit = true;
}
}
///
/// WebView 导航事件处理程序,在 WebView 导航时调用，根据 URL 判断是否调用本地方法。
///
///
///
private void OnWebViewNavigatin(object? sender, WebNavigatingEventArgs e)
{
if (!_isInit)
{
return;
}
foreach (KeyValuePair entry in _targets)
{
var startStr = entry.Key.Item2 + entry.Key.Item1;
if (!e.Url.StartsWith(startStr))
{
continue;
}
var request = e.Url[(e.Url.IndexOf(startStr) + startStr.Length)..].ToLower();
request = request.Trim(['/', '\']);
var requestArgs = request.Split('/');
if (requestArgs.Length
{
RunCommand(_query.Item1, _query.Item2, _query.Item3, _query.Item4);
_query = ("", "", "", null);
});
return;
}
}
///
/// 将目标对象的方法和属性注入到 WebView 中。
///
///
///
///
private void AddTargetToWebView(string name, object obj, string sheme)
{
var type = obj.GetType();
var methods = new List();
var properties = new List();
foreach (MethodInfo method in type.GetMethods())
{
methods.Add(method.Name);
}
foreach (PropertyInfo p in type.GetProperties())
{
properties.Add(p.Name);
}
RunJS("window." + name + " = window.createNativeBridgeProxy('" + name + "', " + JsonSerializer.Serialize(methods) + ", " +
JsonSerializer.Serialize(properties) + ", '" + sheme + "');");
}
///
/// 判断方法是否为异步方法
///
///
///
/// 调用本地方法,执行本地方法或属性访问，并将结果返回给 WebView
///
///
///
///
///
private async void RunCommand(string name, string token, string prop, object obj)
{
try
{
var type = obj.GetType();
var readArguments = await RunJS("window." + name + ".getArguments('" + token + "');");
var jsonObjects = JsonSerializer.Deserialize(Regex.Unescape(readArguments ?? ""));
var method = type.GetMethod(prop);
if (method != null)
{
var parameters = method.GetParameters();
var arguments = new object[parameters.Length];
if (jsonObjects != null && jsonObjects.Length > 0)
{
foreach (var arg in parameters)
{
if (jsonObjects.Length 0)
{
propety.SetValue(obj, jsonObjects[0].Deserialize(propety.PropertyType));
}
var result = JsonSerializer.Serialize(propety.GetValue(obj, null));
await RunJS("window." + name + ".returnValue('" + token + "', " + result + ");");
}
else
{
await RunJS("window." + name + ".rejectCall('" + token + "', 'Member not found!');");
}
}
}
catch (Exception e)
{
var error = e.Message + " (" + e.GetHashCode().ToString() + ")";
error = error.Replace("\n", " ");
error = error.Replace("n", " ");
error = error.Replace(""", """);
await RunJS("window." + name + ".rejectCall('" + token + "', '" + error + "');");
}
}
///
/// 发送自定义事件到 WebView
///
///
///
///
///
///
/// ? detail = null, bool optBubbles = false, bool optCancelable = false, bool optComposed = false)
{
List opts = [];
if (optBubbles)
{
opts.Add("bubbles: true");
}
if (optCancelable)
{
opts.Add("cancelable: true");
}
if (optComposed)
{
opts.Add("composed: true");
}
if (detail != null)
{
opts.Add("detail: " + JsonSerializer.Serialize(detail));
}
var optsStr = (opts.Count > 0 ? ", { " + string.Join(", ", opts) + " }" : "");
await RunJS("const nativeEvent = new CustomEvent('" + type + "'" + optsStr + "); document.dispatchEvent(nativeEvent);");
}
///
/// 在 WebView 中执行 JavaScript 代码
///
///
/// RunJS(string code)
{
if (_webView == null)
{
return Task.FromResult(null);
}
return _webView.Dispatcher.DispatchAsync(() =>
{
var resultCode = code;
if (resultCode.Contains("\n") || resultCode.Contains('n'))
{
resultCode = "console.error('Called js from native api contain new line symbols!')";
}
else
{
resultCode = "try { " + resultCode + " } catch(e) { console.error(e); }";
}
var result = _webView.EvaluateJavaScriptAsync(resultCode);
return result;
});
}
}
FreeSql QQ群：4336577
BA & Blazor QQ群：795206915
Maui Blazor 中文社区 QQ群：645660665
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow（包含链接： https://github.com/densen2014 ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 。
本文来自博客园，作者：周创琳 AlexChow，转载请注明原文链接：https://www.cnblogs.com/densen2014/p/18638327
今日头条 | 博客园 | 知乎 | Gitee | GitHub
登录查看全部
参与评论
手机查看
返回顶部