Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Procedimiento para cargar recursos de archivos (aplicaciones de la Tienda Windows con JavaScript y HTML)

Aprende a cargar recursos de archivos de varias ubicaciones.

Puedes acceder a recursos de archivo en archivos de aplicaciones que entregues como parte del paquete de la aplicación, o que incluyas como parte de un kit de desarrollo de software (SDK) o paquete de marco, o desde el estado de la aplicación, o desde la web. Puedes hacer referencia a estos archivos en el marcado (como HTML o XML de notificaciones) o a través de código (como as XmlHttpRequest o storage file APIs). Los ejemplos que se incluyen aquí muestran los recursos de archivo en contextos específicos, pero puedes usar la mayoría de ellos en otros muchos contextos.

Web

Para acceder a archivos desde la Web, puedes usar identificadores uniformes de recursos (URI) HTTP de estándar absoluto.

<img src="http://www.contoso.com/images/logo.png" alt="Logo" />

Paquetes de la aplicación

Para acceder a los archivos desde el paquete de la aplicación, puedes usar una ruta de acceso de archivo lógica o directa para hacer referencia al recurso. Esto se cumple aunque los archivos tengan varios idiomas, escalas, contrastes u otras variaciones. Consulta Inicio rápido: uso de recursos de archivos o imágenes para ver una introducción.

Por ejemplo, carga

Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png

haciendo referencia a

Images/logo.png

Para acceder a los archivos relativos al documento actual, puedes usar URI relativos.

<img src="images/logo.png" />

Para acceder a los archivos relativos a la raíz del paquete, puedes usar un URI de ruta de acceso absoluta (que comience con "/").

<img src="/images/logo.png" />

Para acceder a los archivos almacenados en el mismo paquete, pero desde una biblioteca de clases, usa el nombre de la biblioteca de clases:

<img src="/ClassLibraryName/images/logo.png" />

Para acceder a archivos almacenados dentro del paquete de la aplicación, pero desde código donde no hay URI de documento base, especifica el esquema ms-appx:.

Windows.Storage.StorageFile.getFileFromApplicationUriAsync(new Windows.Foundation.Uri("ms-appx:///images/logo.png"))

Para acceder a archivos almacenados en un paquete de red, usa un URI absoluto.

<script src="ms-appx://Microsoft.WinJS.1.0/js/ui.js"></script>

Para acceder a archivos que se cargarán en el compartimento web, usa el esquema ms-appx-web:.

<iframe src="ms-appx-web:///html/webcompartment.html"></iframe>

Para acceder a archivos en el mismo compartimento web o local que el documento actual, no especifiques un esquema.

<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

Estado de la aplicación

Para acceder a archivos almacenados en el estado de la aplicación, usa el esquema ms-appdata:. El estado de la aplicación se puede guardar en una carpeta local, una carpeta de enrutamiento o una carpeta temporal.

Para acceder a los archivos almacenados en la carpeta local:

<img src="ms-appdata:///local/images/logo.png" />

Para acceder a los archivos almacenados en la carpeta de enrutamiento:

<img src="ms-appdata:///roaming/images/logo.png" />

Para acceder a los archivos almacenados en la carpeta temporal:

<img src="ms-appdata:///temp/images/logo.png" />

Eventos y cambios de contexto

Tu aplicación se encarga de actualizar la visualización de sus recursos cuando sea necesario.

Las aplicaciones de la Tienda Windows pueden ejecutarse cuando cambia el sistema, como cuando el usuario activa el contraste alto. Como resultado, la aplicación usa un conjunto distinto de calificadores. Hay varios cambios del sistema que invocarán eventos en el objeto ResourceContext.

En JavaScript, la forma más simple de detectar estos eventos es mediante

WinJS.Resources.addEventListener('contextchanged', refresh, false);

Los elementos de imagen no se cargan automáticamente cuando cambia el contexto y la aplicación se encargará de reemplazar las imágenes. Las consultas de medios CSS son una alternativa que actualizará inmediatamente las propiedades de CSS, como la imagen en segundo plano.

 

 

Mostrar:
© 2018 Microsoft