Cordova 小米8留海螢幕適配之 從開始到結束 總結
阿新 • • 發佈:2018-12-18
之前專案中打包的apk安裝到全面屏手機後,發現在應用下方出現了一大塊黑色區域(如:小米8),只有在系統中設定適配全面屏才能讓應用在全面屏手機中顯示正常,但是這種方式並不友好,而且有些手機廠商可能也沒有這種設定,所以還是需要我們再打包的時候就做一些相應的處理。
<activity android:name=".MainActivity" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:exported="true" android:label="@string/activity_name" android:launchMode="singleTop" android:screenOrientation="portrait" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustPan"> <intent-filter android:label="@string/launcher_name"> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <meta-data android:name="android.max_aspect" android:value="2.1" />
接下來就是沉浸狀態列了
Cordova 之燃燒我的卡路里 (刪除 自己配置statusBar)
方案1刪除()
方案2 改顏色 ()
然後給web端看了 就很上道的給了一串程式碼 換上了 居然真的可以了
在app.js下 修改
if (window.StatusBar) { window.StatusBar.overlaysWebView(true); window.StatusBar.styleDefault(); window.StatusBar.backgroundColorByName("gxbColor"); }
在 cordova-plugin-statusbar
cordova.define("cordova-plugin-statusbar.statusbar", function(require, exports, module) { /* * * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. * */ var exec = require('cordova/exec'); var namedColors = { "black": "#000000", "darkGray": "#A9A9A9", "lightGray": "#D3D3D3", "white": "#FFFFFF", "gray": "#808080", "red": "#FF0000", "green": "#00FF00", "blue": "#0000FF", "cyan": "#00FFFF", "yellow": "#FFFF00", "magenta": "#FF00FF", "orange": "#FFA500", "purple": "#800080", "brown": "#A52A2A", "gxbColor": "#1FB6FF" }; var StatusBar = { isVisible: true, overlaysWebView: function (doOverlay) { exec(null, null, "StatusBar", "overlaysWebView", [doOverlay]); }, styleDefault: function () { // dark text ( to be used on a light background ) exec(null, null, "StatusBar", "styleDefault", []); }, styleLightContent: function () { // light text ( to be used on a dark background ) exec(null, null, "StatusBar", "styleLightContent", []); }, styleBlackTranslucent: function () { // #88000000 ? Apple says to use lightContent instead exec(null, null, "StatusBar", "styleBlackTranslucent", []); }, styleBlackOpaque: function () { // #FF000000 ? Apple says to use lightContent instead exec(null, null, "StatusBar", "styleBlackOpaque", []); }, backgroundColorByName: function (colorname) { return StatusBar.backgroundColorByHexString(namedColors[colorname]); }, backgroundColorByHexString: function (hexString) { if (hexString.charAt(0) !== "#") { hexString = "#" + hexString; } if (hexString.length === 4) { var split = hexString.split(""); hexString = "#" + split[1] + split[1] + split[2] + split[2] + split[3] + split[3]; } exec(null, null, "StatusBar", "backgroundColorByHexString", [hexString]); }, hide: function () { exec(null, null, "StatusBar", "hide", []); StatusBar.isVisible = false; }, show: function () { exec(null, null, "StatusBar", "show", []); StatusBar.isVisible = true; } }; // prime it exec(function (res) { if (typeof res == 'object') { if (res.type == 'tap') { cordova.fireWindowEvent('statusTap'); } } else { StatusBar.isVisible = res; } }, null, "StatusBar", "_ready", []); module.exports = StatusBar; });