零基础在线制作Windows Phone 8 应用

任何用户(不管你是否会编程),只要你有浏览器,都可以使用 Windows Phone App Studio (下文中用App Studio指代) 快速制作出一个属于你的Windows Phone的应用。

在浏览器中输入“http://appstudio.windowsphone.com”,就可以打开App Studio, 然后用自己的微软账户登录后便能进行应用的开发App Studio中提供了很多现成的模板,如果找到一个和自己需求比较类似的,就可以大大加快我们开发的效率。

为了帮助大家更好地理解App Studio,本文会演示如何建立一个自己的RSS阅读器。

App Studio 概览

进入App Studio后,选择“Start New Project”开始一个新项目,然后选择自己想要的模板后就可以进入如下的“开发页面”。

Windows Phone App Studio界面


整个页面可以分成4个功能区,其中第1部分是应用的标题;第二部分是应用开发的4个步骤(内容编辑、样式编辑、磁贴编辑、发布信息编辑);第三部分提供的是一个实时预览的效果(可以用鼠标在屏幕上进行拖动操作);最后一部分是详细编辑区域,不同的“步骤”显示的内容也不一样。


下面,就开始演示如何建立一个“My Reader”应用。实现的功能是一个类似RSS阅读器的应用,共订阅了Charley Blog和博客园两个RSS源,其中Charley Blog还细分为“技术”、“生活娱乐”和“杂谈”三个子类,点击每个子类都能显示对应的文章。最终效果图如下:

My Reader效果图

My Reader 起始界面


My Reader效果图

点击My Reader中的技术分类后显示的界面


建立一个新的应用

进入App Studio之后,选择“Start new project”开始建立应用。

Windows Phone App Studio的起始界面

点击“Start new project”


Windows Phone App Studio 中的模板

选择“Emtpy App”模板


在Windows Phone App Studio 中创建项目

点击“Create”进行创建


经过简单几步,一个使用了“空模板”的应用就算建立成功了,下面开始对应用中的内容进行搭建。

编辑应用中的内容

如果您玩过Windows Phone,那么对于下面这张图肯定不陌生。这是我们常见的一款应用打开后的样子,左上角是应用的标题,中央会有N个版块(section),用户可以通过手指在屏幕进行拖动,从而选择自己想要的功能。

Window Phone基本长相


如果你已经了解了一个应用内容的大概布局,下面就开始修改“My Reader”的内容。

修改标题

在左上角的文本框内,输入自己想要的应用标题:My Reader,可以看到预览图中也更新为“My Reader”。

在Windows Phone App Studio 中修改App 标题

修改标题


目前最多只能插入6大版块,每个版块都可以是“RSS”、“HTML”、“Youtube”、“Flickr”、“Bing”这五大基本类别或“Menu”、“Collection”两大高级类别中的一种。本文只介绍如何使用“Menu”、“RSS”、“HTML”。


添加“Charley Blog”菜单版块

点击“Menu”后弹出“Add Menu section”对话框,在文本框内输入“菜单版块”的标题。

在Windows Phone App Studio 中添加Menu

“Add Menu section”对话框


选择“Confirm(确定)”之后,菜单版块就创建好了。

在Windows Phone App Studio 添加完Menu后的样子


但是,现在这个菜单下还是空空如也~


添加RSS类别的子菜单

按照“My Reader”的需求,该菜单下还要包含“技术”、“生活娱乐”、“杂谈”三个子菜单。做到这点很容易,只需要点击下方灰色的箭头区域,就可以展开子菜单的设计。

在Windows Phone App Studio 添加子菜单

添加Rss子菜单


在Windows Phone App Studio中添加Rss子菜单

根据提示输入想要的名字和RSS地址


全部子菜单添加完后,如下图所示:

添加完菜单后的Windows Phone App Studio界面


修改子菜单的布局

在预览界面里,可以看到三个白点,这便是三个子菜单,只不过长得丑了点,需要进行一点的美化。点击想要修改的子菜单中的“Edit items”,进入到“Edit section”界面。

Windows Phone App Studio中的Edit section界面

Edit section界面


Windows Phone App Studio中修改Layout

在“Layout”区域选择想要的布局样式


修改子菜单的图标

点击“Section Title”旁边的图标,会弹出选择图标的界面。出于方便,我选择现成的“App Studio Resources”中的图标。

点击图标

点击该图标


Select the image source

选择图标的界面


在Windows Phone App Studio中select image

选择“App Studio resources”后,下方出现图标以供选择


修改完成后,会发现图标已经变成我们想要的了。

修改完图标后

修改完图标后


按照上述办法对三个子菜单都进行修改后,就会变成如下效果。

修改menu图标后的样子

添加RSS版块

Charley Blog版块已经添加好了。接着添加博客园版块,添加方式和上面“添加 RSS 类别的子菜单”一样输入名字和RSS地址就可以了。

在Windows Phone App Studio中添加Rss版块

添加博客园版块



插入HTML版块

这里可以添加 Html5 标记语言,可以用来放一些不太会变化的内容,比如应用介绍之类的。发布之后如果进行修改,必须重新发布。

在Windows Phone App Studio添加HTML版块

添加Html版块


所有版块添加完后,就会得到和下图所示一样的界面。

添加完所有版块后的长相


编辑主题样式

如果觉得黑不溜秋很难看,可以在“主题样式”界面中对字体颜色、背景颜色、背景图案进行修改。比较简单,就不进行演示了。

Windows Phone App Studio中的Theme界面


编辑磁贴

磁贴,就是固定在Windows Phone开始屏幕的小方块。App Studio中提供了三种模板进行磁贴设计:Iconic template、Flip template、Cycle template。


Iconic template

最简单的磁贴,固定在开始屏幕后,根据磁贴的大小显示对应的图案。

Iconic template

Iconic template


Flip template

除了 Iconic 所具备的功能外,当你把磁贴固定在开始屏幕后,每隔一定时间磁贴就会翻个面(从 front 切换到 back,再从 back 切换回 front)。

Flip template

Flip template


Front 到 Back

从Front往Back翻转中


Back 到 Front

从Back往Front翻转中


Cycle template

除了Iconic所具备的功能外,会从你提供的9张图片中进行不断的循环切换。

Cycle template


完善发布信息

在这里可以修改应用的默认图标,修改默认的语言。

Publish information


发布应用

点击右侧的“Generate”,会跳出一个选择框,问你是要生成“Windows Phone 8.0”的应用还是要生成“Windows Phone 8.0 和 Windows 8.1”的应用。

Generate app

点击“Generate”


what do you want to generate

选择想要的平台后,点击“Generate”就会开始生成应用


generating

大概几十秒时间


生成完后,就会看到如下页面。

生成完后


安装应用

发布完成后,系统会自动发一份邮件到你注册的邮箱,其中包含了安装应用所需要的证书及刚刚制作的这款应用本身(如果想要在windows phone 8上运行,必须先安装一个证书,然后才能安装刚刚制作的这款应用)。

关于App的邮件

信件正文


安装的时候会提示“要安装企业应用吗”,点击确定就会开始安装。

安装企业应用吗


这样,一款“My Reader”的应用就开发完成了,如果你希望体验下这款应用,可以在下面评论中留下您的邮箱,我会发份邮件到您的邮箱,您就可以直接使用了。


参考资源

Step by Step Apps for non coders – Windows Phone App Studio

文章索引

[隐 藏]

本站采用知识共享署名 3.0 中国大陆许可协议进行许可。 ©2014 Charley Box | 关于本站 | 浙ICP备13014059号