Question

我尝试使用html5添加带有WP8.1的appbar 我用这个链接来指导我 Quickstart: Adding an app bar with commands (HTML)

但它显示了这个问题（一个错误），没有错误，因为你看到图像。 enter image description here

Answer 1

这是我的解决方案

page default.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CheckCnxInternet</title>

    <!-- WinJS references -->
    <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css 
    based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- CheckCnxInternet references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/Appbar.js"></script>
</head>
<body class="phone">
    <!-- Create AppBar -->
    <!-- BEGINTEMPLATE: Template code for an AppBar -->
    <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{closedDisplayMode:'minimal'}">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',tooltip:'Add item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}"></button>
    </div>
    <!-- ENDTEMPLATE -->
</body>
</html>

为default.js让它没有修改，没有Appbar.js的代码

(function () {
    "use strict";
    var appBar;
    var cx = new Windows.Networking.Connectivity.NetworkInformation.getInternetConnectionProfile();


    var page = WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            appBar = document.getElementById("createAppBar").winControl;
            appBar.getCommandById("cmdAdd").addEventListener("click", doClickAdd, false);
            appBar.getCommandById("cmdRemove").addEventListener("click", doClickRemove, false);
            appBar.getCommandById("cmdEdit").addEventListener("click", doClickEdit, false);
            appBar.getCommandById("cmdCamera").addEventListener("click", doClickCamera, false);


        }
    });

    // Command button functions
    function doClickAdd() {
        WinJS.log && WinJS.log("Add button pressed", "sample", "status");
    }

    function doClickRemove() {
        WinJS.log && WinJS.log("Remove button pressed", "sample", "status");
    }

    function doClickEdit() {
        WinJS.log && WinJS.log("Edit button pressed", "sample", "status");
    }

    function doClickCamera() {
        WinJS.log && WinJS.log("Camera button pressed", "sample", "status");
    }

})();

我希望它有用:)

在WP8.1 html5中添加应用栏

1 个答案: