jquery移动加载器无法在android上运行

Question

我正在为 Android 和 iOS 开发一个混合应用程序。这不是我的第一个应用程序，但我也不认为自己是专家。目前我的目标是 Android 4.4 或更高版本。对于 iOS，我有一个 iPhone 4S 进行测试，不支持低于 iOS 9.2 的任何内容。为了制作这个应用程序，我目前正在使用 Phonegap Build，它输出 version=cli-5.2.0 并使用 jQuery Mobile 1.4.5 作为处理 UI、导航等的框架。 Javascript 正在本地加载 - 从设备。

考虑到某些服务器交互需要一些时间来加载，我想在服务器交互过程中显示加载 gif。为此，我使用了来自 jQuery Mobile 的 loader 小部件。 ajax请求调用代码如下：

$.serviceCall = function(web_method, web_root, params){

    var ajax_response;
    var request_url = 'http:/some.url.com/' + web_root + '/' + web_method;

    $.mobile.loading( "show", {
        text: "loading",
        textVisible: false,
        theme: "z",
        html: ""
    });

    $.ajax({
        type: 'get',
        contentType: 'application/json; charset=utf-8',
        async: false,
        dataType: 'json',
        url: request_url,
        data: params,
    }).done(function(data){
        ajax_response = data
        ajax_response.callback = 'done';
        $.mobile.loading("hide");
    }).fail(function(jqXHR, textStatus, errorThrown){
        var failure_details = {
            status: jqXHR.status,
            text_status: textStatus,
            error_thrown: errorThrown
        };
        ajax_response = failure_details;
        ajax_response.callback = 'fail';
    $.mobile.loading("hide");
    });

    return ajax_response;
};

当从桌面浏览器或从涟漪模拟器访问以模拟实际设备时，它工作得非常好。一旦请求开始，加载程序就会显示，一旦请求结束就会隐藏并进行页面转换。

但是，在 android 上不起作用。每当请求启动时，无论请求花费多长时间，加载程序都不会显示。我需要应用移动操作系统的任何技巧才能使其正常工作吗？

Answer 1

查看guide，了解如何检查应用程序。

我建议取出$.mobile.loading("hide");，这样您就可以保持加载程序运行以查看发生了什么。可能是z-index 问题或console 中的错误

Answer 2

你犯了一个常见的错误。您需要申请whitelist 系统。从Cordova Tools 5.0.0（2015 年 4 月 21 日）开始需要它。对于Phonegap Build，这意味着从cli-5.1.1（2015 年 6 月 16 日）开始

将此添加到您的config.xml

<plugin name="cordova-plugin-whitelist"      source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

请注意，您的应用现在不安全。保护您的应用程序由您决定。
将以下内容添加到您的 index.html

<meta http-equiv="Content-Security-Policy" 
         content="default-src *; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

这个白名单工作表应该会有所帮助。
HOW TO apply the Cordova/Phonegap the whitelist system

如果不是这个，那么可能有一个我可能不熟悉的 JQuery Mobile 设置。