在android上运行ionic总是返回404错误

时间:2015-11-07 15:52:12

标签: android cordova ionic

我正在使用离子框架,我认为自上次更新以来,每当我在android ionic run android上运行时,所有网址都会返回404。 ionic serve工作正常,ionic run ios

所以问题只出在android上。

  • 我添加了Cordova白名单插件,更改了我的config.xml和index.html,但仍面临同样的问题。

在config.xml中:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.yeswegreen569862" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyAppName</name>
    <description>
        An Ionic Framework and Cordova project.
    </description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="*" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <platform name="android">
        <allow-navigation href="*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-navigation href="*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
    </platform>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" />
    <preference name="xwalkVersion" value="15+" />
    <preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
    <preference name="xwalkMode" value="embedded" />
    <preference name="xwalkMultipleApk" value="true" />
</widget>
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 *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

<title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/header.css" rel="stylesheet">
        <link href="css/tab-main.css" rel="stylesheet">
        <link href="css/cat-details.css" rel="stylesheet">
        <link href="css/tab-list.css" rel="stylesheet">
        <link href="css/tab-details.css" rel="stylesheet">
        <link href="css/tab-favorite.css" rel="stylesheet">
        <link href="css/tab-add.css" rel="stylesheet">
        <link href="css/tab-settings.css" rel="stylesheet">

        <!-- google maps javascript-->
        <script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

        <!-- ionic/angularjs js -->
        <script src="js/jquery.js"></script>
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/angular-md5.js"></script>

        <script src="js/ng-cordova.min.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>


        <script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>


        <script src="js/angular-translate.min.js"></script>
        <script src="js/angular-ios9-uiwebview.js"></script>
        <!-- your app's js -->
        <script src="js/utils.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/services.js"></script>
      </head>
      <body ng-app="myappname">

        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button>
          </ion-nav-back-button>
        </ion-nav-bar>

        <ion-nav-view></ion-nav-view>

      </body>
    </html>

app.js:

angular.module(' myappname', ['ionic', ' myappname.controllers', ' myappname.services', 'pascalprecht.translate','ngCordova','ionic-timepicker','ngIOS9UIWebViewPatch'])

.run(['$ionicPlatform', '$rootScope',' myappnameService',function($ionicPlatform, $rootScope, myappnameService) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });

   $rootScope.errorCodes = {
    '5001' : 'invalid_email',
    '5002' : 'invalid_username',
    '5003' : 'invalid_password',
    '5004' : 'email_already_exits',
    '5005' : 'username_already_exits',
    '5006' : 'error_while_subscribing'
  };
  $rootScope.categoriesPromise =  myappnameService.getCategoriesWithSpots();

}])
.config(function($stateProvider, $urlRouterProvider, $translateProvider, $ionicConfigProvider) {

  // $ionicConfigProvider.backButton.icon(' myappname-nav-back');
  $ionicConfigProvider.backButton.text('');//
  $ionicConfigProvider.navBar.alignTitle('center');

  $stateProvider
  // setup an abstract state for the tabs directive
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })


  // Each tab has its own nav history stack:

  .state('tab.search', {
    cache: false,
    url: '/search',
    views: {
      'tab-search': {
        templateUrl: 'templates/tab-search.html',
        controller: 'SearchCtrl'
      }
    }
  })
  .state('tab.main', {
    cache: false,
    url: '/main',
    views: {
      'tab-search': {
        templateUrl: 'templates/tab-main.html',
        controller :'SearchCtrl'
        }
      }
  })
   .state('tab.cat-details', {
    cache: false,
    url: '/cat-details/:id',
    views: {
      'tab-search': {
        templateUrl: 'templates/cat-details.html',
        controller :'CategoryCtrl'
        }
      }
  })
  .state('tab.favorite', {
       cache: false,
      url: '/favorite?loggedIn',
      views: {
        'tab-favorite': {
          templateUrl: 'templates/tab-favorite.html',
          controller: 'FavoriteCtrl'
        }
      }
    })
  .state('tab.add', {
    url: '/add?loggedIn',
    views: {
      'tab-add': {
        templateUrl: 'templates/tab-add.html',
        controller: 'AddCtrl'
      }
    }
  }).state('tab.settings', {
    url: '/settings?loggedIn',
    views: {
      'tab-settings': {
        templateUrl: 'templates/tab-settings.html',
        controller: 'SettingsCtrl'
      }
    }
  })
  .state('tab.favsubscribe', {
    url: '/favorite/subscribe',
    views: {
      'tab-favorite': {
        templateUrl: 'templates/subscribe.html',
        controller: 'AuthCtrl'
      }
    }
  })
  .state('tab.favlogin', {
    url: '/favorite/login',
    views: {
      'tab-favorite': {
        templateUrl: 'templates/login.html',
        controller: 'AuthCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/main');

  $ionicConfigProvider.tabs.position('bottom');

    $translateProvider.translations('en', {
      search: "Search",
      favorite: "Favorite",
    });

    $translateProvider.translations('fr', {
      search: "Recherche",
      favorite: "Favoris",
    });


    $translateProvider.preferredLanguage("en");


});

我的service.js:

angular.module('myappname.services', [])
.config(["$provide", function ($provide) {
    var URL = "http://xxx.xx.xx.xx/html/myappname/";
    $provide.value("apiRoot", URL + "Service.php");
}])
.service('myappnameService', function ($http,apiRoot,$q) {

    var deferred = $q.defer();
    var selectedCateogry = '';
    var searchTerm = '';

    this.getCategories = function(){
        $http.get(apiRoot+'?action=getCategories').then(function(data) {
            deferred.resolve(data);
        });
        return deferred.promise;
    };
});

最后使用的插件列表:

com.ionic.keyboard 1.0.4 "Keyboard"
com.synconset.imagepicker 1.0.7 "ImagePicker"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-crosswalk-webview 1.4.0 "Crosswalk WebView Engine"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-directions 0.4.3 "Directions"
cordova-plugin-geolocation 1.0.1 "Geolocation"
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-whitelist 1.0.0 "Whitelist"
cordova-plugin-x-socialsharing 5.0.6 "SocialSharing"
org.apache.cordova.file 1.3.3 "File"
org.apache.cordova.file-transfer 0.5.0 "File Transfer"
  • 我检查了AndroidManifest,我有INTERNET权限

我使用离子到1.7.8,cordova 5.4.0

我应该做些什么才能让它发挥作用?

1 个答案:

答案 0 :(得分:3)

您有一些对普通开发人员来说不明显的问题。主要是因为它易于阅读并且没有意识到它可能不适用。但是,好消息是您的代码比大多数人的代码更清晰。

  1. <feature (...)>不适用于CLI。它适用于SDK。请参阅:The config.xml File,向下滚动。它靠近底部说:

      

    如果您使用CLI构建应用程序(...),则该元素不适用于您的工作流程。

    简而言之,那条线路没有做任何事情 - 当然也不是你打算做什么。

  2. <platform (...)>元素不适用于whitelist。您会在whitelist文档中看到明显丢失的内容。这是一个常见的错误。我不确定它是否在legacy-whitelist中;或者只是开发人员错误的逻辑跳跃。

  3. 将白名单内容移到<platform (...)> XML附件外部。它不应该是 platform 的孩子。 FWIW:whitelist主要适用于 Android ,并且适用于其他平台。

    1. 如果您在应用白名单方面需要帮助,请参阅以下文档:
      HOW TO apply the Cordova/Phonegap the whitelist system

    2. <preference>, <feature> and <platform>令人困惑。即使没有完成,本文档也会有所帮助。 The <preference> mess

    3. deviceready事件触发之前,您必须等待触发任何触及网络或任何移动设备服务的代码(尤其是Cordova控制的代码)。如果您将所有JavaScript <!-- your app's js -->移到</body>标记下方,这通常有效。

    4. 这是另一个可能有用的文档。 Top Mistakes by Developers new to Cordova/Phonegap