Cordova：安卓WebView套壳应用常用配置

安卓WebView套壳应用基本配置

晴空排云

902人浏览 · 2020-04-23 21:09:35

晴空排云 · 2020-04-23 21:09:35 发布

<<上一篇>>只是简单做了一个可安装的安卓安装包。一个Cordova应用除了具体功能之外，一般还要做些其它方面的配置。配置项都在项目根目录下的config.xml文件中进行设定，下面介绍几个常用的配置。

1 应用名称及介绍

在创建项目的时候可以指定应用名称，比如上一篇中创建项目的命令设置名称为HCordovaApp，如果创建好项目后需要调整项目名称，可修改config.xml文件中widget节点下的name值，如下（调整为HCA）。此名称会在应用安装时显示并作为手机桌面应用图标的名称，如果投放应用市场，应用也是使用这个名称。另外也可调整应用的描述和联系人信息，如下：

<widget id="run.crane.cordova.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <!-- 安装时显示的应用名称和安装后手机桌面的应用默认名称 -->
    <name>HCA</name>
    <!-- 应用描述，如果上传到应用商店，则会显示这些信息 -->
    <description>
        A H Cordova application.
    </description>
    <!-- 开发者信息，如果上传到应用商店，则会显示这些信息 -->
    <author email="crane.liu@qq.com" href="https://crane.run">
        Crane.Liu
    </author>
</widget>

2 修改应用图标

Cordova项目生成的应用，默认是一个Cordova的图标，如果要修改为自己的图标首先需要做一个png格式图片，以正方形为宜，然后生成各种屏幕尺寸的应用图标。这里推荐一个生成图标的站点工具——图标工厂，做好图之后可上传到这个网站自动生成各种尺寸的图标。
在这里插入图片描述
生成图标时平台按需选择，Android目录我们选择mipmap类型，生成后下载解压，放到项目根目录下的res/icon文件夹下（如果不存在手动创建），最终目录结构如下：

图标文件放到项目目录下之后，需要在config.xml文件中配置图标引用，在widget节点的platform name="android"节点下添加以下配置，指定各个尺寸的图标引用：

<icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
<icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
<icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />
<icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" />
<icon density="xxhdpi" src="res/icon/android/mipmap-xxhdpi/ic_launcher.png" />
<icon density="xxxhdpi" src="res/icon/android/mipmap-xxxhdpi/ic_launcher.png" />

此时再执行打包命令，生成apk后安装到手机或者模拟器，在真机上安装过程和安装完成后图标及应用名称如下图：
在这里插入图片描述

3 修改首页

Cordova应用默认启动时加载根目录下www文件夹下的index.html文件作为首页，可调整为加载某个网址，例如调整为加载网址https://crane.run，则需要在config.xml文件中的widget节点下添加如下配置：

<content src="https://crane.run" />
<!-- 允许应用内webview跳转的站点 -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

此时重新生成安装包后，打开应用如下图（具体内容展示及功能取决于配置的站点）：
在这里插入图片描述
最终配置文件内容如下：

<?xml version='1.0' encoding='utf-8'?>
<widget id="run.crane.cordova.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <!-- 安装时显示的应用名称和安装后手机桌面的应用默认名称 -->
    <name>HCA</name>
    <!-- 应用描述，如果上传到应用商店，则会显示这些信息 -->
    <description>
        A H Cordova application.
    </description>
    <!-- 开发者信息，如果上传到应用商店，则会显示这些信息 -->
    <author email="crane.liu@qq.com" href="https://crane.run">
        Crane.Liu
    </author>
    <!-- 调整为首页加载站点 -->
    <content src="https://crane.run" />
    <!-- 允许应用内webview跳转的站点 -->
    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />
    <!-- 应用展示方向 default默认, landscape横屏, portait竖屏 -->
    <preference name="Orientation" value="default" />
    <!-- 首页加载信息 -->
    <preference name="LoadingDialog" value="请稍后,数据加载中..."/>
    <!-- 首页加载内置网页 -->
    <!-- <content src="index.html" /> -->
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <!-- 允许和外部交互的域 -->
    <access origin="*" />
    <!-- 可调用系统接口打开的链接，包括网页、电话、短信、邮件等 -->
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <!-- 修改应用默认图标 -->
        <icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
        <icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
        <icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />
        <icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" />
        <icon density="xxhdpi" src="res/icon/android/mipmap-xxhdpi/ic_launcher.png" />
        <icon density="xxxhdpi" src="res/icon/android/mipmap-xxxhdpi/ic_launcher.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

4 沉浸式状态栏

上一步中，打开应用后状态栏是黑色背景，和应用界面放在一起显得比较突兀，目前比较常规的处理是使用沉浸式状态栏，即全屏模式，使状态栏就像嵌入到应用顶部一样。这里介绍一个Cordova插件cordova-plugin-statusbar，通过此插件，可方便的实现上述效果。首先在项目根目录下执行安装插件命令如下：

cordova plugin add cordova-plugin-statusbar

在这里插入图片描述
然后调整插件源码中StatusBar.java文件中的initialize方法如下：

public void initialize(final CordovaInterface cordova, CordovaWebView webView) {
    LOG.v(TAG, "StatusBar: initialization");
    super.initialize(cordova, webView);
    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();
            //添加内容start
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                window.setStatusBarColor(Color.TRANSPARENT);
                window.setNavigationBarColor(Color.TRANSPARENT);
            }
            //添加内容end
            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"));
        }
    });
}