65.9K
CodeProject 正在变化。 阅读更多。
Home

Windows Phone 的简单播客应用程序（HTML 和 Javascript）

Fiyaz Hasan
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2015年6月14日

CPOL

5分钟阅读

viewsIcon

9092

使用纯 HTML 和 Javascript 为 Windows Phone 构建一个简单的应用程序

引言

好了，各位技术宅，我又回来了，和大家分享一些技巧。所以在这篇文章中，我将向大家展示如何抓取一些 xml 播客源，并用这些数据制作一个简单的 Windows Phone 应用。如果你不是 Windows Phone 用户，也不用担心。这只是用了一些 JavaScript 和 Html，所以你也可以将它应用在任何支持 JavaScript 和 Html 的平台上，我想现在几乎所有平台都支持吧。好了，废话不多说，开始吧。

背景

你可以在网上找到海量的播客。这里有一些我经常听的，由 Scott Hanselman 创作的播客。

所以，让我们来抓取 hanselminutes 的源。只需访问 http://www.hanselminutes.com/，在顶部你会找到播客源的链接。

导航到那个链接，你将得到一个只有 xml 的页面。

设置项目

我们的简单应用将是一个两页的应用，第一页将列出所有播客的标题，当用户点击一个播客项时，用户将被带到第二页，在那里他可以播放和收听那个特定的播客。易如反掌！

启动 Visual Studio，并在 JavaScript Windows App 节点下快速创建一个 Windows Phone 导航应用项目。给你的项目命名，然后点击“确定”。

你的项目结构将是这样的。

如果你现在运行你的项目，你将看到一个页面，它基本上是 Windows Phone 模拟器中 pages/home/home.html 下的 html 页面。

我们想在主页的 ListView 中显示所有播客，对于详情页，让我们创建另一个页面。右键单击 pages 文件夹，创建一个新文件夹并命名为 detail。然后右键单击 detail 文件夹，添加 > 新项 > 页面控件，命名为 detail，然后点击“确定”。现在你有了两个页面。

使用代码

现在让我们转到 home.html，并将这些标记粘贴到 body 标签中 [<body></body>]。

<div class="fragment homepage">
    <header aria-label="Header content" role="banner">
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle">Welcome to Prodcasts!</span>
        </h1>
    </header>
    <section aria-label="Main content" role="main">
        <!--Item Template for WinJS ListView Control-->
        <div id="prodcastListViewTemplate" data-win-control="WinJS.Binding.Template">
            <div data-win-bind="onclick:clickFunction">
                <div class="item">
                    <h4 data-win-bind="textContent:title"></h4>
                </div>
            </div>
        </div>

        <!--WinJS ListView Control-->
        <div id="prodcastsListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#prodcastListViewTemplate'), layout:{type:WinJS.UI.ListLayout}}"></div>
    </section>
</div>

这里我有一个 WinJS ListView 控件。你可以通过指定 data-win-control 属性将任何 <div> 标签转换为 WinJS 控件。这里我将属性值设置为 WinJS.UI.ListView，这将为我们提供一个用于表示列表项的 ListView 控件。接下来我们有 data-win-options 用于设置 ListView 的一些选项。我们在这里设置了两个选项，itemTemplate 用于设置 ListView 中单个项的外观和感觉，layout 用于设置 ListView 的布局。对于第一个选项，我们将其值设置为另一个 id 为 prodcastListViewTemplate 的 div，我们用它来指定单个项的外观，对于第二个选项，我们设置了 type:WinJS.UI.ListLayout，它将以垂直堆叠的方式显示项目。还有许多其他选项可供你使用。我留给你去尝试。

最后但同样重要的是，下载 JQuery 库并将其引用添加到我们的应用中。我从这里 [ https://jqueryjs.cn/download/ ] 下载了最新的 JQuery 压缩库，并将其添加到了 js 文件夹中。最后，在 default.html 文件中像这样引用它。

好了，到了编码时间。转到 home.js 文件，在 ready 函数中粘贴下面的代码。

var items = [];

WinJS.xhr({ url: " http://feeds.podtrac.com/P-4IIgRqsKI_" }).done(function (request) {
    var response = request.responseText.trim();
    var xmlDoc = $.parseXML(response);
    var $xml = $(xmlDoc);

    $xml.find("channel > item").each(function (i, e) {
        var item = {};
        item.title = $(e).find("title").text();
        item.url = $(e).find("enclosure").attr("url");
        item.clickFunction = function (args) { WinJS.Navigation.navigate("/pages/detail/detail.html", item); }
        item.clickFunction.supportedForProcessing = true;
        items.push(item);
    });

    var prodcastList = new WinJS.Binding.List(items);
    document.getElementById("prodcastsListView").winControl.itemDataSource = prodcastList.dataSource;

}, function () {
    //onerror
}, function () {
    //progress
});

这段代码并不难理解。首先，我们创建一个空的 items 数组来保存播客项。接下来，我们需要对 xml 播客源链接进行 http GET 请求。为此，WinJS 提供了一个实用函数 WinJS.xhr。该函数接受三个回调函数，一个用于处理成功下载的内容，一个用于处理下载内容时发生的错误，最后一个用于处理下载内容的进度。要了解更多关于 WinJS.xhr 的信息，请访问此链接 [https://msdn.microsoft.com/en-us/library/windows/apps/br229787.aspx ]。在这里，在 success 回调中，我们从 request 参数中获取 responseText。然后使用 JQuery 的 ($) parseXML 函数将 responseText 解析为 xml 文档。之后，我们循环遍历 channel 节点下的 item 节点（channel > item）。find 方法中的表达式只是为了选择 channel 节点下的直接子节点。那么我们为什么要这样做呢？因为如果你仔细查看 xml，你会发现 channel 节点下有一些 item 节点，它们包含播客链接、标题、描述等。而这正是我们所需要的。所以对于 ListView 项，我们创建一个空的 item 对象，并获取单个播客所需的属性，如 title 和 url。我们还为每个项附加了一个 click 函数，用于导航到详情页并传递特定的播客对象。然后我们将对象推入 items 数组。退出 foreach 循环后，我们将整个 items 数组转换为 WinJS.Binding.List，这相当于 C# 中的 ObservableCollection。最后，我们通过 id 选择 home.html 文件中定义的 ListView 控件，并将其 itemDataSource 设置为我们新创建的 prodcastList 的 datasource。我们差不多完成了。

接下来，在详情页的 <section> 标签中添加这些标记。

<div class="detailDiv">
    <h3 id="title"></h3>
    <audio id="audioControl" controls></audio>
</div>

我们有一个 <h3> 标签用于显示播客的标题，然后有一个 html5 audio 控件（<audio></audio>）。在 detail.js 的 ready 函数中，我们有这段代码。

ready: function (element, options) {
    options = options || {};
    var title = document.getElementById("title");
    title.textContent = options.title;
    var audio = document.getElementById("audioControl");
    audio.src = options.url;
}

还记得我们点击 ListView 中的某个项时附加了导航到详情页的函数吗？所以在详情页的 ready 函数中，我们在 options 参数中获取了被点击的项（对象）。然后我们通过 id 选择 <h3> 和 <audio> 标签，并分别设置 textContent 和 src 属性。

现在如果你运行程序，你将看到如下页面，

想要获得和我应用一样粗糙的外观和感觉，请将下面的 css 粘贴到你的 home.css 文件中。

#prodcastsListView {
    height: 100%;
}

.item {
    padding: 10px;
    width: 100%;
    height: 120px;
    font-family: 'Segoe WP Semibold';
    font-size: 22px;
    color: white;
    background-color: #F5A22A;
}

关注点

好了，你现在拥有了它。希望你喜欢。要了解更多关于使用 Html 和 JavaScript 构建 Windows 应用的信息，你可以随时浏览这些视频 [http://www.microsoftvirtualacademy.com/training-courses/developing-universal-windows-apps-with-html-and-javascript-jump-start]，由 Jeremy Foster 和 Michael Palermo 制作。

© . All rights reserved.