Это первая статья из серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти все ресурсы, инструменты и исходный код на нашем веб-сайте .
![advertisementsample14 [2]](/wp-content/uploads/images/dzo/23bdb7292f7904025f410efbb212ae24.png "advertisementsample14 [2]")
В этой первой статье этой серии я подумал, что важно осветить внутреннюю работу шаблона пустого приложения Магазина Windows в Visual Studio 2012. Я расскажу о каждом из файлов, почему они важны, а также о многих настройках. это может быть скрыто в каждом. Это должно дать вам прочную основу для остальной части серии, где мы будем использовать каждый из этих файлов.
В Visual Studio 2012 также есть несколько других шаблонов проектов, в частности Grid, Split, Fixed и Navigation, как вы можете видеть ниже. Они были созданы с учетом конкретного типа приложения или навигации, и, как правило, вряд ли ваша идея идеально вписывается в эту архитектуру. Помните, что эти шаблоны являются отправной точкой, а не конечным решением. Для этой серии мы почти начнем с шаблона пустого приложения.
Вот представление обозревателя решений для нового шаблона пустого приложения в решении HTML5.
Изображения
Давайте начнем с простых, изображений в папке изображений . Внутри каждого нового проекта есть четыре изображения, каждое из которых служит определенной цели. Мы создали разные версии этих изображений (а также одну дополнительную), чтобы было совершенно очевидно, какое изображение какое, когда мы запускаем приложение. Я настоятельно рекомендую загрузить эти изображения и заменить изображения по умолчанию, особенно когда вы учитесь. Вы можете скачать все пять из них здесь . После того, как вы заменили изображения по умолчанию, запустите ваш проект, чтобы увидеть эти изображения в каждом из их местоположений, как описано ниже.
Logo.png
Это, вероятно, самый распространенный образ, который будет использовать ваше приложение. Это фоновое изображение по умолчанию для плитки вашего приложения на начальном экране пользователя. Это 150 х 150 пикселей в размере.
SmallLogo.png
Это изображение используется, когда отображается список приложений. Например, при поиске приложения в Windows 8 или в меню «Поделиться». SmallLogo.png — 30 х 30 пикселей. При таком небольшом размере вы хотите убедиться, что этот значок действительно представляет что-то знакомое вашему пользователю. Я настоятельно рекомендую просто логотип или другие очевидные изображения.
SplashScreen.png
Это исходное изображение, которое загружается при запуске приложения. С этим можно сделать несколько полезных трюков, о которых мы расскажем позже в этой серии. На данный момент помните, что это изображение ВСЕГДА будет размером 620 x 300 пикселей и будет вертикально и горизонтально отцентрировано на экране вашего пользователя, независимо от его размера.
StoreLogo.png
Чтобы сэкономить место в магазине, у нас есть маленькая иконка, которая используется. Это изображение размером 50 x 50 пикселей, но оно может быть самым важным 2500 пикселей во всем приложении. Это значок, который пользователи увидят, когда решат, какие новые приложения добавить на свое устройство. Плохой значок указывает на плохое приложение для большинства пользователей. Потратьте некоторое время на это.
WideLogo.png
Это дополнительный значок, который я включаю в свои первоначальные проекты. Вам нужно будет добавить его в свой проект, щелкнув правой кнопкой мыши папку « Ресурсы » и выбрав «Добавить существующий элемент…». Это изображение размером 310 x 150 пикселей, оно используется для того, чтобы ваше приложение могло иметь более широкую плитку, чем стандартный размер Logo.png.
package.appxmanifest
Этот файл содержит все настройки, настройки и объявления для вашего приложения. Это то место, куда вы пойдете почти за каждую вещь, связанную с вашим приложением, работающим на компьютере с Windows 8. Например, здесь вы определяете, включен ли контракт на поиск, или какие значки следует использовать в каждой ситуации. Например, каждый из этих графических ресурсов, через которые мы только что прошли, определяется на вкладке пользовательского интерфейса приложения в AppXManifest. Он также определяет цвета фона по умолчанию, ориентации и конкретные возможности, которые потребуются вашему приложению, например доступ к местоположению.
Убедитесь, что вы хорошо знакомы с этим файлом. Тебе это понадобится.
default.html
Это наша основная точка входа или стартовая страница вашего приложения. На самом деле default.html может называться как угодно, так как он установлен в нашем файле package.appxmanifest в качестве стартовой страницы приложения. Как веб-разработчик default.html должен выглядеть как любая другая стартовая страница для веб-сайта, который вы создали, особенно если вы сделали какой-либо HTML5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Day1</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Day1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
Как и на любой HTML-странице, которую вы видели, вы найдете наши ссылки на таблицы стилей и файлы сценариев. Но посмотрите внимательно на href или src для ссылки и скрипта соответственно. Обратите внимание на // как начало пути. Вот как мы ссылаемся на встроенные скрипты и таблицы стилей.
CSS / default.css
Поскольку мы начали с пустого шаблона, вы должны догадаться, что наш стиль по умолчанию также не существует. Сказав, что есть несколько подсказок относительно того, что Microsoft хочет, чтобы мы делали как минимум, ориентации и привязки. Завтра мы подробно расскажем об ориентации и привязке, но не достаточно сказать, что они обрабатываются простыми медийными запросами.
body {
}
@media screen and (-ms-view-state: fullscreen-landscape) {
}
@media screen and (-ms-view-state: filled) {
}
@media screen and (-ms-view-state: snapped) {
}
@media screen and (-ms-view-state: fullscreen-portrait) {
}
Теперь default.css был не единственной таблицей стилей, на которую ссылался наш шаблон. Мы также ссылались на:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
Это встроенная таблица стилей, которую наши приложения могут использовать, чтобы помочь нам последовательно стилизовать такие вещи, как встроенные элементы управления. Шаблон ссылается на «темный» стиль по умолчанию, но есть и «светлый» стиль, как показано здесь:
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
JS / default.js
В отличие от нашего CSS по умолчанию, наш файл JavaScript по умолчанию действительно работает с управлением жизненным циклом процесса или PLM. Из нашего шаблона наш шаблон настраивает поведение оболочки для обработки различных циклов PLM, таких как запуск и завершение. Это то, что мы хотим реализовать
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = 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.
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
};
app.start();
Как и в нашем CSS, мы также ссылались на некоторые встроенные библиотеки, в частности WinJS. Нам нужен WinJS для реализации таких вещей, как PLM. Подробнее о WinJS позже.
<script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
Day1_TemporaryKey.pfx
Каждое приложение Магазина Windows подписано сертификатом. Когда вы впервые создаете новый проект в Visual Studio, он автоматически создает новый тестовый сертификат. В нашем случае этот тест сертификат называется Day1_TemporaryKey.pfx где Day1 наше название проекта. Опять же, вы можете найти этот набор в файле package.appxmanifest на вкладке Упаковка . Вы даже можете создавать новые сертификаты там, если это необходимо.
Когда вы будете готовы отправить заявку в магазин, вам нужно будет связать ваше приложение с Microsoft Store и вашей учетной записью разработчика. Вы можете сделать это, перейдя в Projects, Store, Associate App with the Store … После этого вы заметите, что в ваш проект будет добавлен новый сертификат, который будет использоваться для подписания окончательного пакета.
Вы можете найти больше информации о подписании пакета приложения здесь .
Резюме
Итак, это все! В этой серии мы только начинаем, но теперь вы хорошо понимаете, какие начальные файлы можно найти в стандартном шаблоне пустого приложения для HTML.
Завтра мы сосредоточимся на ориентации и привязке, двух важных аспектах вашего приложения, которые часто упускаются из виду. Если вы еще этого не сделали, загрузите бесплатные инструменты для создания приложений для Windows 8 по ссылке ниже. Я также включил ссылку на все решение, упомянутое здесь сегодня.
