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('----------');
       
  });
})