Win10系列：JavaScript 项目模板和项模板

使用Visual Studio 开发Windows应用商店应用时，通过其提供的模板可以帮助我们快速地创建一个应用。其中，在新建一个Windows应用商店应用程序项目时可以在项目模板中选择所需要的模板类型，然后在此基础上开发功能完善的应用；在项目中新建一个项目文件的时候，可以在项模板中选择所需要的文件类型，然后在这个文件内容的基础上编写新的内容。下面就来分别介绍Visual Studio 中提供的项目模板和项模板。

1. 适用于开发Windows应用商店应用的JavaScript项目模板

使用JavaScript构建Windows应用商店应用时可使用的项目模板有空白项目模板、网格项目模板、拆分布局项目模板、固定布局项目模板和导航布局项目模板。

（1）空白项目模板

使用空白项目模板可以创建一个基本的Windows应用商店应用，该应用可以直接运行，但不包含任何用户界面控件和数据。运行默认的空白项目模板应用程序时，将会看到包含"此处显示内容"文本的黑屏。在没有特殊要求的情况下，通常会使用空白项目模板来新建一个Windows应用商店项目。

使用空白项目模板新建的应用程序项目中，默认包含：

• default.html文件，表示应用程序的默认启动页面，用户新建的其他页面都可以加载到这个页面中显示。
• CSS文件夹，该文件夹内包含一个default.css文件，用于为默认启动页面和应用程序整体设计CSS样式。
• images文件夹，存放着一些图像文件，如用作开始屏图像的splashscreen.png以及用于Windows应用商店的storelogo.png等。
• js文件夹，该文件夹内包含一个default.js文件，用于实现默认启动页的逻辑功能和管理应用程序的生命周期事件。
• package.appxmanifest文件，是一个XML文件，用于对应用程序进行设定，如应用程序UI定义、功能权限、协议声明和版本打包等。
• 一个后缀名为.pfx的文件，该文件是以项目名称开头的证书文件。

在实际开发的过程中，还可以根据需要再添加一些有用的文件或文件夹，从而开发出功能完善的应用程序。

（2）网格项目模板

网格项目模板用到了为Windows应用商店应用提供的JavaScript导航模型，这种导航模型使用预定义的导航控件PageControlNavigator来实现基本的导航功能。基于此模板可以开发以网格的形式按类别显示内容的Windows应用商店项目，方便通过类别浏览来查找所需要的内容，例如开发购物应用和新闻应用等。

使用网格项目模板新建的应用程序项目中，默认包含：

• default.html文件，表示应用程序的默认启动页面，用户新建的其他页面都可以加载到这个页面中显示。
• CSS文件夹，该文件夹内包含一个default.css文件，用于为默认启动页面和应用程序整体设计CSS样式。
• images文件夹，其中的内容与空白项目模板中的相同，存放着一些应用所需的图像文件。
• js文件夹，该文件夹内包含一个default.js文件、一个navigator.js文件和一个data.js文件，default.js文件用于实现默认启动页面的逻辑功能和处理应用程序的生命周期事件，navigator.js文件实现了JavaScript导航模型，data.js文件定义了数据源，为应用程序的其余部分提供数据。
• package.appxmanifest文件，是一个XML文件，用于对应用程序进行设定，如应用程序UI定义、功能权限、协议声明和版本打包等。
• 一个后缀名为.pfx的文件，该文件是以项目名称开头的证书文件。

另外，项目中还包含一个pages文件夹，在这个文件夹内又包含三个子文件夹，分别为groupedItems、groupDetail和itemDetail。

groupedItems文件夹内包含：

• groupedItems.html文件，表示应用程序的主页面，用于显示所有的组和项目。
• groupedItems.css文件，用于为主页面设计CSS 样式。
• groupedItems.js文件，用于实现主页面的逻辑功能。

groupDetail文件夹内包含：

• groupDetail.html文件，表示组详细信息页面，在这个页面的左侧显示组的详细信息，右侧显示组内的项目。
• groupDetail.css文件，用于为组详细信息页面设计CSS样式。
• groupDetail.js文件，用于实现组详细信息页面的逻辑功能。

itemDetail文件夹内包含：

• itemDetail.html文件，表示项目详细信息页面。
• itemDetail.css文件，用于为项目详细信息页面设计CSS样式。
• itemDetail.js文件，用于实现项目详细信息页面的逻辑功能。

基于网格项目模板的应用程序项目运行时会默认显示主页面，并在主页面中按分组显示所有的项目。当在主页面中选择一个分组时，页面使用导航功能打开该组的详细信息页面，并在组详细信息页面右侧显示该组内的项目；当在主页面中或组详细信息页面中选择一个项目时，就会打开详细介绍这个项目的页面。基于网格项目模板的应用程序项目运行效果如图19-2所示。

图19-2 网格布局模板效果展示

（3）拆分布局项目模板

与网格项目模板类似，拆分布局项目模板也用到了为Windows应用商店应用提供的JavaScript导航模型，不同的是基于拆分布局项目模板的应用程序项目运行时在主页面中只显示分组，并不显示组中的项目，而且组详细信息页面的左侧显示的是组中的项目，右侧显示的是从左侧选择的项目的详细信息。基于拆分布局项目模板的应用程序项目运行效果如图19-3所示。

19-3 拆分布局模板效果展示

使用拆分布局项目模板新建的应用程序项目中，默认包含：

• default.html文件，表示应用程序的默认启动页面，用户新建的其他页面都可以加载到这个页面中显示。
• CSS文件夹，内容和作用与网格项目模板中的相同。
• images文件夹，内容和作用与网格项目模板中的相同。
• js文件夹，内容和作用与网格项目模板中的相同。
• package.appxmanifest文件，是一个XML文件，用于对应用程序进行设定，如应用程序UI定义、功能权限、协议声明和版本打包等。

另外项目中也包含一个pages文件夹，不过其中的内容与网格项目模板中的不同，在这个文件夹中包含两个文件夹，分别为items和split。

items文件夹内包含：

• items.html文件，表示应用程序的主页面，用于显示所有的组。
• items.css文件，用于为主页面设计CSS 样式。
• items.js文件，用于实现主页面的逻辑功能。

split文件夹内包含：

• split.html文件，表示组详细信息页面，在这个页面的左侧显示组中的项目，右侧用于显示从左侧选择的项目的详细信息。
• split.css文件，用于为组详细信息页面设计CSS样式。
• split.js文件，用于实现组详细信息页面的逻辑功能。

（4）固定布局项目模板

固定布局项目模板与空白项目模板效果相似，不同的是在基于固定布局项目模板的应用程序中，默认启动页面使用了WinJS.UI命名空间中的ViewBox控件，通过该控件可以在应用程序界面中固定一个视区，向这个固定视区中添加控件时可以相对于该视区来布置控件的位置，当这个视区的位置发生改变时内部控件的相对位置不会发生改变。如果使用JavaScript创建游戏类的应用程序，可以采用此项目模板。

使用固定布局项目模板新建的应用程序项目中，默认包含：

• default.html文件，表示应用程序的默认启动页面，用户新建的其他页面都可以加载到这个页面中显示。
• CSS文件夹，该文件夹内包含一个default.css文件，用于为默认启动页面和应用程序整体设计CSS样式。
• images文件夹，其中的内容与空白项目模板中的相同。
• js文件夹，内容和作用与空白项目模板中的相同。
• package.appxmanifest文件，是一个XML文件，用于对应用程序进行设定，如应用程序UI定义、功能权限、协议声明和版本打包等。
• 一个后缀名为.pfx的文件，该文件是以项目名称开头的证书文件。

（5）导航布局项目模板

与网格项目模板类似，导航布局项目模板也用到了为Windows应用商店应用提供的JavaScript导航模型，不同的是基于导航布局项目模板的应用程序运行时，应用程序中除了默认启动页面外只有一个主页面。使用此项目模板新建的应用程序项目中，默认包含：

• default.html文件，表示应用程序的默认启动页面，用户新建的其他页面都可以加载到这个页面中显示。
• CSS文件夹，内容和作用与网格项目模板中的相同。
• images文件夹，其中的内容与空白项目模板中的相同。
• js文件夹，在这个文件夹中包含一个default.js文件和一个navigator.js文件，这两个文件的内容和作用与网格项目模板中的相同。
• package.appxmanifest文件，是一个XML文件，用于对应用程序进行设定，如应用程序UI定义、功能权限、协议声明和版本打包等。
• 一个后缀名为.pfx的文件，该文件是以项目名称开头的证书文件。
• pages文件夹，与网格项目模板中的pages文件夹不同，这里的pages文件夹内部包含一个home文件夹，home文件夹中存放着home.html、home.css和home.js三个文件，home.html表示应用程序的主页面，home.css用于为主页面设计CSS样式，home.js用于实现主页面的逻辑功能。

2. 适用于Windows应用商店项目的JavaScript项模板

项模板是包含了基本的代码并被赋予特定功能的项目文件，在项目中通过使用项模板来新建具有特定功能的项目文件可以减少开发时间。要想将项模板添加到现有项目的根目录下或项目的某个文件夹中，方法是：右键单击项目图标或相应的文件夹à添加à新建项，然后在"添加新项"对话框中选择相应的项模板。适用于Windows应用商店应用的JavaScript项模板有页面控制项模板、搜索协定项模板、文件打开选择器协定项模板和共享目标协定项模板等，下面分别对它们进行介绍。

（1）页面控制项模板

页面控制项模板默认以"pagecontrol"命名，当使用此项模板向一个项目中添加文件时，Visual Studio 会向项目中添加3 个文件，分别为pagecontrol.html、pagecontrol.css和pagecontrol.js。其中，pagecontrol.html文件表示一个HTML页面，页面的内容包括标题部分和主要内容部分；pagecontrol.css文件用于为pagecontrol.html页面设计CSS样式；pagecontrol.js文件用于实现pagecontrol.html页面的逻辑功能。

由于页面控制项模板的HTML文件中包含了一个用于导航的按钮，所以在使用网格、拆分或导航项目模板新建的Windows应用商店项目中添加页面时会经常使用页面控制项模板。

（2）搜索协定项模板

搜索协定项模板适用于带有搜索功能的应用程序，使用了此项模板的应用可以让用户输入搜索字符串，并且会显示搜索到的结果。在使用网格、拆分或导航项目模板新建的Windows应用商店项目中添加搜索协定功能可以使用搜索协定项模板。

搜索协定项模板默认以"searchResults"命名，当使用此项模板向一个项目中添加文件时Visual Studio 会向项目中同时添加3个文件，分别为searchResults.html、searchResults.css和searchResults.js。其中，searchResults.html文件表示一个HTML页面，用于显示搜索到的结果；searchResults.css文件用于为searchResults.html页面设计CSS样式；searchResults.js文件用于实现searchResults.html页面的逻辑功能。

（3）文件打开选择器协定项模板

文件打开选择器协定项模板可以将应用程序中的数据以文件的形式显示给其他的应用。例如，可以在Facebook应用中使用文件打开选择器协定项模板创建一个照片选取器对话框，这样在其他的应用中就可以通过照片选取器对话框选取Facebook上的照片。

文件打开选择器协定项模板默认以"fileOpenPicker"命名，当使用此项模板向现有项目中添加文件时Visual Studio 会向项目中同时添加3个文件，分别为fileOpenPicker.html、fileOpenPicker.css和fileOpenPicker.js。其中，fileOpenPicker.html文件表示一个HTML页面，用于显示文件列表；fileOpenPicker.css文件用于为fileOpenPicker.html页面设计CSS样式；fileOpenPicker.js文件用于实现fileOpenPicker.html页面的逻辑功能。

（4）共享目标协定项模板

共享目标协定项模板可以使应用与其他应用共享数据。例如，想将Flickr上的照片发布到Facebook，就可以在Facebook应用中使用共享目标协定项模板来接收共享的照片。

共享目标协定项模板默认以"shareTarget"命名，当使用此项模板向一个项目中添加文件时Visual Studio 会向项目中同时添加3个文件，分别为shareTarget.html、shareTarget.css和shareTarget.js。其中，shareTarget.html文件表示一个HTML页面，在这个页面中进行接收共享的数据；shareTarget.css文件用于为shareTarget.html页面设计CSS样式；shareTarget.js文件用于实现shareTarget.html页面的逻辑功能。

（5）其他项模板

前面介绍的这些项模板都具有各自特殊的功能，在开发特定功能的Windows应用商店应用时可以选择使用合适的项模板来向项目中添加文件。除此之外，Visual Studio 还提供了具有基础功能的项模板，如HTML页、JavaScript 文件、XML 文件、样式表和资源文件等，使用这些项模板可以向现有项目中添加一个相应类型的文件而不是一组文件，在没有特殊功能要求的情况下，我们可以使用这些比较简单的项模板来新建一个项目文件。