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

Question

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

在将其标记为与未在寻找相同事物的另一个问题的完全相同之前，请先查看以下我的评论。

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

<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;
}

Run Code Online (Sandbox Code Playgroud)

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

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

请注意，这并非与完全相同

使用WebView Xamarin表单加载本地HTML

唯一重复的是标题相似。

该问题指出：

“只需要通过Android即可完成操作，因此无需担心IOS和Windows。”
这个问题也没有解决常见的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"

Run Code Online (Sandbox Code Playgroud)

我的HTML是这样的：

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

Run Code Online (Sandbox Code Playgroud)

我的style.css文件位于Japanese.iOS的Resources文件夹中，它是这样的：

body {
    background-color: lightblue;
}

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sha*_*raj 5

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

对Android实施相同

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

Run Code Online (Sandbox Code Playgroud)

对于iOS

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

Run Code Online (Sandbox Code Playgroud)

现在，您可以设置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;

Run Code Online (Sandbox Code Playgroud)

经过测试-它按预期工作。可能会出现名称不匹配的问题？您可以通过此[Github链接]（https://github.com/shads-labs/SharedHtmlWebView）访问代码。 (2认同)

归档时间：	8 年，2 月前
查看次数：	1268 次
最近记录：	8 年，2 月前