Question

在将此标记视为与其他问题不完全相同的问题的完全重复之前，请参阅下面的评论。

到目前为止，我已经尝试过像这样加载：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:Japanese;assembly=Test" 
    x:Class="Test.HelpCards" 
    x:Name="HelpCards" 
    Title="Help ▹ Cards Tab">
    <ContentPage.Content>
        <WebView x:Name="Browser" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
    </ContentPage.Content>
</ContentPage>

public HelpCards()
{
    InitializeComponent();
    var htmlSource = new HtmlWebViewSource();
    htmlSource.Html = @"<html><body>
    <h1>ABC</h1>
    <p>DEF</p>
    </body></html>";
    Browser.Source = htmlSource;
}

现在我想做同样的事情但是将HTML存储在一个文件中并拥有CSS（Android和iOS不同）。我想找到一种方法将其加载到浏览器中。

有没有人有任何关于如何做到这一点的例子。特别重要的是，在我的公共项目中只有一个HTML文件，然后在这两个项目中只有Android和iOS的CSS文件。

请注意，这与

不完全相同

Loading Local HTML with WebView Xamarin Forms

唯一重复的是标题相似。

那个问题说明：

＆＃34;只需要通过Android完成，所以不用担心IOS和Windows。＆＃34;
该问题也没有涉及常见的HTML
这个问题也没有提到关于CSS的任何内容

我不得不关闭并重新打开这个问题，因为我认为这个问题与我认为没有密切关注的人错误地标记为完全重复。请不要将其标记为完全相同的。

更新：以下是我现在遇到的问题

NSBundle.MainBundle.BundlePath;是这样的：

"/Users/alan/Library/Developer/CoreSimulator/Devices/2184643E-9C57-4CFD-A7F9-A55CBC983402/data/Containers/Bundle/Application/9C950717-4E9C-4494-BF63-DC3AC3EDDE8C/Japanese.iOS.app"

我的HTML是这样的：

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8" />
       <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        Hello again
        <h1>hihi</h1>
    </body>
</html>

我的style.css文件位于Japanese.iOS的Resources文件夹中，如下所示：

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
    font-size: 99px;
}

Answer 1

要共享html文件 - 您可以在共享PCL项目中将其注册为embedded resources。确保按名称引用特定于平台的css文件。示例html文件如下所示：
```
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css">
</head>
```
将特定于android的css文件作为asset添加到android项目
将iOS特定的css文件作为resource添加到iOS项目
引入共享项目的接口 - 用于访问特定于平台的资产/资源的路径。
```
public interface IBaseUrl { string Get(); }
```

为android实现相同的

[assembly: Dependency(typeof(AppNamespace.Droid.BaseUrl))]
namespace AppNamespace.Droid
{
    public class BaseUrl : IBaseUrl
    {
        public string Get()
        {
            return "file:///android_asset/";
        }
    }
}

适用于iOS

[assembly: Dependency(typeof(AppNamespace.iOS.BaseUrl))]
namespace AppNamespace.iOS
{
    public class BaseUrl : IBaseUrl
    {
        public string Get()
        {
            return NSBundle.MainBundle.BundlePath;
        }
    }
}

现在，您可以设置WebView使用共享的html文件，同时使用特定于平台的css - 通过BaseUrl指定。

var assembly = typeof(AppNamespace.App).GetTypeInfo().Assembly;
var stream = assembly.GetManifestResourceStream("AppNamespace.Common.html");
string html = string.Empty;
using (var reader = new System.IO.StreamReader(stream))
{
    html = reader.ReadToEnd();
}

var source = new HtmlWebViewSource()
{
    BaseUrl = DependencyService.Get<IBaseUrl>().Get(),
    Html = html
};

webView.Source = source;

我需要从文件加载HTML和CSS（不同于ANDROID和IOS）并在WebView中显示？

1 个答案: