通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目,以及怎样向项目中添加功能实现代码。
首先启动Visual Studio 2012集成开发工具,打开“文件”菜单,选择其中的“新建项目”菜单项后会弹出“新建项目”窗口。在“新建项目”窗口左侧的JavaScript模板分类中选择“Windows应用商店”,并在窗口中间的项目模板列表中选择“空白应用程序”项目模板,然后在窗口下方的“名称”文本框中输入项目命名AMovingBall,点击“新建项目”窗口右下角的“确定”按钮完成项目创建。
完成项目的创建之后打开“解决方案资源管理器”窗口,可以发现项目中已经默认包含了一些文件夹和文件,本示例将会用到项目根目录下的default.html文件和js文件夹中的default.js文件。
首先在default.html文件中设计应用程序的前台界面,打开default.js文件可以发现,文件中已经默认包含了对WinJS库文件以及default.js、default.css文件的引用。在body元素内添加一个画布元素,并将id属性值设置为AnimationCanvas。相应的HTML代码片段如下所示:
<body>
<canvas >小球运动效果图