javascript - Phonegap Cordova Statusbar 插件创建双条

Question

我正在使用 phonegap 开发应用程序。通过 CLI 构建，而不是 phonegap 构建。我在使用 cordova-plugin-statusbar 插件时遇到问题。它会在打开时增加一个额外的条形高度。这是它的样子。

双高菜单栏:

我用两种方式实现了状态栏。首先通过在config.xml中添加标签

<platform name="ios">
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarStyle" value="default" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
</platform>

我还使用 javascript 完成了此操作(首先删除配置标签)并将以下内容添加到我的 DeviceReady 函数中

StatusBar.overlaysWebView( false );
StatusBar.backgroundColorByHexString('#000000');
StatusBar.styleDefault(); 

为了看看发生了什么，我改变了颜色，我明白了

双状态栏 2 种颜色:

此外，当我删除所有内容或将 overlaysWebView 设置为“true”时，我没有间距，我的内容位于菜单栏下方。

StatusBar.overlaysWebView( true );

这让我相信我没有 CSS 问题。另外，我浏览了我的 css，没有看到任何可以添加它的东西。到目前为止，我的 CSS 非常基础。

/* Style Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;

}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* End of style reset */

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
/*    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment:fixed;*/
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
/*    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;*/
    background-color: #333333;
}

.md-button {
    color:#DFE5E6;
    background-color:#1D1D1D;
}

.md-button[disabled] {
  border: 1px solid black;
  color : rgba(0, 0, 0, 0.26);
  background-color: transparent;
}


/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

/* Custom Fonts */
@font-face {
    font-family: "sapient_sans_regular";
    src: url("../fonts/sapient_sans_regular.TTF") format("opentype"); 
}
@font-face {
    font-family: "sapient_sans_regular_italic";
    src: url("../fonts/sapient_sans_regular_italic.TTF") format("opentype"); 
}
@font-face {
    font-family: "sapient_sans_bold";
    src: url("../fonts/sapient_sans_bold.TTF") format("opentype"); 
}
@font-face {
    font-family: "sapient_sans_bold_italic";
    src: url("../fonts/sapient_sans_bold_italic.TTF") format("opentype"); 
}


.material-icons {
    margin:0px;
    color:white; 
    height:40px; 
    width:40px; 
    line-height:40px;
    vertical-align: middle;
    text-align: center;
    background: #1D1D1D;
}
.material-icons.md-menu-item.md-icon {
    text-align: left;
}

.material-icons.menuItem {
    background: transparent;
    color:#DFE5E6; 
}

#menuBar ul {
    position:fixed;
    top:0;
    width:100%;
    list-style-type: none;
    background-color: #1D1D1D;
}
#menuBar li {
    text-align:center;
    display: inline;
}

.logo {
    line-height:11px;
    padding:13px 2px;
    display: inline-block;
    vertical-align: middle;
    //float:left;
    //margin: auto;
    overflow: auto;
    width:100%;
    background-color: #1D1D1D;
    border-bottom: 1px solid white;
}
.my {
    //line-height:40px;
    text-transform: capitalize;
    font-family: "sapient_sans_bold";
    //display: inline-block;
    font-size:20px;
    color: #DFE5E6;
}
.company {
    //line-height:40px;
    text-transform: capitalize;
    font-family: "sapient_sans_bold";
    font-size:20px;
    color: #6D6E70;
}

#menuListing ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f1f1f1;
}

#menuListing li a {
    font-family:'sapient_sans_regular';
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
#menuListing li a:hover {
    background-color: #555;
    color: white;
}
.content {
    color: white;
    padding:10px;
}

h1 {
    font-size:18px;
    font-weight:normal;
    //margin:0px;
    //overflow:visible;
    //padding:0px;
    //text-align:center;
}

.hidden {
    display: none;
}

#map
{

    //margin: auto;
    //width: 100%;
    border: 3px solid green;
    padding: 100px;
    //height: 90%;
    //width: 60%;
}

我已经尝试卸载并重新安装插件和 ios 平台，但问题没有改变。

我已经在多个 IOS 模拟器(不同的手机)上测试过，结果都是一样的，我还没有直接在设备上测试过，但我怀疑它会有所不同。

我注意到 android 也有一个状态栏缓冲区(尽管它不应该)，但它只是一个白色的栏。我认为这会建议使用 CSS，但我在运行时没有在浏览器中看到它

phonegap serve

快速更新:我正在从状态栏中休息一下，并努力让我的谷歌地图插件也能正常工作，我做了一些更改，状态栏现在似乎可以正常工作了。一定有某种互动。去看看我是否能弄清楚到底是什么。

一些供引用的HTML索引.html

<!DOCTYPE html>
<html ng-app="snApp">
<head>

    <title>My Test App</title>
</head>

<!-- Actual Content -->
<body ng-cloak>

    <div ng-include="'app/menuBar/menuBar.html'"></div>
    <!-- Main content Area -->
    <md-content flex id="main">
        <ng-view></ng-view>
    </md-content>

</body>
</html>

MenuBar.html(请注意，我已根据此原始帖子进行了一些调整。我已尝试还原它们。)

<div ng-controller="menuBarController as menuBarController" id="menuBarContainer">

<md-toolbar id="menuBar" class="md-short" layout="row">
    <div class="menuButton">
        <md-icon ng-click="menuBarController.toggleLeftMenu();" md-font-library="material-icons">menu</md-icon>
    </div>

    <div class="logo">
        <span class="my">My</span><!-- this removes the space (for some reason) --><span class="app">App</span>
    </div>
</md-toolbar>

<md-sidenav md-component-id="left" class="md-sidenav-left" >
    <md-menu-item>
    </md-menu-item> <!-- remove this after adding in the buffer -->

    <md-menu-item>
        <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/"> 
            <md-icon md-font-library="material-icons" class="menuItem">home
            </md-icon> Home
        </md-button>
    </md-menu-item>

    <md-menu-item>
        <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/locations">
            <md-icon md-font-library="material-icons" class="menuItem">location_city
            </md-icon>Locations
        </md-button>
    </md-menu-item>

    <md-menu-item>
        <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/map">
            <md-icon md-font-library="material-icons" class="menuItem">map
            </md-icon>Map
        </md-button>
    </md-menu-item>

    <md-menu-item>
        <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/navigate">
            <md-icon md-font-library="material-icons" class="menuItem">navigation
            </md-icon>Navigate
        </md-button>
    </md-menu-item>

    <md-menu-item>
        <md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/about">
            <md-icon md-font-library="material-icons" class="menuItem">info
            </md-icon>About
        </md-button>
    </md-menu-item>
</md-sidenav>
</div>

菜单栏 Controller

console.log("menuBar.controller.js file loaded");

snApp.controller('menuBarController', ['$mdSidenav', '$window', MenuBarController]);


function MenuBarController($mdSidenav, $window) {
    var vm = this;

    // vm.operatingSystem = $window.operatingSystem;
    vm.operatingSystem = null;
    vm.toggleLeftMenu = toggleLeftMenu;
    vm.checkForIos = checkForIos;

    function toggleLeftMenu() {
        $mdSidenav('left').toggle();
    }
}

查看示例 - Home.html 页面现在非常简单用于测试:

<!-- home.html -->
<div class="content" ng-controller="HomeController as home">
    <h1>Home Page</h1>
    <p>{{ home.message }}</p>
</div>

home.controller.js

console.log("home.controller.js file loaded");

angular.module('snApp')
.controller("HomeController", HomeController);

function HomeController() {
    //debugger;
    var vm = this;
    vm.message = "this is a home message";
}

map.html - 这是 map View - 现在有很多内容仅供测试。

<!-- map.html -->
<div class="content" ng-controller="MapController as map">
    <h1>Map Page</h1>
    <md-content  layout-gt-sm="row" layout-padding>
        <md-button ng-click="map.setMapToDiv();">show map</md-button>
        <md-button ng-click="map.getLocation();" ng-disabled="map.buttonDisabled">{{ map.buttonText }}</md-button>
        <md-input-container>
            <label>Div Adjustent</label>
            <input ng-model="map.divAdjustment">
        </md-input-container>
        <md-button ng-click="map.adjustDiv();" > Adjust Div Height </md-button>
        <p></p>
        <p>For testing - buttonEnabled value: <span ng-bind="map.buttonDisabled"></span></p>
        <p>{{ map.latitude }}</p>
        <p>{{ map.longitude }}</p>
        <p>{{ map.message }}</p>
        <p></p>
        <md-button ng-click="map.showMapDialog();">make map full screen</md-button>
        <!-- <div id="map" ng-show="map.locationUpdated"> -->
        <div id="map" ng-show="true"></div>
    </md-content>
</div>

map .controller.js

    console.log("map.controller.js file loaded");

angular.module('snApp')
.controller("MapController", ['$scope', MapController]);

function MapController($scope) {
    // Variables
    var vm = this;
    vm.latitude = 0;
    vm.longitude = 0;
    vm.locationUpdated = false;
    vm.buttonTextDefault = "Get Location";
    vm.buttonText = vm.buttonTextDefault;
    vm.buttonDisabled = false;

    vm.divAdjustment = 0;
    vm.message = "Map will display after getting Geolocation";

    // Method Declarations
    vm.getLocation = getLocation;
    vm.setMapToDiv = setMapToDiv;
    vm.showMapDialog = showMapDialog;
    // vm.adjustDiv = adjustDiv;

    // Gets the Current Geolocation for user
    function getLocation() {
        vm.buttonDisabled = true;
        vm.buttonText = "Working...";
        var options = { maximumAge: 0, timeout: 10000, enableHighAccuracy: true };
        navigator.geolocation.getCurrentPosition(getLocationSuccess,getLocationError,options);
        vm.buttonDisabled = false;
    }

    function getLocationSuccess(position) {
        console.log("found geolocation");
        vm.latitude = position.coords.latitude;
        vm.longitude = position.coords.longitude;
        vm.buttonText = vm.buttonTextDefault;
        googleMaps.positionMapToCoords(vm.latitude, vm.longitude);
        vm.locationUpdated = true;
        $scope.$apply();
    }

    function getLocationError(error) {
        console.log("Error finding geolocation");
        alert('code: '    + error.code    + '\n' +
                'message: ' + error.message + '\n');
        vm.buttonText = vm.buttonTextDefault;
        $scope.$apply();
    }

    function setMapToDiv() {
        googleMaps.setMapToDiv();
    }

    function showMapDialog() {
        googleMaps.showMapDialog();
    }

}

Answer 1

如果有人碰到这个，遇到同样的问题。我基本上找到了一个更像是解决方法而不是直接答案的解决方案，但可能会有所帮助。我决定仍然使用该插件来正确地为文本着色，但其余的我手动管理。

    StatusBar.overlaysWebView(true);
    StatusBar.backgroundColorByHexString('#1D1D1D');
    StatusBar.styleLightContent();

然后是一些 CSS

#statusBar {
    background-color:#1D1D1D;
    width:100%;
    min-width:100%;
    overflow: auto;
    min-height:20px;
    height:20px;
}

我将这个 div 作为菜单栏的一部分。菜单栏是它自己的 Angular 组件。在 Controller 中，我有一个检查操作系统版本的方法。感谢这篇文章:Detecting iOS / Android Operating system

snApp.controller('menuBarController', ['$mdSidenav', '$window', '$googleMapsService', MenuBarController]);


function MenuBarController($mdSidenav, $window, $googleMapsService) {
    var vm = this;
    var leftMenuId = 'left';
    vm.isIosValue = false;

    vm.$onInit = function() {
        vm.isIosValue = vm.checkForIos();
    }

    vm.operatingSystem = null;
    vm.toggleLeftMenu = toggleLeftMenu;
    vm.getMobileOperatingSystem = getMobileOperatingSystem;
    vm.checkForIos = checkForIos;
    vm.isIos = isIos;

    vm.googleMaps = $googleMapsService;

    function toggleLeftMenu() {
        mapDivManagement();
        $mdSidenav(leftMenuId).onClose(mapDivManagement).toggle();
    }

    function mapDivManagement() {
        if(vm.googleMaps.checkMap() && $window.location.hash == "#/map")
        {
            if($mdSidenav(leftMenuId).isOpen()) {
                console.log("vm.googleMaps.revealMap(true);");
                vm.googleMaps.revealMap(true);
            }
            else {
                console.log("vm.googleMaps.revealMap(false);");
                vm.googleMaps.revealMap(false);
            }
        }
    }


    /**
     * Determine the mobile operating system.
     * This function sets global variable to one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
     *
     * @returns {String}
     *
     * Source: https://stackoverflow.com/questions/21741841/detecting-ios-android-operating-system
     */
    function getMobileOperatingSystem() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
        //debugger;
          // Windows Phone must come first because its UA also contains "Android"
        if (/windows phone/i.test(userAgent)) {
            // return "Windows Phone";
            vm.operatingSystem =  "Windows Phone";
        }
        else if (/android/i.test(userAgent)) {
            // return "Android";
            vm.operatingSystem =  "Android";
        }
        // iOS detection from: https://stackoverflow.com/a/9039885/177710
        else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            // return "iOS";
            vm.operatingSystem =  "iOS";
        }
        else {
            vm.operatingSystem =  "unknown";
        }
            // return "unknown";
    }

    function checkForIos() {
        vm.getMobileOperatingSystem();
        //vm.operatingSystem = $window.operatingSystem;
        if(vm.operatingSystem == 'iOS') {
            return true;
        }
        else {
            return false;
        }
    }

    function isIos() {
        return vm.isIosValue;
    }
}

最后，在我的 menubar.html 文件中，我有这个 div:

    <!-- Status Bar -->
<div ng-show="menuBarController.isIos()" id="statusBar"></div>

这将根据操作系统显示或隐藏 div。

不确定这将如何在通话中发挥作用，但除此之外它会让你走得更远。