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