Xamarin 移动应用开发指南 - 如何在适用于 iOS、Android 和 UWP 的 WebView 中加载本地网站 (HTML/CSS/JS ..)

如何解决Xamarin 移动应用开发指南 - 如何在适用于 iOS、Android 和 UWP 的 WebView 中加载本地网站 (HTML/CSS/JS ..)

如何使用 WebView (Xamarin Forms) 从 iOS、Android 和 UWP 应用程序的本地文件夹加载和呈现由 HTML、CSS、JS、图像组成的网站，如内容

解决方法

这是关于如何使用 WebView 从本地文件夹加载 HTML 文件及其 CSS、JS、图像 .. 并在 Xamarin 页面中显示它的快速指南。

前几个一般注意事项：

使用 Xamarin，您可以开发适用于 iOS、Android 和 Windows 的应用程序通用平台 (UWP)。
Xamarin 默认模板，基本上为这 3 种类型的移动应用程序和一个主项目创建一个项目。这 4 个项目的通常命名约定是：
项目名称（主）
项目名称.iOS
项目名称.Android
项目名称.UWP
设备基础项目中的文件夹结构与设备类型（iOS 设备、Android 和基于 Win 10 的设备）相匹配。

让我们开始吧：

1.您需要将整个网站等文件夹（我们称之为“WebRoot”）复制到每个设备基础项目中对应的位置：

对于Android，在“Assets”下复制WebRoot（将文件“Build Action”设置为AndroidAsset）
对于 iOS，您可以将其复制到项目根文件夹下或 “Resources” 下（将文件“构建操作”设置为 BundleResource 或 Content >)
对于 UWP，将其复制到项目根目录下。（将文件“构建操作”设置为内容）

最好设置一个依赖项来解析和规范每个项目中 WebRoot 的 URL Base（这将启用具有相对 url 的 href(s) 等）

向每个设备项目添加名为 Services 的文件夹，并为每个项目添加一个 C# 类：

对于 Android 项目（服务 -> RootBaseUrl_Android.cs）：


    using System.Text;
    using Xamarin.Forms;
    using ProjectName.Droid.Services;
    [assembly: Dependency(typeof(RootBaseUrl_Android))]
    namespace ProjectName.Droid.Services
    {
        public class RootBaseUrl_Android : IBaseUrl
        {
            public string GetUrl()
            {
                return "file:///android_asset/";
            }
        }
    }

对于 iOS 项目（服务 -> RootBaseUrl_iOS.cs）：

<pre>

    using Foundation;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using UIKit;
    using Xamarin.Forms;
    using ProjectName.iOS.Services;
    
    [assembly: Dependency(typeof(RootBaseUrl_iOS))]
    namespace ProjectName.iOS.Services
    {
        public class RootBaseUrl_iOS : IBaseUrl
        {
            public string GetUrl()
            {
                return NSBundle.MainBundle.BundlePath;
            }
        }
    }

</pre>

对于 UWP 项目（服务 -> RootBaseUrl_UWP.cs）：

<pre>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;
    using ProjectName.UWP.Services;
    
    
    [assembly: Dependency(typeof(RootBaseUrl_UWP))]
    namespace ProjectName.UWP.Services
    {
        public class RootBaseUrl_UWP : IBaseUrl
        {
            public string GetUrl()
            {
                return "ms-appx-web:///";
            }
        }
    }

</pre>

最后在主项目中创建接口（服务 -> IBaseUrl.cs）

<pre>

    using System;
    using System.Collections.Generic;
    using System.Text;
    
    namespace ProjectName
    {
        public interface IBaseUrl
        {
            string GetUrl();
        }
    }

</pre>

然后在视图中使用这样的 BaseUrl 设置一个 webview（即：Views -> RootPage.xaml.cs）：


      ...
      WebView rootWebView = new WebView();
      var htmlSource = new HtmlWebViewSource();
      htmlSource.BaseUrl = Path.Combine(DependencyService.Get().GetUrl(),"WebRoot/");
      htmlSource.Html = @" Write Your HTML STRING With href to Index.html of WebRoot IN HERE ";
      rootWebView.Source = htmlSource;
      rootWebView.WidthRequest = 800;
      rootWebView.HeightRequest = 1000;
      StackLayout.Children.Add(rootWebView);
      ...

通过创建 index.html 或将每个项目的 WebRoot Dir 中的 index.html 移动到主项目（让我们将此文件夹称为 MasterWebRoot 并将我们的 Index.html 放在那里），您可以做得更好，而不是编写 HTML STRING !)，您可以使用程序集 (.NET) 在 XamlPage 中引用它：


    ...
    var assembly = IntrospectionExtensions.GetTypeInfo(typeof(RootPage)).Assembly;
    Stream stream = assembly.GetManifestResourceStream("YourProject.MasterWebRoot.index.html");
    String text = "";
    using (var reader = new StreamReader(stream))
          {
              text = reader.ReadToEnd();
          }
    WebView rootWebView = new WebView();
    var htmlSource = new HtmlWebViewSource();
    htmlSource.BaseUrl = Path.Combine(DependencyService.Get().GetUrl(),"WebRoot/");
    htmlSource.Html = text;
    rootWebView.Source = htmlSource;
    rootWebView.WidthRequest = 800;
    rootWebView.HeightRequest = 1000;
    ...

通过这种方式，您将拥有一个 通用初始 index.html，它驻留在您的主项目 (.Net) 中，并带有与 WebRoot（您的本地网站文件夹）的相关副本的所有相关 href(s)驻留在每个设备的特定项目（Android、iOS 和 UWP）上。

注意1：不要忘记给WebView的WidthRequest & HeightRequest赋值，否则什么都看不到！

希望对您有所帮助，祝您愉快！

您可以阅读更多内容：
如何处理文件： https://docs.microsoft.com/en-gb/xamarin/xamarin-forms/data-cloud/data/files?tabs=windows
Xamarin 和 WebView： https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=windows

注意 2：权限：
为了让 WebView 工作，您必须确保为每个平台设置了权限。请注意，在某些平台上，WebView 将在调试模式下工作，但在为发布而构建时则不然。这是因为在调试模式下，Visual Studio for Mac 会默认设置某些权限，例如 Android 上的 Internet 访问权限。
UWP – 显示网络内容时需要 Internet（客户端和服务器）功能。
Android – 仅在显示来自网络的内容时才需要 INTERNET。本地内容不需要特殊权限。
iOS – 不需要特殊权限。

注意 3： 请注意，UWP 正在使用：源文件在网上：

<WebView x:Name="webView1" Source="http://www.contoso.com"/>

源文件在本地存储：

<WebView x:Name="webView2" Source="ms-appdata:///local/intro/welcome.html"/>

源文件在应用包中：

<WebView x:Name="webView3" Source="ms-appx-web:///help/about.html"/>