Summary of changes to the Metro application (HTML5 + JavaScript) after Windows 8 consumer preview is upgraded to release Preview

When Win8 came out, he participated in an activity and wrote an app. After that, Microsoft had nothing to worry about, recently, the system has been upgraded from consumer preview to release preview, and VS has also been upgraded After Visual Studio 2012 RC, I found that the original app could not run, so I had to wait for a while before OK. Now I want to make a summary, hoping to help my friends who encountered the same problem.

I. winjs version Modification

In Windows 8 consumer preview, winjs is version 0.6, and in release preview, winjs is version 1.0. Therefore, you need to upgrade winjs in the project.

This is relatively simple, everyone directly according to the official steps to do OK: http://msdn.microsoft.com/en-us/library/windows/apps/JJ126963.aspx

In rare cases, you do not have winjs 1.0 in vs2012:

In this case, it indicates that your vs is not properly installed, and the fix and installation will be OK.

2. Modify the Page Status of full screen, half screen, and small screen

The problem I encountered here isProgramIt will be gone in a flash and cannot be opened.

The solution is:

Appview. getforcurrentview (). onviewstatechanged =This. _ Viewstatechanged. BIND (This);
 

Changed:

 
Window. onresize =This. _ Viewstatechanged. BIND (This);
 

The above scheme comes from: http://social.msdn.microsoft.com/Forums/et-EE/winappswithhtml5/thread/d02bf608-675d-4676-a4ec-3ccbc64671f1

However, it is not perfect to change this part, because this file containsCode. So we need to put this line of code later:

 
_ Viewstatechanged:Function(Eventobject ){(This. _ Updatelayout. BIND (This. Pagecontrol ))(This. Pageelement, eventobject. viewstate );},
 

Change to (or directly Add the following code ):

 
_ Resized:Function(ARGs ){If(This. Pagecontrol &&This. Pagecontrol. updatelayout ){This. Pagecontrol. updatelayout. Call (This. Pagecontrol,
This. Pageelement, appview. value,This. Lastviewstate );}This. Lastviewstate =Appview. value ;},
 

3. Modify the share function code

Because my application provides the share function on each detail page, if your application does not have this function, you do not need to read this one.

The symptom of this error is that the second page with the share function (or this page is opened twice) will show an error similar to the following:

• Script14: Exception was thrown but not handled in user code at line 112, column 17 in MS-appx: // 3fa1d0d0-fb4a-48c6-8e10-f40028f54bc3/JS/itemdetailpage. js
  0x8000000e-JavaScript runtime error: A method was called at an unexpected time.
  Winrt information: An event handler has already been registered
  File:Itemdetailpage. JS, line: 112 column: 17

In winjs 0.6, the share code is roughly written as follows:

 
VaRDTM =Windows. ApplicationModel. datatransfer. datatransfermanager. getforcurrentview (); DTM. addeventlistener ("Datarequested", Ondatarequested );FunctionOndatarequested (e ){VaRRequest =E. Request; request. Data. properties. Title=Item. Title; request. Data. properties. Description= "Test"; Request. Data. settext (item. content );}
 

Items in the Code are the data items bound to the current page (create a grid app project, which is available in itemdetail. JS ).

The error reported in winjs1.0 indicates that the datarequested event has been registered, so an error occurs.

At first, I tried to remove the event before adding the event, but still encountered an error. Later I wanted to find the page unload method and want to remove the event in this method, but it looks like winjs. the UI does not support this method. After trying this method for many times, it finds a new solution, that is, to add a global variable as the identifier and register it only once. ,

However, because the item in the code above is the data item bound to the current page, this makes the share data the first time the detailed page data is opened and will not be changed. Finally, change item. Title and item. content to get from the page. The Code is as follows:

 VaR DTM = Windows. ApplicationModel. datatransfer. datatransfermanager. getforcurrentview ();  If (! Isdatarequested) {DTM. addeventlistener ( "Datarequested" , Ondatarequested); isdatarequested = True  ;}  Function Ondatarequested (e ){  VaR Request = E. Request, title = Document. queryselector ("article. item-title" ). Textcontent, content = Document. queryselector ("article. item-content. Content" ). Textcontent; request. Data. properties. Title = Title; request. Data. properties. Description = "Test" ; Request. Data. settext (content );} 

In the code, isdatarequested is a global bool variable. The initial value is false.

The current solution can solve the problem, but I still don't quite understand why there is a duplicate registration event. If you know something, please don't hesitate to give advice.

4. Optimization of application suspension and startup Processing

Note that this is optimization, not an error, so if you do not modify it, it will not make an error.

In winjs0.6, the default. js has the following code:

 
VaRAPP =Winjs. application; app. onactivated=Function(Eventobject ){If(Eventobject. Detail. Kind =Windows. ApplicationModel. Activation. activationkind. Launch) {winjs. UI. processall ();}};
 

In winjs1.0, you should change it to the following:

 VaR APP = Winjs. Application;  VaR Activation = Windows. ApplicationModel. activation;  VaR NAV =Winjs. Navigation; winjs. strictprocessing (); app. addeventlistener ( "Activated ", Function  (ARGs ){  If (ARGs. Detail. Kind = Activation. activationkind. Launch ){  If (ARGs. Detail. previusexecutionstate! = Activation. applicationexecutionstate. Terminated ){  //  Todo: This application has been newly launched. initialize              //  Your application here. }Else  {  //  Todo: This application has been reactivated from suspension.              //  Restore application state here.  }  If  (App. sessionstate. History) {nav. History = App. sessionstate. History;} args. setpromise (winjs. UI. processall (). Then (  Function  (){  If (NAV. Location) {nav. History. Current. initialplaceholder = True  ;  Return  Nav. navigate (NAV. Location, Nav. State );}  Else  {  Return  Nav. navigate (application. Navigator. Home );}}));}});