WP7 上使用 PhoneGap 的技巧之:处理屏幕旋转

红薯 发布于 2011/12/07 09:27
阅读 2K+
收藏 2

云原生2.0展望丨从“小众”到“首选”,推动云原生产业落地华为云作用几何?>>>

本文主要介绍在 Windows Phone 7 下使用 PhoneGap 在处理屏幕旋转时的方法,也就是说当用户将手机从横屏到竖屏转换时,屏幕上的内容应该相应的进行调整,否则可能会导致某些元素显示异常而影响交互。

首先我们在 Visual Studio 使用 PhoneGap 的项目模版创建一个新项目:

image

你需要点开上图界面中左边面板的 Visual C# 才能显示模版的列表。

创建完项目后,这是一个 Sliverlight for Windows Phone 的项目,而 PhoneGap 运行在一个宿主的 Sliverlight XAML 页面中。默认情况下,项目是使用竖屏方式运行的,你可以通过 F5 键运行项目,然后点击屏幕翻转来进入横屏模式。

image

横屏模式如下图所示:

image

你会发现我们那个测试程序在横屏下,文字显示并没有相应调整过来。

要让应用程序支持横屏显示模式是很简单的。在解决方案浏览器中,双击 MainPage.xaml 文件,在打开的属性窗口中找到 SupportedOrientations 并将其值改为PortraitOrLandscape. 你也可以直接在 XAML 文件中修改;另外还有一个 Orientation 属性用来控制程序启动时的屏幕状态。

image

再次运行程序,并旋转屏幕,你将会得到如下的结果:

image

搞定了!

另外,你也可以使用 JS 代码来控制屏幕的旋转,下面是一个简单的例子:

 <!DOCTYPE html>

 <html>

   <head>

     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>     

     <title>PhoneGap WP7</title>     

       <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
       
        <script type="text/javascript">
  
           // provide our own console if it does not exist, huge dev aid!
           if(typeof window.console == "undefined")
           {
           window.console = {log:function(str){window.external.Notify(str);}};
           }         

           // output any errors to console log, created above.
           window.onerror=function(e)
            {
                console.log("window.onerror ::" + JSON.stringify(e));
            };          

            console.log("Installed console ! ");        

       </script>
       <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>        
       <script type="text/javascript">

         document.addEventListener("deviceready",onDeviceReady,false);

         // once the device ready event fires, you can safely do your thing! -jm
         function onDeviceReady()
         {
              document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready! version=" + window.device.phonegap;
              window.addEventListener("orientationchange", orientationChange, true);
          }

          function orientationChange(e) {
              var orientation = "portrait";
              if (window.orientation == -90 || window.orientation == 90) orientation = "landscape";
              document.getElementById("orientation").innerHTML = orientation;
          }        

    </script>

    </head>

    <body>

      <h1>Hello PhoneGap</h1>
      <div id="welcomeMsg"></div>
      <div id="orientation">portrait</div>

    </body>

  </html>

注意新的 DIV 用来显示当前的屏幕方向信息,而 orientationChange 函数封装了 onDeviceReady 事件 。

如果你希望在 PhoneGap 外处理屏幕旋转,你也可以使用 C# 事件处理器。只需在 MainPage.xaml 的属性窗口中的 Events 页中找到 OrientationChanged 事件,通过双击事件名可以创建一个新的事件处理函数。

image

双击后 MainPage.xaml.cs 窗口将打开,可以编辑代码:

image

文章译自: http://blogs.msdn.com/b/glengordon/archive/2011/11/16/phonegap-on-wp7-tip-1-handling-orientation.aspx
加载中
0
天空88

为何我用 这个phonegap 出错呢?

环境: visual studio 2010 express for windwos phone,  sdk 7.1 

phonegap 1.3.0

新建project 后直接编译,不通过。

返回顶部
顶部