Building Windows Phone 8.1 Apps in HTML
We provide three universal App project templates to get you started.
The Blank app includes just the basics to let you bring their own assets and code. The Hub/Pivot app offers a good example of similar content shown in different container controls. The Navigation app starts you off with the infrastructure you need to build navigation within a single page app (SPA). You can learn more about these kinds of projects on MSDN.
The first thing you’ll notice about universal apps is their project structure:
You will see three project nodes: one for Windows Store, Windows Phone, and Shared. Code and content that is specific to Windows Store will reside in your Windows Store project. Similarly, code and content specific to Windows Phone will reside in your Windows Phone project. Your Shared project will contain all of the code and content that is intended to be shared across your Store and Phone projects.
Once you’ve created your project, you’ll likely want to focus on building your app for each platform in turn. The context switcher, located within the navigation bar at the top of shared files, lets you switch the platform you’re currently focusing on to ensure you’re getting the best coding experience, including IntelliSense for just those APIs that work on your current platform:
For example, if you switch to coding for Windows 8.1, Visual Studio won’t show you APIs that only work on Windows Phone 8.1. When there are APIs that don’t exist on all of your target platforms, Visual Studio flags the APIs for you:
You can learn more about the Context Switcher along with other great tips for building Universal Apps in the following Build session.
The Device Panel
Blend’s Device Panel enables you to preview your app in different orientations, resolutions, and dimensions without requiring you to deploy to multiple devices. The Device Panel now supports Phone apps. You will see an updated set of device configurations applicable to phones within the list of available displays. In addition, there are configurations for Windows Phone’s themes and accent colors.
Debugging and Diagnostics
All of the debugging and diagnostics features for Windows Store apps are available for Windows Phone development as well:
One area that is especially important for mobile devices is app performance. To help with this, the UI Responsiveness Tool and Memory Analyzer can help in diagnosing performance issues. The UI Responsiveness tool shows you a clear chart of where your application spends time rendering your app’s visuals. The Memory Analyzer enables you to see where memory is being allocated, freed, and held over time.
An important part of defining your app’s look and feel is ensuring visual assets, such as the logo and splash screen, distinguish your app from the crowd. The manifest designer makes it easy to provide Windows Phone assets within your app. If you are creating a universal project, the manifest designer enables you to specify visual assets for both your Windows Phone and Windows Store apps.
Where to Get It
To start building an app that supports Windows Store and Windows Phone with HTML using universal projects, install Visual Studio 2013 Update 2 RC. If you don’t already have Visual Studio 2013, you can download Visual Studio Express 2013 for Windows with Update 2 for free.
If you have any questions or comments, feel free to comment below or post on the forums!
Jordan & Kirupa
|Jordan Matthiesen (@JMatthiesen) and Kirupa Chinnathambi (@kirupa) are Program Managers in the Client Platform team inside Visual Studio.