cordova 5.4版本 适配全面屏 底部黑边问题

时间：2024-08-02 13:06:32

在全面屏发布之后，Android官方提供了适配方案，即提高App所支持的最大屏幕纵横比，实现很简单，在AndroidManifest.xml中可做如下配置：

更改android.max_aspect值，其中ratio_float为浮点数，官方建议为2.1或更大，因为18.5：9=2.055555555……，如果日后出现纵横比更大的手机，此值将会更大。

<manifest>

    <application>

        <meta-data android:name="android.max_aspect" android:value="2.1"/>

    </application>

</manifest>

因为我们的cordova版本较旧，所以只能用hook的方式，直接修改AndroidManifest.xml，我们是ionic项目所以直接把下面的hook文件放到after_prepare文件夹内即可。

如果hook文件没有执行，需要在config.xml内加一个配置去执行。<hook type="after_prepare" src="hooks/after_prepare/set_full_screen.js"/>

hook文件代码如下

set_full_screen.js

#!/usr/bin/env node

var _           = require('lodash');

var fs          = require('fs');

var path        = require('path');

var spawnSync   = require('child_process').spawnSync;

var rootdir     = process.argv[2];

var xml2js = require('xml2js');

 //xml->json

//xml2js默认会把子子节点的值变为一个数组, explicitArray设置为false

var xmlParser = new xml2js.Parser({explicitArray : false, ignoreAttrs : false})

//json->xml

var jsonBuilder = new xml2js.Builder();

fs.readFile('platforms/android/AndroidManifest.xml','utf-8',function(err,xml) {

  // xml -> json

  xmlParser.parseString(xml, function (err, result) {

      // var time=new Date().getTime();

      // console.log(result.widget["$"]["version"].replace(/\./,'0').replace(/\./,''))

     //  result.manifest["meta-data"]=[

     //  { '$': {

     //    'android:name': 'android.max_aspect',

     //    'android:value': '2.1'

     //     }

     //   }

     // ]

     result.manifest["application"]["meta-data"]=[

      { '$': {

        'android:name': 'android.max_aspect',

        'android:value': '2.1'

         }

       }

     ]

     // result.manifest["application"]["$"]["android:resizeableActivity"]="true"

        //将返回的结果再次格式化

      // console.log(JSON.stringify(result));

      //json --> xml

      var builder = new xml2js.Builder( );

      var jsonxml = builder.buildObject(result);

      fs.writeFileSync('platforms/android/AndroidManifest.xml', jsonxml);

      console.log('----------');

      console.log('更新AndroidManifest.xml适配全面屏');

      console.log('----------');

  });

})