9

我环顾四周，发现了几个适用于 Windows Phone 7 的基于 PhoneGap/Cordova 的 HTML5 应用程序示例，但它们似乎都没有向您展示如何制作全景图或枢轴样式应用程序，这是操作系统的用户界面。我正在寻找一个像这样工作的应用程序：

全景：

Windows Phone 7 全景示例

枢：

Windows Phone 7 枢轴示例

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

我还寻找了一些我可以调整的兼容 IE9 的 jQuery 滑块插件，但其中 90% 都不起作用，其余的有点太不同了，无法尝试和适应。例如，这个jQuery 页面滑动（横向）过渡在每个浏览器中都可以正常工作，但在 WP7 浏览器中退化为基本的向上滑动类型效果。

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

更新1：

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

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

更新 2：

我最接近找到类似的东西是有前途的jqMetro附加组件。它为您提供了完整的 Metro 风格，包括全景、透视和原生外观控件，但最讽刺的是滑动功能在 IE Mobile 上不起作用，这意味着它在 PhoneGap 的应用程序中不起作用. 点击枢轴标题可以正常工作并切换到该视图。

更新 3：

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

4

3 回答 3

3

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

它适用于 wp8 的 IE10，也应该适用于 wp7

于 2013-03-27T03:00:53.343 回答
2

默认情况下，您不能在 PhoneGap 内进行全景。你也许能找到一些有效的 x-compat js-lib，但我真的没有见过一个看起来像 Windows Phone Panorama 一样好的。

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

全景中的多个电话间隙

拉下最新的 phonegap 并按照此链接进行设置 - [ 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>

现在 [鼠标右键] 项目，并添加一个全景项目。取 PanoramaPage1.xaml 的默认名称

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

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

如下修改 PanoramaControl。请注意，我已经手动创建了所有 .html pagex，但已经存在的 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 是您的朋友。标记并享受！

于 2012-12-11T22:13:25.213 回答
0

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

于 2017-01-04T12:59:21.627 回答