Jquery无法运行Windows Universal App

时间:2016-12-30 21:55:52

标签: javascript jquery win-universal-app winjs

这不重复,因为这与引用的链接无关,因为这是一个基于Windows的应用程序,并且与脚本的位置无关,因为这与基于Web的应用程序无关。请删除重复。

也许我只是把代码放在错误的位置,因为这是我第一次尝试开始使用JS创建Windows的通用应用程序。根据Windows开发者网站,可以使用Jquery。 https://blogs.windows.com/buildingapps/2013/07/10/jquery-and-winjs-working-together-in-windows-store-apps/#IYuzrU7FW7kC0fig.97

所以为了测试它,我做了一个标准的简单默认新项目。使用一些jquery测试代码。

我的测试Jquery代码:

$(".bodytype").on("click", function () {
    console.log('Clicked');
    $(".bodytype").css("background", "blue");
});

index.html中的html代码

  <div class="bodytype">A Row</div>

Windows应用程序中的main.js文件如下所示:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var isFirstActivation = true;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.voiceCommand) {
            // TODO: Handle relevant ActivationKinds. For example, if your app can be started by voice commands,
            // this is a good place to decide whether to populate an input field or choose a different initial view.
        }
        else if (args.detail.kind === activation.ActivationKind.launch) {
            // A Launch activation happens when the user launches your app via the tile
            // or invokes a toast notification by clicking or tapping on the body.
            if (args.detail.arguments) {
                // TODO: If the app supports toasts, use this value from the toast payload to determine where in the app
                // to take the user in response to them invoking a toast notification.
            }
            else if (args.detail.previousExecutionState === activation.ApplicationExecutionState.terminated) {
                // TODO: This application had been suspended and was then terminated to reclaim memory.
                // To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
                // Note: You may want to record the time when the app was last suspended and only restore state if they've returned after a short period.
            }
        }

        if (!args.detail.prelaunchActivated) {
            // TODO: If prelaunchActivated were true, it would mean the app was prelaunched in the background as an optimization.
            // In that case it would be suspended shortly thereafter.
            // Any long-running operations (like expensive network or disk I/O) or changes to user state which occur at launch
            // should be done here (to avoid doing them in the prelaunch case).
            // Alternatively, this work can be done in a resume or visibilitychanged handler.
        }

        if (isFirstActivation) {
            // TODO: The app was activated and had not been running. Do general startup initialization here.
            document.addEventListener("visibilitychange", onVisibilityChanged);
            args.setPromise(WinJS.UI.processAll());
        }

        isFirstActivation = false;
    };

    function onVisibilityChanged(args) {
        if (!document.hidden) {
            // TODO: The app just became visible. This may be a good time to refresh the view.
        }
    }

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
        // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
        // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    };
    //Code Here

    $(".bodytype").on("click", function () {
        console.log('Clicked');
        $(".bodytype").css("background", "blue");
    });

    //App Start Code Before
    app.start();

})();

index.html完整代码:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App3</title>
    <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>
    <link href="css/default.css" rel="stylesheet" />
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/main.js"></script>
</head>
<body class="win-type-body">
    <div class="bodytype">A Row</div>
</body>
</html>
有人可以帮我理解我做错了什么吗?没有编译错误,应用程序加载正常,但当我尝试单击该行时,背景颜色不会改变。

1 个答案:

答案 0 :(得分:1)

确保已将jQuery文件附加到html页面中

转到您的main.js并编写

window.onload = function () {

  $(".bodytype").on("click", function () {
    console.log('Clicked');
    $(".bodytype").css("background", "blue");
});

}
`

为我工作,也为您服务。