Windows 8 Consumer Preview版升级到 Release Preview 版后Metro应用(html5+JavaScript版)修改小结

简介:

 Win8出来时参加了一个活动,写了一个APP,后来微软那边没什么动静了,就一直没怎么管了,最近系统升级从Consumer Preview版升级到 Release Preview 版,VS也升级到 Visual Studio 2012 RC 后,才发现原来的APP不能运行了,于是折腾了好一阵子才OK,现在做个小结,希望可以帮到遇到相同问题的朋友。

一、WinJS版本修改

  Windows 8 Consumer Preview版中WinJS是0.6版,Release Preview 版中WinJS是1.0版,所以要把项目中的WinJS进行升级。

  这个比较简单,大家直接按官方给出的步骤做就OK了:http://msdn.microsoft.com/en-us/library/windows/apps/JJ126963.aspx

  极少数情况下你的VS2012中没有1.0版的WinJS:

  遇到这种情况说明你的VS没有装好,修复安装就OK了。

二、满屏,半屏,还有小屏的页面状态方法的修改

  这个地方我遇到的症状就是程序闪一下就没了,不能打开。

  解决方案就是把 navigator.js 中的:

appView.getForCurrentView().onviewstatechanged = this._viewstatechanged.bind(this);

  改为:

window.onresize = this._viewstatechanged.bind(this);

  上面的方案来自:http://social.msdn.microsoft.com/Forums/et-EE/winappswithhtml5/thread/d02bf608-675d-4676-a4ec-3ccbc64671f1

  但仅仅改这一个地方是不完美的,因为这个文件里还有与这个相关的代码。所以还要把这行代码稍后的:

_viewstatechanged: function (eventObject) {
     (this._updateLayout.bind(this.pageControl))(this.pageElement, eventObject.viewState);
},

  改为(或直接添加下面这段代码也可以):

_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; },

三、Share功能代码的修改

  由于我的应用在每个详细页提供了Share功能,如果大家的应用中没有这个功能就不用看这一条了。

  这个错误的症状为打开第二个有share功能的页面(或本页面打开两次)就会出现类似下面的错误:  

  • 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

  在WinJS 0.6 版中 Share的代码大致是这样写的:

var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();

dtm.addEventListener("datarequested", onDataRequested);

function onDataRequested(e) {
    var request = e.request;
    request.data.properties.title = item.title;
    request.data.properties.description = "Test";
    request.data.setText(item.content);
}

  代码中的item是当前页面上绑定的数据项(新建一个Grid App项目,在itemDetail.js里就有)。

  在WinJS1.0里报的错大致可以看出是说 datarequested 事件已经注册了,所以会出错。

  一开始我尝试的是在添加事件之前先移除这个事件,但依然出错,后来想找到页面unload方法,想在这个方法里面移除事件,但貌似WinJS.UI不支持这个方法,试了好多次都不行后,找到了新的方案,就是添加一个全局变量作为标识,只注册一次。、

  但由于上面代码里的item是当前页面上绑定的数据项,这就导致了Share的数据是第一次打开详细页的数据,不会改变。最后直接把item.title和item.content改为从页面上获取,终于OK了,代码如下:

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);
}

  代码中的 isDatarequested 是一个全局bool变量,初始值为 false 。

  目前的方案可以解决问题,但还是不太明白为什么会出现重复注册事件问题,如果有朋友知道请不吝指点。

四、应用挂起和启动处理时的优化

  注意,这一点是优化,不是错误,所以如果你不修改也不会出错。

  在WinJS0.6版中default.js里有总分代码是这样的:

var app = WinJS.Application;
app.onactivated = function (eventObject) {
      if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 
           WinJS.UI.processAll();
      }
};

  在WinJS1.0中要改为这样:

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.previousExecutionState !== 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);
            }
        }));
    }
});




本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
8月前
|
JavaScript 前端开发
如何减少Node.js应用中的全局变量?
如何减少Node.js应用中的全局变量?
469 133
|
8月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
431 69
|
5月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
240 0
|
4月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
300 3
|
6月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
222 14
|
5月前
|
资源调度 负载均衡 JavaScript
使用PM2工具部署Vue.js应用于服务器
以上步骤完成之后,你就成功利⽤ PM⼆工具将 Vuejs 应⽰程序部署至服 务 器,并且配合反向代理实现了高效稳定访问及负载均衡功能。
244 0
|
9月前
|
前端开发 搜索推荐 JavaScript
如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用?
DIY.JS 是一款基于原生 Canvas 的业务级图形库,专注于商品定制的图形交互功能,帮助开发者轻松实现个性化设计。适用于 T 恤、手机壳等多种商品场景。它自带丰富功能,无需从零构建,快速集成到项目中。通过创建舞台、添加模型、定义 DIY 区域和添加素材四个步骤即可完成基础用法。支持在线演示体验,文档详细,易上手。
450 57
|
8月前
|
监控 算法 JavaScript
公司局域网管理视域下 Node.js 图算法的深度应用研究:拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用,针对设备互联复杂、流量调度低效及安全监控困难等问题,提出基于图论的解决方案。通过节点与边建模局域网拓扑结构,利用DFS/BFS实现设备快速发现,Dijkstra算法优化流量路径,社区检测算法识别安全风险。结合WorkWin软件实例,展示了算法在设备管理、流量调度与安全监控中的价值,为智能化局域网管理提供了理论与实践指导。
224 3
|
9月前
|
存储 JavaScript 前端开发
|
10月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~