如何使用PhoneGap/Cordova为Windows 7创建一个简单的全景应用程序？

Question

我环顾四周，发现了基于PhoneGap/Cordova的Windows 7 HTML5应用程序的几个例子，但它们似乎都没有向您展示如何制作全景图或支点风格的应用程序，这是操作系统UI的一些主要吸引力。我想构建一个像这样工作的应用程序：

全景：

​

​

枢轴：

​

​

我希望使用普通的HTML5、CSS3和JS构建这些应用程序，并使用PhoneGap构建来部署它们。我不希望使用。VS为全景图或枢轴布局提供了两个单独的控件，但在HTML5中，应该只有一个滑块控件可以用于这两个控件，并进行了调整，以便在第一个示例中允许出现一个多屏幕列，比如“第二个项”页面。

我还寻找一些IE9兼容的jQuery滑块插件，我可以调整，但其中90%的不工作，其余的是有点不同的尝试和适应。例如，这个jQuery页面幻灯片(侧)转换在每个浏览器中都工作得很好，但是在WP7浏览器中会降低到基本的幻灯片向上类型的效果。

我的目标是多个OSes，但我不想在所有的地方复制相同的接口。数据源将是通用的，但我希望它们看起来像在每个操作系统上自行设计的应用程序。

更新1:

在IE上找到了滚动器/滑块插件，它实际上响应WP7上的触摸事件，但它不会对每个面板的边缘产生响应，这是pano/pivot控件的一个重要方面。

此外，还签出了许瑞，它有一个名为Swipe的插件来检测swipe/tap事件，但是即使使用"xui- IE -2.3.2.min.js"，该示例在IE中也完全没有任何功能。

更新2:

我最接近于找到这样的东西是有希望的jqMetro插件。它给你一个完整的地铁风格，包括全景，枢轴和本地外观的控件，但最具讽刺意味的是，滑动功能不工作在IE移动，这意味着它将无法在PhoneGap的应用程序。点击枢轴标题工作，并切换到该视图很好。

更新3:

完全放弃混合应用程序开发！:-)

Answer 1

解决方案是放弃web技术的用户来构建本地的应用程序，而是完全本地化。混合应用程序框架是邪恶的。

Answer 2

抱歉，回复晚了。我也遇到了这个问题，下面是我的解决方案：https://github.com/grohman/js-panorama

它在IE10中工作在wp8上，也应该在wp7上工作。

Answer 3

默认情况下，您不能在PhoneGap中做全景。你也许能找到一些能工作的x-compat js-lib，但我真的没见过像Windows那样好看的。

但是您可以在全景中有多个PhoneGap页面。我来教你怎么做。注意，此解决方案不兼容x-plat。

​

​

拉下最新的phonegap，并根据这个链接设置它-[ index.md.html#Getting%20Started%20with%20Windows%20Phone ]。

创建一个新项目，将其命名为“pg全景游戏”或类似的东西。

将"\www\index.html“复制到"\www”目录中的至少两个其他文件。我把我的名字命名为"30tolaunch.html“、"dfwiki.html”和"devfish.html“。

标记内容只是为了展示一些基本的东西。对于我的"\www\30tolaunch.html“，修改后的html主体如下。

<body>
    <div class="app">
        <h1>30tolaunch</h1>
        <div>
            <p>30 Days to Launch an App</p>
            <p>Great content</p>
            <a href="http://bit.ly/30tolaunch">bit.ly/30tolaunch</a>
        </div>
    </div>
    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

现在右击该项目，并添加一个全景项目.使用PanoramPage1.xaml的默认名称

将wmlim1.xaml更改为使用PanoramPage1.xaml作为启动对象

打开全景图1。修改页面顶部以获取对电话间隔的引用，如下所示

​

修改PanoramaControl，如下所示。注意，我已经手动创建了所有.html页面，除了已经存在的item.html之外。

<Grid x:Name="LayoutRoot">
    <controls:Panorama Title="phonegap">
        <!--Panorama item one-->
        <controls:PanoramaItem Header="30tolaunch">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <my:CordovaView HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0"  
                    x:Name="PGView4" 
                    VerticalAlignment="Stretch"
                    StartPageUri="/app/www/30tolaunch.html"
                />
            </Grid>
        </controls:PanoramaItem>

        <!--Panorama item one-->
        <controls:PanoramaItem Header="index">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <my:CordovaView HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0"  
                    x:Name="PGView" 
                    VerticalAlignment="Stretch"
                />
            </Grid>
        </controls:PanoramaItem>

        <!--Panorama item two-->
        <controls:PanoramaItem Header="item2">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <my:CordovaView HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0"  
                    x:Name="PGView2" 
                    VerticalAlignment="Stretch"
                    StartPageUri="/app/www/devfish.html"
                />
            </Grid>
        </controls:PanoramaItem>

    <controls:PanoramaItem Header="item3">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <my:CordovaView HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0"  
                    x:Name="PGView3" 
                    VerticalAlignment="Stretch"
                    StartPageUri="/app/www/dfwiki.html"
                />
            </Grid>
        </controls:PanoramaItem>
    </controls:Panorama>
</Grid>

调试，转到，您应该会看到页面显示类似于本文顶部的图片。

如果您想要将PhoneGap页面的样式设置为与全景背景相匹配，调整高度，删除背景图像等等，那么default.css就是您的朋友。准备好享受吧！