Cordova Framework7 v2在android build

Question

当我在浏览器中运行基于Framework7 v2的cordova应用程序时，搜索栏正常运行，没有任何问题。然而，当我制作一个Android版本时，该应用程序将正确显示启动画面，然后是一个不会消失的白色屏幕。我注意到，一旦我删除了搜索栏初始化代码行，那么android构建正常运行并显示应用程序的内容。

var base_url = 'http://mysecretdomain.com/ugdirectory/index.php/';
var app = new Framework7({
  root: '#app',
  name: 'UG Directory',
  id: 'com.ugdirectory.test',
  panel: {
    swipe: 'right',
  },
  routes: [{
      name: 'home',
      path: '/home/',
      templateUrl: './index.html',
    },
    {
      name: 'search-companies',
      path: '/search-companies/',
      templateUrl: './search-companies.html',
    },
    {
      name: 'companies',
      path: '/companies/',
      async: function(routeTo, routeFrom, resolve, reject) {

        var id = routeTo.query.id;
        var criteria = routeTo.query.criteria;

        if (id === undefined) {
          var request_url = base_url + 'app/company-list';
        } else {
          if (criteria == 'category') {
            // By category
            var request_url = base_url + 'app/category-company-list/' + id;
          } else if (criteria == 'sublocations') {
            // By sub location
            var request_url = base_url + 'app/sub-region-company-list/' + id;
          }
        }

        app.request.get(request_url, function(data) {
          var json_data = JSON.parse(data);
          var pagedata = json_data.data;
          resolve({
            templateUrl: './companies.html',
          }, {
            context: {
              data: pagedata,
            },
          });
        });

      },
    },
    {
      name: 'company',
      path: '/company/',
      async: function(routeTo, routeFrom, resolve, reject) {

        var listing_id = routeTo.query.id;
        app.request.get(base_url + 'app/company-data/' + listing_id, function(data) {

          var json_data = JSON.parse(data);
          var pagedata = json_data.data;
          resolve({
            templateUrl: './company.html',
          }, {
            context: {
              data: pagedata,
            },
          });
        });

      },
    },
    {
      name: 'categories',
      path: '/categories/',
      async: function(routeTo, routeFrom, resolve, reject) {

        app.request.get(base_url + 'app/category-data/', function(data) {
          var json_data = JSON.parse(data);
          var pagedata = json_data.data.categories;
          resolve({
            templateUrl: './categories.html',
          }, {
            context: {
              data: pagedata,
            },
          });
        });

      },
    },
    {
      name: 'locations',
      path: '/locations/',
      async: function(routeTo, routeFrom, resolve, reject) {

        app.request.get(base_url + 'app/region-data/4', function(data) {
          var json_data = JSON.parse(data);
          var pagedata = json_data.data.regions;
          resolve({
            templateUrl: './locations.html',
          }, {
            context: {
              data: pagedata,
            },
          });
        });

      },
    },
    {
      name: 'sub-locations',
      path: '/sub-locations/',
      async: function(routeTo, routeFrom, resolve, reject) {

        var region_id = routeTo.query.id;
        app.request.get(base_url + 'app/sub-region-data/' + region_id, function(data) {
          var json_data = JSON.parse(data);
          var pagedata = {
            location: 'Kampala',
            sublocations: json_data.data.sub_regions
          };
          console.log(pagedata);
          resolve({
            templateUrl: './sub-locations.html',
          }, {
            context: {
              data: pagedata,
            },
          });
        });

      },
    },
    {
      name: 'logos',
      path: '/logos/',
      async: function(routeTo, routeFrom, resolve, reject) {

        app.request.get(base_url + 'app/company-list', function(data) {
          // files cordova.file.dataDirectory
          var json_data = JSON.parse(data);
          var pagedata = json_data.data;
          resolve({
            templateUrl: './logos.html',
          }, {
            context: {
              data: pagedata,
            },
          });
        });

      },
    },
    {
      name: 'about',
      path: '/about/',
      templateUrl: './about.html',
    }
  ],

});

var $$ = Dom7;
var mainView = app.views.create('.view-main');


// Functions on page init
$$(document).on('page:init', '.page[data-name="companies"]', function(e) {
  // create searchbar
  var searchbar = app.searchbar.create({
    el: '.searchbar',
    searchContainer: '.list',
    searchIn: '.item-link',
    on: {
      search(sb, query, previousQuery) {
        console.log(query, previousQuery);
      }
    }
  });
});

$$(document).on('page:init', '.page[data-name="locations"]', function(e) {
  // create searchbar
  var searchbar = app.searchbar.create({
    el: '.searchbar',
    searchContainer: '.list',
    searchIn: '.item-link',
    on: {
      search(sb, query, previousQuery) {
        console.log(query, previousQuery);
      }
    }
  });
});

$$(document).on('page:init', '.page[data-name="sub-locations"]', function(e) {
  // create searchbar
  var searchbar = app.searchbar.create({
    el: '.searchbar',
    searchContainer: '.list',
    searchIn: '.item-link',
    on: {
      search(sb, query, previousQuery) {
        console.log(query, previousQuery);
      }
    }
  });
});

$$(document).on('page:init', '.page[data-name="categories"]', function(e) {
  // create searchbar
  var searchbar = app.searchbar.create({
    el: '.searchbar',
    searchContainer: '.list',
    searchIn: '.item-link',
    on: {
      search(sb, query, previousQuery) {
        console.log(query, previousQuery);
      }
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <!-- Required meta tags-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#2196f3">
  <!-- Your app title -->
  <title>My App</title>
  <!-- Path to Framework7 Library CSS -->
  <link rel="stylesheet" href="dist/css/framework7.min.css">
  <link rel="stylesheet" href="assets/framework7-icons-master/css/framework7-icons.css">
  <link rel="stylesheet" href="assets/iconfont/material-icons.css">
  <!-- Path to your custom app styles-->
  <link rel="stylesheet" href="assets/my-app.css">
</head>

<body>
  <!-- App root element -->
  <div id="app">
    <!-- Statusbar overlay -->
    <div class="statusbar"></div>

    <div class="panel panel-right panel-cover">
      <div style="padding: 20px; color: #FFFFFF; background-color: #2E9697">
        <img src="assets/images/ugdirectory-logo.png" alt="" style="height: 80px;"><br>
        <strong>Business Directory UG</strong><br> Your Contacts Handler
      </div>
      <div class="block" style="margin-top: 0;">
        <!-- <p><a class="panel-close" href="#">Close me</a></p> -->
        <div class="list simple-list" style="margin-top: 0;">
          <ul>
            <li><a href="/home/">Home</a></li>
            <li><a href="/companies/">Names of Companies</a></li>
            <li><a href="/hospitals/">Hospitals</a></li>
            <li><a href="/clinics/">Clinics</a></li>
            <li><a href="/emergency/">Emergency</a></li>
            <li><a href="/update/">Update Directory</a></li>
            <li><a href="/about/">About</a></li>
          </ul>
        </div>
      </div>
    </div>


    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
      <!-- Initial Page, "data-name" contains page name -->
      <div data-name="home" class="page">

        <!-- Top Navbar -->
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">UG Directory</div>
            <div class="right">
              <a href="#" class="link panel-open" data-panel="right">
                <i class="f7-icons ios-only">more_vertical_fill</i>
                <i class="material-icons md-only">more_vert</i>
              </a>
            </div>
          </div>
        </div>

        <!-- Scrollable page content -->
        <div class="page-content">
          <div style="padding: 20px; color: #FFFFFF; background-color: #2E9697">
            <img src="assets/images/ugdirectory-logo.png" alt="" style="height: 100px;"><br>
            <strong>Business Directory UG</strong><br> Your Contacts Handler
          </div>
          <div class="list simple-list" style="margin-top: 0;">
            <ul>
              <li><a href="/search-companies/">Search Companies</a></li>
              <li><a href="/search-hospitals/">Search Hospitals</a></li>
              <li><a href="/search-clinics/">Search Clinics</a></li>
              <li><a href="/emergency-contacts/">Emergency Contacts</a></li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>


  <!-- Path to Framework7 Library JS-->
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="dist/js/framework7.min.js"></script>
  <!-- Path to your app js-->
  <script type="text/javascript" src="assets/my-app-online.js"></script>
</body>

</html>

<div data-name="companies" class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left">
        <a href="#" class="back">
          <i class="icon icon-back"></i>
        </a>
      </div>
      <div class="title">Names of Companies</div>
      <div class="right">
        <a href="#" class="link panel-open" data-panel="right">
          <i class="f7-icons ios-only">more_vertical_fill</i>
          <i class="material-icons md-only">more_vert</i>
        </a>
      </div>
      <div class="subnavbar">
        <!-- Searchbar with auto init -->
        <form class="searchbar">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search">
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="page-content">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>
    <!-- search target list -->
    <div class="list simple-list searchbar-found">
      <ul>
        {{#if data}} {{#each data}}
        <li class="item-content"><a class="item-link" href="/company/?id={{listing_id}}">{{name}}</a></li>
        {{/each}} {{/if}}
      </ul>
    </div>
    <!-- Nothing found message -->
    <div class="block searchbar-not-found">
      <div class="block-inner">Nothing found</div>
    </div>
  </div>
</div>

Answer 1

就我而言，在下面更改这些行：

on: {
    search(sb, query) {
      if(query == ''){
        $$('.search-results').hide();
      }
      else{
        $$('.search-preloader').show();
        // Emulate 0.5s loading for the demo

        app.request.get('http://abc.def/', { q:query }, function (data) {
  $$('.search-results').html(data);
  console.log('Load was performed');
});

        setTimeout(function () {
          $$('.search-preloader').hide();
          $$('.search-results').show();
        }, 500);
      }
    },
    clear(sb, previousQuery) {
      $$('.search-results').hide();
    },
    disable(sb) {
      $$('.search-results').hide();
    }
  }

解决了这些问题...

    on: { search: function (sb, query){
      if(query == ''){
        $$('.search-results').hide();
      }
      else{
        $$('.search-preloader').show();
        // Emulate 0.5s loading for the demo

        app.request.get('http://abc.def/', {  q:query }, function (data) {
  $$('.search-results').html(data);
  console.log('Load was performed');
});

        setTimeout(function () {
          $$('.search-preloader').hide();
          $$('.search-results').show();
        }, 500);
      }
    },
        enable: function () {
      console.log('Searchbar enabled')
    },
    clear : function () {
      $$('.search-results').hide();
    },
    disable : function () {
      $$('.search-results').hide();
    }

  }