前言
uni-app是我用了蛮久的一个全端框架的，虽然也遇到了不少坑，但是总体还是相当好用的，开发速度很快，很好上手。用博文记录一下我遇到的一些问题以及解决方法。
需求
要开发安卓平板直播app源代码，那自然就要应用全屏以及隐藏虚拟按键了，经过简单的搜索，找到如下的配置方法:
- 在
pages.json中设置，配置应用横屏，官方说这里配置的应用是比在App.vue里使用plus Api让应用横屏更快
"pageOrientation": "landscape" //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
- 在
App.vue的onLaunch方法中添加代码：
plus.navigator.hideSystemNavigation() //隐藏虚拟按键
好，经过这两步骤，我们已经完美的实现直播app源代码横屏以及全屏了，这时候跳转一下界面。不对了，发现除了第一个页面正常之外，其他页面底部都有留白（能看到第一个页面的内容）
解决
想了下，这个留白应该就是直播app源代码给底部虚拟按钮预留的位置，而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 的时候，调用一下这个方法
再测试一下，直播app源代码已经完美全屏了，有时候如果虚拟按键又蹦出来的时候，再调用一下这个方法就ok了
声明：本文由云豹科技转发自Codist65638博客，如有侵权请联系作者删除
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70002045/viewspace-2846556/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
app直播商城源码，实现用户信息提示
下一篇：
直播app源代码，实现用户电话监听服务
请登录后发表评论
登录
全部评论
