Xamarin.Forms WebView

本文轉載自查看原文 2016-04-27 21:41 2391

目前本地或網絡的網頁內容和文件加載

WebView是在您的應用程序顯示Web和HTML內容的視圖。不像OpenUri，這需要用戶在Web瀏覽器的設備上，WebView中顯示您的應用程序內的HTML內容。

本指南由以下幾部分組成：

內容 - web視圖支持各種內容源，包括嵌入的HTML，網頁和HTML字符串。
導航 -網頁視圖包括導航到特定頁面，回到主頁。
活動 –監聽並通過在WebView中用戶所采取的行動作出回應。
性能 -了解的WebView的每個平台上的性能特點。
權限 -了解如何設置權限，這樣的WebView將在您的應用程序工作。
布局 -的WebView有它是如何奠定了一些非常特殊的要求。學習如何正確地確定的WebView顯示：

內容
WebView中附帶了以下類型的內容支持：
HTML和CSS網站 - 的WebView有使用HTML和CSS編寫的網站，包括支持JavaScript的全力支持。
文檔 - 因為WebView中使用每個平台上本地組件實現的WebView能夠顯示是每個平台上查看文件。這意味着.PDF適用於iOS和Android，但不是的Windows Phone。
HTML字符串 - 網頁視圖可以顯示從內存中的HTML字符串。
本地文件 - 上方內嵌在應用中的WebView可以提出任何內容類型。
注：WebView在Windows和Windows Phone不支持的Silverlight，Flash或任何ActiveX控件，即使它們被完整的Internet Explorer在該平台上的支持。
網站
從網上顯示的網站中，設置的WebView的來源屬性為一個字符串網址：
var browser = new WebView {
Source = "http://xamarin.com"
};
注 - URL必須以指定的協議完全形成（即它必須具備的"http：//"或"https：//"前綴）。
iOS和ATS
自9版，iOS版將只允許您的應用程序與默認情況下采用最佳實踐的安全服務器進行通信。值必須在設定的Info.plist以實現與不安全的服務器進行通信。
注意：如果您的應用需要到不安全網站的連接，你應該總是輸入域使用異常NSExceptionDomains改運ATS完全關閉使用NSAllowsArbitraryLoads。NSAllowsArbitraryLoads應只有在極端緊急情況下使用。
以下說明如何使特定域（在這種情況下xamarin.com）繞過ATS要求：
```
<key>NSAppTransportSecurity</key> 
```
```
<dict> 
```
```
<key>NSExceptionDomains</key> 
```
```
<dict> 
```
```
<key>xamarin.com</key> 
```
```
<dict> 
```
```
<key>NSIncludesSubdomains</key> 
```
```
<true/> 
```
```
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> 
```
```
<true/> 
```
```
<key>NSTemporaryExceptionMinimumTLSVersion</key> 
```
```
<string>TLSv1.1</string> 
```
```
</dict> 
```
```
</dict> 
```
```
</dict> 
```
這是只啟用某些領域繞過ATS，讓您同時從非信任域的額外的安全性中獲益使用受信任的站點的最佳實踐。下面演示禁用ATS為應用程序的安全性較低的方法：
```
<key>NSAppTransportSecurity</key> 
```
```
<dict> 
```
```
<key>NSAllowsArbitraryLoads 
```
```
</key> 
```
```
<true/> 
```
```
</dict> 
```
見應用傳輸安全有關的iOS 9這項新功能的詳細信息。
HTML字符串
如果你想展示在代碼中動態定義的HTML的字符串，你需要創建一個實例HtmlWebViewSource：
var browser = new WebView ();
var htmlSource = new HtmlWebViewSource ();
htmlSource. Html = @" < html > < body >
< h1 > Xamarin . Forms < / h1 >
< p > Welcome to WebView . < / p >
< / body > < / html > ";
browser. Source = htmlSource;

在上面的代碼中，@是用來標記HTML作為一個字符串，這意味着所有常見的轉義字符被忽略。
本地HTML內容
web視圖可以顯示嵌入到應用程序中的HTML，CSS和Javascript的內容。例如：
<html>
<head>
<title>Xamarin Forms</title>
</head>
<body>
<h1>Xamrin.Forms</h1>
<p>This is an iOS web page.</p>
<img src="XamarinLogo.png" />
</body>
</html>
CSS:
html,body {
margin:0;
padding:10;
}
body,p,h1 {
font-family: Chalkduster;
}
注意，在上述的CSS中指定的字體將需要被定制為每個平台，因為不是每個平台具有相同的字體。

注：目前在Xamarin.Forms一個bug，使得本地的HTML內容無法在Windows上顯示。這不會影響的Windows Phone。見Bugzilla的更多信息，以及最新的狀態。
要使用顯示本地內容WebView，你需要打開HTML文件像任何其他，然后加載的內容作為串入的Html的HtmlWebViewSource。有關打開文件的詳細信息，請參閱處理文件。
雖然我們已經加載的第一頁時，WebView沒有的HTML來自哪里知識。與引用本地資源的網頁打交道時是個問題。當這可能發生在包括當地頁面鏈接到對方的例子，一個頁面使用了一個單獨的JavaScript文件的，或者頁面鏈接到CSS樣式表。
為了解決這個問題，你需要告訴的WebView在哪里可以找到文件系統上的文件。做到這一點通過設置BASEURL對房地產HtmlWebViewSource被使用的WebView。
因為在每個操作系統的文件系統是不同的，你需要確定每個平台上的網址。Xamarin.Forms公開DependencyService在每個平台上運行時的解決依賴。
要使用DependencyService，首先定義可以在每個平台上實現的接口：
```
Public interface IBaseUrl 
```
```
{ 
```
```
    String Get(); 
```
```
} 
```
```
                            
					
```
需要注意的是，直到接口各平台上實現，應用程序將無法運行。在共同的項目，請務必記得設置BASEURL使用DependencyService：
```
var source = new HtmlWebViewSource(); 
```
```
source.BaseUrl = DependencyService.Get<IBaseUrl>().Get(); 
```
```
                            
					
```
從這里，你需要提供每個平台項目中的接口的實現：
iOS版
```
[assembly: Dependency (typeof (BaseUrl_iOS))] 
```
```
Namespace WorkingWithWebview.iOS 
```
```
{ 
```
```
    Public class BaseUrl_iOS : IBaseUrl 
```
```
    { 
```
```
        Public string Get() 
```
```
        { 
```
```
        Return NSBundle.MainBundle.BundlePath; 
```
```
     } 
```
```
 } 
```
```
} 
```
```
                            
					
```
該網站的內容應位於項目的根目錄或資源與生成操作目錄BundleResource，如下所示：

Android版
在Android上，地方HTML，CSS，以及與構建行動Assets文件夾圖片AndroidAsset如下所示：

On Android, the BaseUrl should be set to "file:///android_asset/":
```
[assembly: Dependency (typeof(BaseUrl_Android))] 
```
```
Namespace WorkingWithWebview.Android 
```
```
{ 
```
```
    Public class BaseUrl_Android : IBaseUrl 
```
```
    { 
```
```
        Public string Get() 
```
```
        { 
```
```
            Return "file:///android_asset/"; 
```
```
     } 
```
```
 } 
```
```
} 
```
```
                            
					
```
在Android上，在文件資產文件夾，也可以通過訪問Forms.Context.Assets屬性，如下面的代碼示例演示：
```
var assetManager =  Xamarin.Forms.Forms.Context.Assets; 
```
```
using ( var streamReader =  new  StreamReader (assetManager. Open ( "local.html" ))) 
```
```
{ 
```
```
        VAR HTML = StreamReader.ReadToEnd（）; 
```
```
 } 
```
```
                            
					
```
導航
WebView支持通過幾種方法和屬性，可用導航：
GoForward（） -如果CanGoForward是真實的，號召GoForward導航着下一個訪問的網頁。
GoBack的（） -如果CanGoBack是真實的，號召GoBack的將導航到最后訪問的網頁。
CanGoBack - true，如果有頁面導航回，false如果瀏覽器正處於起步URL。
CanGoForward - true如果用戶向后導航，並可以向前移動到已經訪問過的頁面。
在頁面WebView不支持多點觸摸手勢。以確保內容是移動優化和顯示，而不需要縮放是重要的。
是很常見的應用程序，以顯示一個內的鏈接網頁視圖，而不是設備的瀏覽器。在這些情況下，這是有用的，以允許正常導航，但是當用戶打回，而他們的出發鏈路上，應用程序應返回到正常程序圖。
使用內置導航的方法和屬性，以使此方案。
通過創建瀏覽器視圖的頁面開始：
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WebViewDemo.InAppDemo"
Title="In App Browser">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10">
<Button Text="Back" HorizontalOptions="StartAndExpand" Clicked="backClicked" />
<Button Text="Forward" HorizontalOptions="End" Clicked="forwardClicked" />
</StackLayout>
<WebView x:Name="Browser" WidthRequest="1000" HeightRequest="1000" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
在我們的后台代碼：
public partial class InAppDemo : ContentPage
{
//sets the URL for the browser in the page at creation
public InAppDemo (string URL)
{
InitializeComponent ();
Browser.Source = URL;
}

private void backClicked(object sender, EventArgs e)
{
//check to see if there is anywhere to go back to
if (Browser.CanGoBack) {
Browser.GoBack ();
} else { //if not, leave the view
Navigation.PopAsync ();
}
}

private void forwardClicked(object sender, EventArgs e)
{
if (Browser.CanGoForward) {
Browser.GoForward ();
}
}
}
就是這樣

活動
WebView引發兩個事件，以幫助您在狀態變化作出反應：
導航 -當的WebView開始加載了新的一頁引發的事件。
導航 -事件引發時，頁面加載和導航已停止。
如果您預計使用需要很長的時間來加載網頁，請考慮使用這些事件來實現一個狀態指示燈。例如：
我們的XAML：
< ？ xml的version = "1.0" encoding = "UTF-8" ? >
< ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
x: Class = "WebViewDemo.LoadingDemo" Title = "Loading Demo" >
< ContentPage . Content >
< StackLayout >
< Label x: Name = "LoadingLabel"
Text = "Loading..."
HorizontalOptions = "Center"
isVisible = "false" / >
< WebView x: Name = "Browser"
HeightRequest = "1000"
WidthRequest = "1000"
Navigating = "webOnNavigating"
Navigated = "webOnEndNavigating" / >
< / StackLayout >
< / ContentPage . Content >
< / ContentPage >
我們兩個事件處理程序：
void webOnNavigating (object sender, WebNavigatingEventArgs e)
{
LoadingLabel.IsVisible = true;
}

void webOnEndNavigating (object sender, WebNavigatedEventArgs e)
{
LoadingLabel.IsVisible = false;
}
這導致了以下的輸出（負荷）：

加載完成：

性能
最新進展已經看到每個受歡迎的網頁瀏覽器采用類似硬件加速渲染和JavaScript的編譯技術。不幸的是，由於安全限制，大多數的進步是不可用的了iOS-equaivalent 的WebView，UIWebView的。Xamarin.Forms 的WebView采用UIWebView的。如果這是一個問題，你需要編寫使用自定義渲染WKWebView，支持更快的瀏覽速度。需要注意的是WKWebView僅支持在iOS 8和更新。
在Android的WebView默認情況下是一樣快的內置瀏覽器。
在web瀏覽器在Windows Phone 8和Windows Phone 8.1控件不支持最新的HTML5的功能和可往往表現不佳。要注意的網站將如何在Windows Phone的顯示的WebView。這是不能夠在Internet Explorer中進行測試。
權限
為了讓WebView中工作，你必須確保權限為每個平台設置。請注意，在某些平台上，web視圖會在調試模式下工作，而不是在釋放建造。這是因為一些權限，就像那些在Android互聯網接入，默認情況下，在調試模式下設置由Xamarin工作室。
Windows Phone的8.0 -需要ID_CAP_WEBBROWSERCOMPONENT控制和ID_CAP_NETWORKING互聯網接入。
的Windows Phone 8.1 -顯示網絡內容時需要因特網（客戶端和服務器）的能力。
Android的 -需要INTERNET 顯示來自網絡的內容，只有當。當地含量要求任何特殊權限。

iOS版 -無需任何特殊權限。

布局

與大多數其他Xamarin.Forms意見，的WebView要求HeightRequest和WidthRequest包含在StackLayout或RelativeLayout的時候指定。如果你沒有指定這些屬性時，web視圖將不會呈現。

下面的例子證明，導致工作布局，渲染的WebView小號：

StackLayout 與WidthRequest＆HeightRequest：

< StackLayout >

< Label  Text = "test"  / >

< WebView  Source = "http://www.xamarin.com/"  HeightRequest = "1000"  WidthRequest = "1000"  / >

< / StackLayout >

RelativeLayout與WidthRequest＆HeightRequest的：

< RelativeLayout >

< Label  Text = "test"  RelativeLayout.XConstraint = "{ ConstraintExpression Type = Constant , Constant = 10 }"

RelativeLayout . YConstraint = "{ ConstraintExpression  Type = Constant , Constant = 20 }" / >

< WebView  Source = "http://www.xamarin.com/"  RelativeLayout . XConstraint = "{ ConstraintExpression  Type = Constant , Constant = 10 }" RelativeLayout.YConstraint = "{ ConstraintExpression  Type = Constant , Constant = 50 }"

WidthRequest = "1000"  HeightRequest = "1000"  / >

< / RelativeLayout >

AbsoluteLayout 沒有 WidthRequest＆HeightRequest：

< AbsoluteLayout >

< Label  Text = "test"  AbsoluteLayout . LayoutBounds = "0,0,100,100"  / >

< WebView  Source = "http://www.xamarin.com/"  AbsoluteLayout . LayoutBounds = "0,150,500,500"  / >

< / AbsoluteLayout >

Grid 無 WidthRequest＆HeightRequest。格是一種不需要指定所請求的高度和寬度的少數布局之一：

<Grid>

<Grid.RowDefinitions>

        <RowDefinition Height="100" />

            <RowDefinition eight="*" />

                </Grid.RowDefinitions>

                    <Label Text="test" Grid.Row="0" />

                        <WebView Source="http://www.xamarin.com/" Grid.Row="1" />

</Grid>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Xamarin.Forms WebView Xamarin.Forms——WebView技術研究 Xamarin.Forms之XAML Xamarin.Forms之異步 Xamarin.Forms之布局 Xamarin.Forms 簡介 Xamarin.Forms之ListView Xamarin.Forms之Button Xamarin.Forms之樣式 Xamarin.Forms之ToolbarItem