问题:uniapp开发app时设置了安全区后,安全区颜色、高度固定了改不动
解决思路:监听路由变化,在对应页面设置全屏,从而去掉安全区,进入其他页面时记得关闭全屏(以下代码包含关闭全屏)
App.vue引入
import routeIntercept from "utils/route-intercept.js"
export default {
onLaunch: function() {
routeIntercept()
}
}
route-intercept.js
const routeIntercept = (...args) => {
let isFullscreen = false
// 要拦截的路由API列表
let apis = [
'navigateTo', 'redirectTo',
'reLaunch', 'switchTab', 'navigateBack'
]
// 循环设置拦截监听
for (let i of apis) {
uni.addInterceptor(i, {
invoke(e) {
// #ifdef APP-PLUS
let targetUrl = e.url || ''
if (i === 'navigateBack') {
const Delta = e.delta || 1
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1 - Delta];
targetUrl = '/' + currentPage.route
}
const RealUrl = targetUrl.split('?')[0]
// 全屏页面配置
const FullscreenRoutes = ['/pages/square/index']
isFullscreen = !!RealUrl && FullscreenRoutes.includes(RealUrl)
if (!isFullscreen) plus.navigator.setFullscreen(isFullscreen)
// #endif
},
// 执行操作
success(e) {
// #ifdef APP-PLUS
plus.navigator.setFullscreen(isFullscreen)
// #endif
}
})
}
}
export default routeIntercept