Windows 8.1 application (WinJS)

In the previous articles, we introduced how to use C # + XAML to implement the functions of the Windows Store App. In the next few articles, we will look at how to use Html + WinJS to complete these functions.

In this article, we use WinJS to create a simple project to see how the project is structured and what are the similarities and differences with C # And XAML projects.

First, choose template> JavaScript> Windows App Store in Visual Studio 2013 to create a blank application to see the composition of the project (for easy comparison, I put a store application using XAML on the right)

Changed

Let's take a look at the start page default.html:

WinJSAppDemo content shown here

This is a simple html structure. We can see that the file adds references to WinJS and default. js and default.css for the start page.

Let's take a look at default. js:

("use strict" app = activation ==  (args.detail.kind === (args.detail.previousExecutionState !==                            }                 =                                         

We can see that this file contains two very important methods: app. onactivated and app. oncheckpoint, which are used to process application activation and suspension respectively. Similar to OnLaunched and OnSuspending in XAML.

Note that args. setPromise (WinJS. UI. processAll (); is used to complete the WinJS. UI. processAll () operation before onactivated is completed. This operation binds the declared control to all elements and starts the control on the specified root element.

If we want to refer to the page we specified when default.htmlpage expires, what actions do we need to do, such as main.html?

First, we will create main.html related files, main.html, main. js, and main.css. The path is pages/main. There are two ways to complete the redirection:

(1) Specify the jump page in default.html

First, modify default. js as follows:

 nav = ui = WinJS.UI;

Two variables are defined above, and the following code is added to the onactivated method to replace them.Args. setPromise (WinJS. UI. processAll ());

 p = ui.processAll().then( nav.navigate(nav.location ||

Add the following content to the body of the default.html page.

In this case, you can define the display of main.html at startup.
(2) Specify the redirection in default. js

Modify default. js as follows

 nav = WinJS.Navigation;

Define the nav variable. Add the following code to the onactivated method to replace args. setPromise (WinJS. UI. processAll ());

 p = nav.navigate("/pages/main/main.html"

Then add the following method

    nav.onnavigated =  contentHost ="#contenthost"=

Add the following content to the default.html File

This completes the requirement that the page should be synchronized to main.html at startup.

 

Now, we have created a simple project using WinJS and Html. Next, we will use WinJS to demonstrate other functions described in XAML. Thank you.