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

Posted 2023-03-25

【中文标题】Xamarin 移动应用开发指南 - 如何在 iOS、Android 和 UWP 的 WebView 中加载本地网站 (HTML/CSS/JS ..) [重复]

【英文标题】：Xamarin Mobile App Dev Guide - How to load a local Web Site (HTML/CSS/JS ..) in a WebView for iOS, Android & UWP [duplicate]

【发布时间】：2021-06-12 22:28:40

【问题描述】：

如何使用 WebView（Xamarin 表单）从 ios、android 和 UWP 应用程序的本地文件夹中加载和呈现由 html、CSS、JS、图像组成的网站等内容

【参考方案1】：

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

前几条一般说明：

使用 Xamarin，您可以开发适用于 iOS、Android 和 Windows 的应用程序 通用平台 (UWP)。

Xamarin 默认模板，基本上为这 3 种类型的移动应用程序和一个主项目创建一个项目。这 4 个项目的通常命名约定是： 项目名称（主） 项目名称.iOS 项目名称.Android 项目名称.UWP

设备基础项目中的文件夹结构与设备类型匹配（iOS 设备、Android 和基于 Win 10 的设备）。

让我们开始吧：

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

对于 Android 复制 WebRoot 在

“Assets”

下（将文件“Build Action”设置为

AndroidAsset

） 对于 iOS 您可以将其复制到项目根文件夹下或

"Resources"

下（将文件“构建操作”设置为

BundleResource

或

Content

>) 对于 UWP，将其复制到项目根目录下。 （将文件“构建操作”设置为

Content

）

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

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

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

使用 System.Text； 使用 Xamarin.Forms； 使用 ProjectName.Droid.Services； [程序集：依赖（typeof（RootBaseUrl_Android））] 命名空间 ProjectName.Droid.Services 公共类 RootBaseUrl_Android : IBaseUrl 公共字符串 GetUrl() 返回“文件：///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>

然后在 Views 中设置一个带有此类 BaseUrl 的 webview（即：Views -> RootPage.xaml.cs）：

... WebView rootWebView = new WebView(); var htmlSource = new HtmlWebViewSource(); htmlSource.BaseUrl = Path.Combine(DependencyService.Get().GetUrl(), "WebRoot/"); htmlSource.Html = @" 将 HTML 字符串与 href 写入 WebRoot 的 Index.html IN HERE"; rootWebView.Source = htmlSource; rootWebView.WidthRequest = 800; rootWebView.HeightRequest = 1000; StackLayout.Children.Add(rootWebView); ...

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

... var assembly = IntrospectionExtensions.GetTypeInfo(typeof(RootPage)).Assembly; 流流 = assembly.GetManifestResourceStream("YourProject.MasterWebRoot.index.html"); 字符串文本 = ""; 使用 (var reader = new StreamReader(stream)) 文本 = reader.ReadToEnd(); WebView rootWebView = new WebView(); var htmlSource = new HtmlWebViewSource(); htmlSource.BaseUrl = Path.Combine(DependencyService.Get().GetUrl(), "WebRoot/"); htmlSource.Html = 文本； 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"/>

【讨论】：

OMG 认真 Xamarin，你能不能让这更容易一些？？？ SEIROUSSSLLL!YYYY!!!!!