Question

我环顾四周，为Windows Phone 7找到了几个基于PhoneGap / Cordova的HTML5应用程序的例子，但它们似乎都没有向您展示如何制作全景图或枢轴式应用程序，这些都是主要的一些绘制OS的UI。我正在寻找一个类似这样的应用程序：

全景：

Windows Phone 7 Panorama example

支点：

Windows Phone 7 Pivot example

我想使用纯HTML5，CSS3和JS构建这些应用程序，并使用PhoneGap Build来部署它们。我不想使用Visual Studio。 VS为全景或枢轴布局提供了两个单独的控件，但在HTML5中，应该只有一个滑块控件可以用于两者，通过调整允许多屏幕列，如第一个“第二个项目”页面示例

我还寻找了一些我可以调整的IE9兼容的jQuery滑块插件，但其中90％不起作用，其余的有点太不同，无法尝试和适应。例如，这个jQuery page slide (sideways) transition在每个浏览器中都可以正常工作，但在WP7浏览器中降级为基本的向上滑动类型效果。

我的目标是多个操作系统，但我不想在所有操作系统中复制相同的界面。数据源很常见，但我希望它们看起来像是每个操作系统上本机设计的应用程序。

更新1：

发现a scroller/slider plugin实际上响应了WP7上IE Mobile上的触摸事件，但它没有捕捉到每个面板的边缘，这是全景/枢轴控件的一个重要方面。

还检查了XUI，它有一个名为Swipe的插件来检测滑动/点击事件，但即使使用“xui-ie-2.3.2.min.js”，该示例在IE Mobile中也绝对没有任何作用

更新2：

我最接近找到这样的东西是有希望的jqMetro附加组件。它为您提供全面的Metro风格，包括全景，枢轴和本机控件，但最具讽刺意味的是滑动功能在IE Mobile上不起作用，这意味着它无法在PhoneGap的应用程序中运行。点击枢轴标题可以正常工作并切换到该视图。

更新3：

完全放弃混合应用程序开发！： - ）

Answer 1

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

它适用于wp8上的IE10，也适用于wp7

Answer 2

默认情况下，您无法在PhoneGap内部执行Panorama。您可能能够找到一些可行的x-compat js-lib，但我真的没有看到一个看起来和Windows Phone Panorama一样好的。

但是你可以在Panorama中拥有多个PhoneGap页面。让我来告诉你怎么做。请注意，此解决方案不兼容x-plat。

multiple phonegaps in panorama

拉下最近的手机档，并根据此链接进行设置 - [ http://docs.phonegap.com/en/2.2.0/guide_getting-started_windows-phone_index.md.html#Getting%20Started%20with%20Windows%20Phone]。

创建一个新项目，将其命名为“pgpanoramaplay”或类似名称。

将“\ 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>

现在[右键]项目，并添加一个Panorama项目。使用默认名称PanoramaPage1.xaml

更改wmmanifest1.xaml以使用PanoramaPage1.xaml作为启动对象

打开PanoramaPage1.xaml。修改页面顶部以引入对手机间隙的引用，如下所示

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

<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>

Debug，Go，您应该会看到这些页面与本文顶部的图片类似。

如果您想将PhoneGap页面设置为与Panorama背景相匹配，请调整高度，删除背景图像，无论如何，default.css是您的朋友。标记并享受！

Answer 3

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

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

3 个答案: