如何使用PhoneGap / Cordova為Windows Phone 7創建簡單的全景應用程序？

Question

我環顧四周，發現了幾個基於PhoneGap / Cordova的HTML5應用程序的Windows Phone 7應用程序示例，但它們似乎都沒有向您展示如何制作全景圖或樞軸式應用程序，這些都是操作系統的UI。 我正在尋找一個像這樣工作的應用程序：

全景：

Windows Phone 7 Panorama示例

樞：

Windows Phone 7 Pivot示例

我想使用純HTML5，CSS3和JS構建這些應用程序，並使用PhoneGap Build來部署它們。 我不想使用Visual Studio。 VS為全景或樞軸布局提供了兩個單獨的控件，但在HTML5中，應該只有一個滑塊控件可以用於兩者，通過調整允許多屏幕列，如第一個“第二個項目”頁面例。

我還尋找了一些我可以調整的IE9兼容的jQuery滑塊插件，但是其中90％不起作用，其余的有點太不同，無法嘗試和適應。 例如，這個jQuery頁面幻燈片（側面）轉換在每個瀏覽器中都能正常工作，但在WP7瀏覽器中降級為基本的向上滑動類型效果。

我的目標是多個操作系統，但我不想在所有操作系統中復制相同的界面。 數據源很常見，但我希望它們在每個操作系統上看起來像本機設計的應用程序。

更新1：

找到一個滾動/滑塊插件，實際上響應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。

全景中的多個手機屏幕

拉下最近的手機空間並按照此鏈接進行設置 - [ 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，如下所示。 注意我已經manaually創建了所有.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>

Debug，Go，您應該看到頁面顯示類似於本文頂部的圖片。

如果你想將PhoneGap頁面設置為與Panorama背景相匹配，調整高度，刪除背景圖像，無論如何，default.css是你的朋友。 標記並享受！

Answer 3

解決方案是放棄Web技術的用戶來構建原生式應用程序，而不是完全原生的。 混合應用程序框架是邪惡的。

如何使用PhoneGap / Cordova為Windows Phone 7創建簡單的全景應用程序？

問題描述

3 個解決方案

解決方案1
3 2013-03-27 03:00:53

解決方案2
2 2012-12-11 22:13:25

解決方案3
0 已采納 2017-01-04 12:59:21

如何使用PhoneGap / Cordova為Windows Phone 7創建簡單的全景應用程序？

問題描述

3 個解決方案

解決方案1 3 2013-03-27 03:00:53

解決方案2 2 2012-12-11 22:13:25

解決方案3 0 已采納 2017-01-04 12:59:21

解決方案1
3 2013-03-27 03:00:53

解決方案2
2 2012-12-11 22:13:25

解決方案3
0 已采納 2017-01-04 12:59:21