Uni-app 全屏与虚拟按键隐藏(全面屏调出虚拟按键)
前言
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,但是看也有不少人提过这个问题,但是官方也一直没有解决。┓( ´∀` )┏
作者:Codist65638
链接:https://juejin.cn/post/7036162387384205343
伪原创工具 SEO网站优化 https://www.237it.com/