一、状态栏沉浸式、及字体颜色、背景色修改
关于该效果实现一般分为前端页面js处理和打包配置处理,本文主要记录打包配置处理。
添加插件cordova-plugin-statusbar
cordova plugin add cordova-plugin-statusbar
1、打包配置处理,网上通常都说修改StatusBar.java文件,但请注意StatusBar.java文件有两个:
直接修改platforms/android/src/org/apache/cordova/statusbar/StatusBar.java
this.cordova.getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
// // Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially
// // by the Cordova.
// Window window = cordova.getActivity().getWindow();
// window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
// // Read 'StatusBarBackgroundColor' from config.xml, default is #000000.
// setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "#000000"));
// // Read 'StatusBarStyle' from config.xml, default is 'lightcontent'.
// setStatusBarStyle(preferences.getString("StatusBarStyle", "lightcontent"));
Window window = cordova.getActivity().getWindow();
//添加代码start
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //顶部状态栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); //底部导航栏
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
window.setNavigationBarColor(Color.TRANSPARENT);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); //状态栏字体为黑色、不设为白色,根据顶部风格设置
//添加代码end
window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
// setStatusBarStyle(preferences.getString("StatusBarStyle", "lightcontent"));
}
});
修改plugins/cordova-plugin-statusbar/src/android/StatusBar.java,其内容和同上,但要注意的是上面的文件是由该文件编译而来的,所以如果修改该文件的话,需要重新添加平台完成编译:
cordova platform remove android
cordova platform add android
2、调用接口,前端控制,不同页面状态栏效果不同(作者实际体验并不好,仅供参考!!!)
在实验之前请一定要安装全屏插件:
cordova plugin add cordova-plugin-fullscreen
cordova plugin add cordova-plugin-device
我只在main.js中执行成功过,在vue页面上代码没成功过,但是不报错😂
document.addEventListener('deviceready', function() {
StatusBar.hide();
},alse)
这里列出大部分方法,有兴趣可以试一下:
StatusBar.overlaysWebView
StatusBar.styleDefault
StatusBar.styleLightContent
StatusBar.styleBlackTranslucent
StatusBar.styleBlackOpaque
StatusBar.backgroundColorByName
StatusBar.backgroundColorByHexString
StatusBar.hide
StatusBar.show
二、常用基础打包配置
1、打包出现net::ERR_CLEARTEXT_NOT_PERMITTED错误,原因是android9开始不允许http,允许https请求
解决办法,在platforms\android\app\src\main\AndroidManifest.xml的applicatioin节点加android:usesCleartextTraffic=“true” 属性
<manifest ...>
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>
2、前端通过UserAgent来识别是否在android环境下,在MainActivity.java 中增加特殊的UserAgent来指定自己的app
platforms/android/app/src/main/java/‘appid路径’/MainActivity.java
package com.ntc.eidp.flat;
import android.os.Bundle;
import org.apache.cordova.*;
//新增
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// enable Cordova apps to be started in the background
Bundle extras = getIntent().getExtras();
if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
moveTaskToBack(true);
}
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
setUserAgent();
}
// 新增
private void setUserAgent() {
WebView webView = (WebView) this.appView.getView();
if (webView != null) {
WebSettings webSettings = webView.getSettings();
if (webSettings != null) {
String userAgent = webSettings.getUserAgentString();
if (userAgent == null) {
userAgent = "/自己的别名";
} else {
userAgent += "/自己的别名";
}
webSettings.setUserAgentString(userAgent);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
}
}
}
}
3、在前端有如下修改:
1) 在webpack配置发布后的服务地址,配置apiServerUrl
function isNTCAndroidClient() {
if (/ntcandroidclient/.exec(navigator.userAgent)) {
return true
}
else {
return false
}
}
function isAndroidBrowser() {
if (/Android/.exec(navigator.userAgent)) {
return true
}
else {
return false
}
}
const apiServerUrl = isNTCAndroidClient()?'http://xx.xxx.xx.xxx:10000':'';
...
export {
...
apiServerUrl,
...
}
2) src\api下的服务接口,必须引用apiServerUrl,诸如:
import { apiServerUrl } from '@/config/env'
export const loginByUsername = (username, password, code, randomStr) => {
const grant_type = 'password'
return request({
url: apiServerUrl + '/auth/oauth/token',
headers: {
isToken: false,
'TENANT-ID': '1',
'Authorization': 'Basic ZnJhbWV3b3JrOmZyYW1ld29yaw=='
},
method: 'post',
params: { username: '8ba5469aabccdb38d9422ff47826b778$' + username, password, randomStr, code, grant_type, scope }
})
}