在iOS的时候,这里有一个相关代码例子《360 Degree Panorama利用 html5 和 phonegap 实现360度全景展示》,这个教程是关于Windows Phone开发的内容,顺便提醒大家一下,dApps不再更新代码下载,iOS代码例子以及Android、Windows Phone代码例子我们将在AppCodes< AppCodes微博>更新。
本文主要介绍在 Windows Phone 7 下使用 PhoneGap 在处理屏幕旋转时的方法,也就是说当用户将手机从横屏到竖屏转换时,屏幕上的内容应该相应的进行调整,否则可能会导致某些元素显示异常而影响交互。
首先我们在 Visual Studio 使用 PhoneGap 的项目模版创建一个新项目:
PhoneGap on WP7 tip #1: Handling Orientation
你需要点开上图界面中左边面板的 Visual C# 才能显示模版的列表。
创建完项目后,这是一个 Sliverlight for Windows Phone 的项目,而 PhoneGap 运行在一个宿主的 Sliverlight XAML 页面中。默认情况下,项目是使用竖屏方式运行的,你可以通过 F5 键运行项目,然后点击屏幕翻转来进入横屏模式。
PhoneGap on WP7 tip #1: Handling Orientation
横屏模式如下图所示:
PhoneGap on WP7 tip #1: Handling Orientation
要让应用程序支持横屏显示模式是很简单的。在解决方案浏览器中,双击 MainPage.xaml 文件,在打开的属性窗口中找到 SupportedOrientations 并将其值改为PortraitOrLandscape. 你也可以直接在 XAML 文件中修改;另外还有一个 Orientation 属性用来控制程序启动时的屏幕状态。
PhoneGap on WP7 tip #1: Handling Orientation
再次运行程序,并旋转屏幕,你将会得到如下的结果:
PhoneGap on WP7 tip #1: Handling Orientation
搞定了!
另外,你也可以使用 JS 代码来控制屏幕的旋转,下面是一个简单的例子:
< !DOCTYPE html>




PhoneGap WP7



Hello PhoneGap

portrait



注意新的 DIV 用来显示当前的屏幕方向信息,而 orientationChange 函数封装了 onDeviceReady 事件 。
如果你希望在 PhoneGap 外处理屏幕旋转,你也可以使用 C# 事件处理器。只需在 MainPage.xaml 的属性窗口中的 Events 页中找到 OrientationChanged 事件,通过双击事件名可以创建一个新的事件处理函数。
PhoneGap on WP7 tip #1: Handling Orientation
双击后 MainPage.xaml.cs 窗口将打开,可以编辑代码:
PhoneGap on WP7 tip #1: Handling Orientation