我用这个例子创建了一个混合web视图实现，以便在我的。net Maui应用程序和将在web视图中运行的JavaScript应用程序之间实现双向通信。
我有一个index.html页面坐在Resources/Raw/InteractiveMap文件夹，需要加载额外的JavaScript文件。index.html看起来像这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Map</title>
</head>
<body>
<div id="app" style="width: 100%;height:100%">
<div style="width: 100%;height:100%">
<div id="mapTarget"></div>
</div>
</div>
<script src="./map/map.js"></script>
<script>
let target = document.getElementById("mapTarget");
let map = new OdysseyMap(target);
</script>
</body>
</html>
我在应用程序中加载上面的html文件，像这样:
var htmlFile = FileSystem.OpenAppPackageFileAsync("InteractiveMap/index.html").Result;
using var reader = new StreamReader(htmlFile);
var contents = reader.ReadToEnd();
MapView.Source = new HtmlWebViewSource()
{
Html = contents
};
如果我在本地机器上的浏览器中打开HTML文件，它运行得很好。然而，一旦我将其部署到android模拟器和web视图加载它，我在控制台中得到以下错误(连接Chrome远程调试器后):
Uncaught ReferenceError: OdysseyMap is not defined at about:blank:47:19
仅供参考，奥德赛地图是一个类定义在脚本文件在./map/map.js:
class OdysseyMap {
...
}
如果我尝试包含任何其他js文件，它们定义的全局变量也不可用。似乎web视图没有加载本地脚本文件(但控制台没有其他错误，所以我无法确认这一点)。
我需要做些什么来允许web视图能够访问这些文件吗?
好的，所以你需要设置WebView的基本路径，以便知道从哪里加载JavaScript文件。你可以在为WebView设置源时这样做:
var htmlFile = FileSystem.OpenAppPackageFileAsync("InteractiveMap/index.html").Result;
using var reader = new StreamReader(htmlFile);
var contents = reader.ReadToEnd();
MapView.Source = new HtmlWebViewSource()
{
Html = contents,
BaseUrl = "file:///android_asset/InteractiveMap/" //set this to the folder the HTML file is loaded from
};
设置后，它正确加载文件。