重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图-阿里云开发者社区

原文: 重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

[源码下载]

重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

作者：webabcd

介绍
重新想象 Windows 8.1 Store Apps 之控件增强

WebView 加载本地 html，智能替换 html 中的 url 引用
WebView 通过 Share Contract 分享
WebView 截图

示例
1、演示如何通过 WebView 加载本地 html, 以及智能替换 html 中的 url 引用
WebView/Local.xaml

<Page
    x:Class="Windows81.Controls.WebView.Local"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls.WebView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <Button Name="btnHtml" Content="解析指定的 html 字符串" Click="btnHtml_Click" />
            <Button Name="btnPackageHtml" Content="解析 package 中的 html" Margin="0 10 0 0" Click="btnPackageHtml_Click" />
            <Button Name="btnAppDataHtml" Content="解析 appData 中的 html" Margin="0 10 0 0" Click="btnAppDataHtml_Click" />

            <Button Name="btnSmart" Content="智能替换 html 中的 url 引用" Margin="0 10 0 0" Click="btnSmart_Click" />

            <WebView Name="webView" Width="800" Height="300" HorizontalAlignment="Left" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
    
</Page>

WebView/Local.xaml.cs

/*
 * 本例演示如何通过 WebView 加载指定的 html 字符串，加载 package 中的 html，加载 appData 中的 html
 * 还会演示如何以内容流的方式加载 html 数据，其有如下作用：
 * 1、可以实现完全从本地加载全部页面数据（包括 html，js，css，图片等）
 * 2、可以实现智能替换 html 中的 url 引用
 * 
 * WebView - 内嵌浏览器
 *     
 * 
 * 提示：
 * 在 win8 中 WebView 会挡住所有元素（包括 AppBar），而在 win8.1 中不会再有这种情况了
 * 如果想看看 win8 中全屏 WebView 如何不挡 AppBar，以及如何使用 WebViewBrush 以达到不遮挡其他元素的目的，请参看：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html
 * 
 * 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html
 */

using System;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Storage;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.Web;
using Windows.Web.Http;

namespace Windows81.Controls.WebView
{
    public sealed partial class Local : Page
    {
        public Local()
        {
            this.InitializeComponent();
        }

        private void btnHtml_Click(object sender, RoutedEventArgs e)
        {
            // 解析指定的 html 字符串
            webView.NavigateToString("<html><body>I am webabcd</body></html>");
        }

        private void btnPackageHtml_Click(object sender, RoutedEventArgs e)
        {
            // 解析 package 中的 html
            string url = "ms-appx-web:///Controls/WebView/HtmlDemo.html";
            webView.Navigate(new Uri(url));
        }

        private async void btnAppDataHtml_Click(object sender, RoutedEventArgs e)
        {
            // 将程序包内的 html 文件复制到 ApplicationData 中的 LocalFolder
            StorageFolder localFolder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("webabcdTest", CreationCollisionOption.OpenIfExists);
            StorageFile htmlFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Controls/WebView/HtmlDemo.html"));
            await htmlFile.CopyAsync(localFolder, "HtmlDemo.html", NameCollisionOption.ReplaceExisting);

            // 解析 appData 中的 html
            string url = "ms-appdata:///local/webabcdTest/HtmlDemo.html";
            webView.Navigate(new Uri(url));
        }


        // 以内容流的方式加载 html 数据
        // 智能替换 html 中的 url 引用
        // 在本例中，html 页面来自本地，html 中的引用来自远程
        private void btnSmart_Click(object sender, RoutedEventArgs e)
        {
            // 构造可传递给 NavigateToLocalStreamUri() 的 URI
            Uri url = webView.BuildLocalStreamUri("contentIdentifier", "/Controls/WebView/HtmlDemo.html");
            // 实例化一个实现 IUriToStreamResolver 接口的类
            StreamUriWinRTResolver myResolver = new StreamUriWinRTResolver();

            // 所有 url（包括 html 的 url 以及 html 内所有引用的 url）都会通过 StreamUriWinRTResolver 来返回数据流
            webView.NavigateToLocalStreamUri(url, myResolver);
        }
    }

    // 实现 IUriToStreamResolver 接口（用于将 url 以内容流的方式返回）
    public sealed class StreamUriWinRTResolver : IUriToStreamResolver
    {
        // IUriToStreamResolver 接口只有一个需要实现的方法
        // 根据 uri 返回对应的内容流
        public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri)
        {
            string path = uri.AbsolutePath;
            return GetContent(path).AsAsyncOperation();
        }

        // 根据 uri 返回对应的内容流
        private async Task<IInputStream> GetContent(string path)
        {
            string url;

            // 按需求修改 url 引用
            if (path == "/Controls/WebView/HtmlDemo.html")
                url = "ms-appx://" + path;
            else
                url = "http://ajax.googleapis.com" + path;

            if (url.StartsWith("http"))
            {
                // http 方式获取内容数据
                HttpResponseMessage response = await new HttpClient().GetAsync(new Uri(url), HttpCompletionOption.ResponseHeadersRead);
                return await response.Content.ReadAsInputStreamAsync();
            }
            else
            {
                // 获取本地数据
                StorageFile fileRead = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(new Uri(url, UriKind.Absolute));
                return await fileRead.OpenAsync(FileAccessMode.Read);
            }
        }
    }
}

本地 Html:
WebView/HtmlDemo.html

<!--此 html 用于演示如何通过 WebView 加载本地 html，以及如何以内容流的方式加载 html 数据-->

<!doctype html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p>i am html2</p>
    <p id="lblMsg"></p>
    <script type="text/javascript">
        document.getElementById("lblMsg").innerHTML = window.jQuery;
    </script>
</body>
</html>

2、演示如何通过 Share Contract 分享 WebView 中的内容（复制到剪切板也是同理）
WebView/Share.xaml

<Page
    x:Class="Windows81.Controls.WebView.Share"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls.WebView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <Button Name="btnShare" Content="通过 Share Contract 分享 WebView 中的被选中的文本内容" Click="btnShare_Click" />

            <WebView Name="webView" Width="400" Height="300" Source="http://webabcd.cnblogs.com/" HorizontalAlignment="Left" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

WebView/Share.xaml.cs

/*
 * 本例演示如何通过 Share Contract 分享 WebView 中的内容（复制到剪切板也是同理）
 * 
 * WebView - 内嵌浏览器
 *     CaptureSelectedContentToDataPackageAsync() - 获取 DataPackage 对象
 *     DataRequested - 共享操作开始时触发的事件（事件参数 DataRequestedEventArgs）
 * 
 * DataRequestedEventArgs - 共享操作开始时触发的事件
 *     GetDeferral() - 获取异步操作对象，同时开始异步操作，之后通过 Complete() 通知完成异步操作
 * 
 * 关于 DataPackage 等共享相关的知识点请参见：http://www.cnblogs.com/webabcd/archive/2013/07/04/3171085.html
 * 
 * 
 * 
 * 提示：
 * 在 win8 中 WebView 会挡住所有元素（包括 AppBar），而在 win8.1 中不会再有这种情况了
 * 如果想看看 win8 中全屏 WebView 如何不挡 AppBar，以及如何使用 WebViewBrush 以达到不遮挡其他元素的目的，请参看：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html
 *
 * 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html
 */

using System;
using Windows.ApplicationModel.DataTransfer;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows81.Controls.WebView
{
    public sealed partial class Share : Page
    {
        private DataTransferManager _dataTransferManager;

        public Share()
        {
            this.InitializeComponent();
        }

        private void btnShare_Click(object sender, RoutedEventArgs e)
        {
            _dataTransferManager = DataTransferManager.GetForCurrentView();
            _dataTransferManager.DataRequested += _dataTransferManager_DataRequested;

            DataTransferManager.ShowShareUI();
        }

        // 分享 WebView 中的被选中的文本内容
        async void _dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
        {
            DataRequest request = args.Request;
            DataRequestDeferral deferral = args.Request.GetDeferral();

            DataPackage dataPackage = await webView.CaptureSelectedContentToDataPackageAsync();
            DataPackageView dataPackageView = dataPackage.GetView();

            // 如果用户选择了一段内容，则通过 WebView.CaptureSelectedContentToDataPackageAsync() 获取到的数据里就会有 StandardDataFormats.Text 格式的内容，此内容就是用户所选中的内容
            if (dataPackageView.Contains(StandardDataFormats.Text))
            {
                dataPackage.Properties.Title = "Title";
                dataPackage.Properties.Description = "Description";

                request.Data = dataPackage;
            }
            else
            {
                request.FailWithDisplayText("没有选中任何内容");
            }

            _dataTransferManager.DataRequested -= _dataTransferManager_DataRequested;

            deferral.Complete();
        }
    }
}

3、演示如何对 WebView 中的内容截图
WebView/Capture.xaml

<Page
    x:Class="Windows81.Controls.WebView.Capture"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls.WebView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <Button Name="btnCapture" Content="对此 WebView 中的当前内容截图" Click="btnCapture_Click" />

            <WebView Name="webView" Width="400" Height="300" Source="http://webabcd.cnblogs.com/" HorizontalAlignment="Left" Margin="0 10 0 0" />

            <StackPanel Margin="0 10 0 0" Orientation="Horizontal">
                <Image Name="imageOriginal" Width="400" Height="300" HorizontalAlignment="Left" />
                <Image Name="imageSmall" Width="400" Height="300" HorizontalAlignment="Left" Margin="10 0 0 0" />
            </StackPanel>

        </StackPanel>
    </Grid>
</Page>

WebView/Capture.xaml.cs

/*
 * 本例演示如何对 WebView 中的内容截图
 * 
 * WebView - 内嵌浏览器
 *     
 * 
 * 提示：
 * 在 win8 中 WebView 会挡住所有元素（包括 AppBar），而在 win8.1 中不会再有这种情况了
 * 如果想看看 win8 中全屏 WebView 如何不挡 AppBar，以及如何使用 WebViewBrush 以达到不遮挡其他元素的目的，请参看：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html
 * 
 * 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html
 */

using System;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Graphics.Imaging;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

namespace Windows81.Controls.WebView
{
    public sealed partial class Capture : Page
    {
        public Capture()
        {
            this.InitializeComponent();
        }

        private async void btnCapture_Click(object sender, RoutedEventArgs e)
        {
            // 对 WebView 中的内容截图，并将原始图像数据放入内存流
            InMemoryRandomAccessStream ms = new InMemoryRandomAccessStream();
            await webView.CapturePreviewToStreamAsync(ms);

            // 显示原始截图
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.SetSource(ms);
            imageOriginal.Source = bitmapImage;



            // 定义缩略图的大小（最长边定义为 180）
            int longlength = 180, width = 0, height = 0;
            double srcwidth = webView.ActualWidth, srcheight = webView.ActualHeight;
            double factor = srcwidth / srcheight;
            if (factor < 1)
            {
                height = longlength;
                width = (int)(longlength * factor);
            }
            else
            {
                width = longlength;
                height = (int)(longlength / factor);
            }

            // 显示原始截图的缩略图
            BitmapSource small = await resize(width, height, ms);
            imageSmall.Source = small;
        }

        // 返回指定原图的缩略图数据
        private async Task<BitmapSource> resize(int width, int height, IRandomAccessStream source)
        {
            WriteableBitmap small = new WriteableBitmap(width, height);
            BitmapDecoder decoder = await BitmapDecoder.CreateAsync(source);
            BitmapTransform transform = new BitmapTransform();
            transform.ScaledHeight = (uint)height;
            transform.ScaledWidth = (uint)width;
            PixelDataProvider pixelData = await decoder.GetPixelDataAsync(
                BitmapPixelFormat.Bgra8,
                BitmapAlphaMode.Straight,
                transform,
                ExifOrientationMode.RespectExifOrientation,
                ColorManagementMode.DoNotColorManage);
            pixelData.DetachPixelData().CopyTo(small.PixelBuffer);

            return small;
        }
    }
}

OK
[源码下载]

重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

热门文章

最新文章

相关课程

相关电子书

相关实验场景