Question

我们使用Angular构建了一个HTML / JS iOS应用程序，它完全适用于桌面浏览器，但是当我将其作为PhoneGap项目包装并尝试在我的设备上运行时，它只会加载闪烁的启动画面到空白屏幕。我一直在寻找与路由类似的问题？我无法弄明白。有人可以帮忙吗？

HTML

<html>
<head>

    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid-12.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

    <script type="text/javascript" src="scripts/app.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/index.js"></script>
    <script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="scripts/main.js"></script>
    <script type="text/javascript">

    var is_ios = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);

    if (is_ios) {

        $('<link rel="stylesheet" type="text/css" href="css/iosbugfix.css" />').appendTo("head");

    };

    </script>

    <base href="/">

</head>

<body ng-app="appItmt" ng-controller="dataController">

    <div ng-view></div>

</body>

</html>

app.js

(function () {
    var itmtApp = angular.module("appItmt", ["ngRoute", "cgBusy"]);

    itmtApp.config([
        '$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/how-to/', {
                    templateUrl: 'how-to.html',
                    controller: 'dataController'
                })
                 .when('/privacy/', {
                     templateUrl: 'privacy.html',
                     controller: 'dataController'
                 })
                 .when('/about/', {
                     templateUrl: 'about.html',
                     controller: 'dataController'
                 })
                 .otherwise({
                     templateUrl: 'main.html',
                     controller: 'dataController'

                 });

            $locationProvider.html5Mode(true);
        }
    ]);
}());

Answer 1

您应该在运行JavaScript之前等待deviceready事件。有关此here的信息，请参阅Cordova文档。

这标志着PhoneGap / Cordova准备好了，运行JavaScript是安全的。

Answer 2

尝试以下代码可能有所帮助：

在yourapp / platforms / ios / cordova /中更改config.xml并添加以下首选项：

<preference name="ShowSplashScreenSpinner" value="false" />
将以下代码添加到app.js：

angular.module('starter.controllers', []) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { setTimeout(function() { navigator.splashscreen.hide(); }, 100); }); })

尝试重建您的应用：$ ionic build ios

并尝试$ ionic emulate ios。

希望这有帮助。

Answer 3

我遇到了同样的问题。使调试变得更糟的原因是应用程序可以使用ionic run android运行，但不会运行ionic build android

我发现我的应用程序无法正常工作 <base href="/"> 这同时意味着我必须删除 $locationProvider.html5Mode(true);

然后我找到了答案here

构建应用基础时，应更改为<base href=".">

PhoneGap Angular iOS App仅显示白屏

3 个答案: