[移动开发]cordova-android打包配置状态栏及http请求问题

一、状态栏沉浸式、及字体颜色、背景色修改
关于该效果实现一般分为前端页面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 }				
			  })
			}