Ionic/Cordova Web App - 启动时出现 index.html 错误

Posted 2023-03-12

技术标签:

【中文标题】Ionic/Cordova Web App - 启动时出现 index.html 错误【英文标题】：Ionic/Cordova Web App - index.html errors on launch 【发布时间】：2017-06-12 19:34:22 【问题描述】：

在 ios 设备和 Ionic Lab 上启动我的 Ionic 应用程序时，启动时会出现各种弹出窗口。我一直无法找出它们的含义以及如何解决，所以我希望这里有人可以提供帮助。

如果我接受第一个弹出窗口，应用程序将加载，然后取消其余的。

弹出窗口是：

弹出窗口 1： gap_init:2

弹出窗口 2：差距：[null,"Coreandroid","messageChannel","CoreAndroid867226728"]

弹出窗口 3：差距：[null,"CoreAndroid","show","CoreAndroid1105789195"]

弹出窗口 4：差距：[null,"CoreAndroid","overrideBackbutton","CoreAndroid633498247"]

由于错误提示“CoreAndroid”，我假设它与 android 配置有关。

我正在使用基于 CodeCanyon 上的包的框架。链接如下：Codecanyon Ionic App

我可以发布您希望我发布的任何代码，所以请告诉我。

这是 home.html 文件：

<ion-view view-title="appname">
<ion-nav-buttons side="right">
    <div class="cart-total ink">
        <button class="button ink icon-cart button-icon button-clear ion-ios-search-strong" ui-sref="quicksearch"></button>
    </div>
    <div class="cart-total ink" ui-sref="app.cart">
        <div ng-if="totalCartItem>0">
            <span>totalCartItem</span>
        </div>
        <button class="button ink button-icon button-clear fa fa-shopping-basket"></button>
    </div>
</ion-nav-buttons>
<ion-content class="home bg" overflow-scroll="true" scroll-to-top="150" delegate-handle="scroller">
    <ion-refresher
        on-refresh="doRefresh()">
    </ion-refresher>
    <div class="slider" ng-if="homeSlider">
        <ion-slide-box auto-play="1000" does-continue="true">
            <ion-slide ng-repeat="x in slides track by $index">
                <a href="#/app/x.params">
                    <div class="img" style="background-image: url(x.img)"></div>
                    <ion-spinner class="onload"></ion-spinner>
                </a>
            </ion-slide>    
        </ion-slide-box>
    </div>
    <div class="row">
        <ion-scroll direction="x">
            <div class="wide">
                <div ng-repeat="x in categories" ui-sref="app.category(id: x.id, slug: x.slug, title: x.name)">
                    <div class="slide-item">
                        <div ng-if="!x.image" class="img" style="background-image: url(img/product.png)"></div>
                        <div ng-if="x.image" class="img" style="background-image: url(x.image)"></div>
                        <ion-spinner class="onload"></ion-spinner>
                    </div>
                    <span class="out"></span>
                    <h3 class="center" ng-bind-html="x.name"></h3>
                </div>
            </div>
        </ion-scroll>
    </div>
    <div ng-if="products" class="item item-divider">
        LATEST PRODUCTS
    </div>
    <div class="row grid" ng-repeat="x in products track by $index" ng-if="$index%2==0">
        <div class="col col-50 ink item" ng-if="$index < products.length" ui-sref="app.product(id: products[$index].id)">
            <div class="badge">
                <span ng-if="!products[$index].in_stock" class="sold">$root.Dict.TXT_SOLD</span>
                <span ng-show="products[$index].regular_price > 0 && products[$index].on_sale" class="sale">
                    products[$index] | discount | number:0% OFF
                </span>
            </div>

            <ion-spinner class="onload"></ion-spinner>

            <div class="img" style="background-image: url(products[$index].featured_src ? products[$index].featured_src : 'img/product.png')"></div>
            <div class="info">
                <h3>products[$index].title</h3>
                                    <span ng-bind-html="products[$index].price | currency:format:decimal"></span>
                <del ng-show="products[$index].regular_price > 0 && products[$index].on_sale" ng-bind-html="products[$index].regular_price | currency:format:decimal"></del>
                    </div>
        </div>
                        <div class="col col-50 ink item" ng-if="$index+1 < products.length" ui-sref="app.product(id: products[$index+1].id)">
            <div class="badge">
                <span ng-if="!products[$index+1].in_stock" class="sold">$root.Dict.TXT_SOLD</span>
                <span ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" class="sale">
                    products[$index+1] | discount | number:0% OFF
                </span>
            </div>

            <ion-spinner class="onload"></ion-spinner>

            <div class="img" style="background-image: url(products[$index+1].featured_src ? products[$index+1].featured_src : 'img/product.png')"></div>
            <div class="info">
                <h3 ng-bind-html="products[$index+1].title"></h3>
                                    <span ng-bind-html="products[$index+1].price | currency:format:decimal"></span>
                                    <del ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" ng-bind-html="products[$index+1].regular_price | currency:format:decimal"></del>
            </div>
        </div>
    </div>
    <ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="more"></ion-infinite-scroll>
  </ion-content>
  <scroll-to-top-button animate="true">
    <div class="float-button">
        <span class="height-fix">
            <a class="content">
                <i class="ion-ios-arrow-up"> </i>
            </a>
        </span>
    </div>
</scroll-to-top-button>

这里是 index.html 文件：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos;  data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">



    <title>Ionstore</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/ionic.material.min.css" rel="stylesheet">

    <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
  </head>
  <body ng-app="app">
    <ion-nav-view></ion-nav-view>

    <!-- LOAD IONIC -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ionic.material.min.js"></script>

    <!-- NGCORDOVA -->
    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

    <!-- PAYPAL GATEWAY -->
    <script type="text/javascript" src="js/paypal-mobile-js-helper.js">
    </script>    

    <!-- LOAD CONTROLLER -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filter.js"></script>
    <script src="js/directive.js"></script>
    <script src="js/services.js"></script>
    <script src="js/config.js"></script>
    <script src="js/language.js"></script>

    <script src="js/topscroller.js"></script>
    <script src="js/wcapi.js"></script>

    <!-- LOAD ANGULAR MOMENT -->
    <script src="js/moment.min.js"></script>
    <script src="js/angular-moment.min.js"></script>

  </body>
</html>

【问题讨论】：

【参考方案1】：

修改您的 index.html 文件。必须在页面底部调用cordova.js。这对我有用。

  <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos;  data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">



    <title>Ionstore</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/ionic.material.min.css" rel="stylesheet">

    <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
  </head>
  <body ng-app="app">
    <ion-nav-view></ion-nav-view>

    <!-- LOAD IONIC -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ionic.material.min.js"></script>

<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
    </script>    

    <!-- LOAD CONTROLLER -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filter.js"></script>
    <script src="js/directive.js"></script>
    <script src="js/services.js"></script>
    <script src="js/config.js"></script>
    <script src="js/language.js"></script>

    <script src="js/topscroller.js"></script>
    <script src="js/wcapi.js"></script>

    <!-- LOAD ANGULAR MOMENT -->
    <script src="js/moment.min.js"></script>
    <script src="js/angular-moment.min.js"></script>


 <script src="js/ng-cordova.min.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
     </body>
</html>

【讨论】：

我同意这个答案:) 仍在加载警报。可悲的是。我的有弹出窗口 1：gap_init:3【参考方案2】：

您正在 iOS 应用中使用 android cordova.js。

您不必添加任何cordova.js文件，只需将其链接到index.html中，它将按平台生成并复制到正确的位置。

【讨论】：

以上是关于Ionic/Cordova Web App - 启动时出现 index.html 错误的主要内容，如果未能解决你的问题，请参考以下文章

ionic 和cordova的区别是啥

构建vue+ionic+cordova项目，开发全平台APP

通过 AirWatch 配置 Ionic (Cordova) iOS APP 分发？

Ionic2 + cordova + angular2 打包Android APP环境搭建

我想利用ionic，cordova，angularjs来制作一个简单的app应用，想知道具体该如何开始，能在浏览器测试就好

搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo