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

在全面屏发布之后，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('----------');
       
  });
})