前言
uni-app是我用了蛮久的一个全端框架的，虽然也遇到了不少坑，但是总体还是相当好用的，开发速度很快，很好上手。用博文记录一下我遇到的一些问题以及解决方法。
需求
要开发安卓平板App（横屏）应用，那自然就要应用全屏以及隐藏虚拟按键了，经过简单的搜索，找到如下的配置方法:
- 在
pages.json中设置，配置应用横屏，官方说这里配置的应用是比在App.vue里使用plus Api让应用横屏更快
"pageOrientation": "landscape" //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
- 在
App.vue的onLaunch方法中添加代码：
plus.navigator.hideSystemNavigation() //隐藏虚拟按键
好，经过这两步骤，我们已经完美的实现应用横屏以及全屏了，这时候跳转一下界面。不对了，发现除了第一个页面正常之外，其他页面底部都有留白（能看到第一个页面的内容）
解决
想了下，这个留白应该就是给底部虚拟按钮预留的位置，而uni-app本质是个浏览器应用，那么只要重新设置当前页面的webview样式就可以了
- 首先，在
App.vue中记录一下屏幕高度windowHeight, 还有＋50的高度，因为这个高度是一件去掉了底部虚拟按键的，得重新加上去
uni.getSystemInfo({
success: function(e) {
console.log(e)
// #ifndef MP
if (e.platform == "android") {
Vue.prototype.windowHeight = e.windowHeight + 50
}
// #endif
}
- 封装一个全局的函数，改变当前页面webview的样式高度，这里我放在了main.js中，单独用js文件的话调用的时候会报错
Vue.prototype.$setFullScreen = () => {
// #ifdef APP-PLUS
let pages = getCurrentPages();
let page = pages[pages.length - 1];
page.$getAppWebview().setStyle({height: Vue.prototype.windowHeight + 'px'})
// #endif
}
- 每次页面 onShow 的时候，调用一下这个方法 再测试一下，已经完美全屏了，有时候如果虚拟按键又蹦出来的时候，再调用一下这个方法就ok了
总结
这应该是一个bug，但是看也有不少人提过这个问题，但是官方也一直没有解决。┓( ´∀` )┏
