如何在Appgyver類固醇中創建自定義的webview

Question

我打算創建以下設計：

• 主視圖應顯示一個網頁
• 它應該在左側有一個抽屜
• 抽屜應由應用程序標題中的“漢堡”圖標觸發

我現在具有以下應用程序結構：

主視圖：

<div class="padding" ng-controller="IndexController">
    <super-navbar>
        <super-navbar-title>
            My first app!
        </super-navbar-title>
    </super-navbar>    
</div>

控制器：

angular
  .module('example')
  .controller('IndexController', function($scope, $document, supersonic) {
      $scope.navbarTitle = "Index";         
      addEventListener('load', load, false);
      steroids.view.displayLoading();
      var googleLayer = null;
      googleLayer = new steroids.views.WebView({ location: "http://example.com/page1" });;
      googleLayer.preload({}, {
          onSuccess: replaceLayer
      });

      function load() {        

          var options = {
              side: "left",
              width: 150
          }
          supersonic.ui.views.find("leftDrawer").then(function (leftDrawer) {
              supersonic.ui.drawers.init(leftDrawer);
              supersonic.ui.drawers.open("leftDrawer")
          });

      }
      function replaceLayer() {          
          steroids.layers.replace({
              view: googleLayer,
          }, {
              onSuccess: function () {
                  //alert("The layer stack has been replaced.");
              },
              onFailure: function (error) {
                  //alert("Could not replace the layer stack: " + error.errorDescription);
              }
          });
      }      
  });

結構咖啡：

# Read more about app structure at http://docs.appgyver.com

module.exports =

  # See styling options for tabs and other native components in app/common/native-styles/ios.css or app/common/native-styles/android.css
#tabs
    rootView:
     location: "example#getting-started"

  preloads: [
    {
      id: "learn-more"
      location: "example#learn-more"
    }
    {
      id: "using-the-scanner"
      location: "example#using-the-scanner"
    }
  ]

  drawers:
    left:
      id: "leftDrawer"
      location: "example#drawer"
      showOnAppLoad: true
     options:
      animation: "swingingDoor"

 # initialView:
  #   id: "initialView"
   #  location: "example#initial-view"

到目前為止的行為：

• 該應用程序啟動並顯示一個加載圓圈（由於steroids.view.displayLoading(); ）
• 加載圓圈消失並且網頁加載（因為googleLayer替換了初始視圖）
• 沒有顯示抽屜

我認為，應該進行以下修改：

• 初始視圖應該已經加載了頁面（如何？它只是一個div）
• 抽屜應該在工作
• 應該有一個可點擊的“漢堡”圖標

我應該進行哪些修改才能實現所需的行為？ 我找不到任何適當的教程或足夠的文檔。

Answer 1

您的初始視圖已被評論。 去除 ”＃”

Answer 2

關於您要午餐的第一個視圖：

您必須使用Tabs或InitialView並且選項卡的工作方式是使用第一個選項卡內容作為預先選擇的內容並顯示它。 因此，如果您對其進行評論或使其保持打開狀態，InitialView將毫無意義。

在Structure.coffee

tabs: [
    {
      title: "Index"
      id: "index"
      location: "home#index" # Supersonic module#view type navigation
    }
    {
      title: "About"
      id: "geolocation"
      location: "home#drawer"
    }
    {
      title: "Internet"
      id: "internet"
      location: "http://google.com" # URLs are supported!
    }
  ]

對於僅使用InitialView的情況，請注釋上面的行，並取消注釋下面的行，這是：

  rootView:
    location: "example#getting-started"

關於抽屜，首先，請確保要使用此數組，以便將其作為module.exports =一部分。

對於可點擊的漢堡包，您現在無法在導航欄中將其顯示為圖標（我想這個限制是因為將超音速指令呈現為本機UI）。

要解決此問題 ，您可以完全替換它（我不建議這樣做，可能會影響應用程序的性能）。

或者只是將此代碼添加到要顯示它的<super-navbar>內部內容中（在您的情況下為getting-started.html

<super-navbar-button onclick="supersonic.ui.drawers.open('left')" >
    &equiv;
</super-navbar-button>