npm/wo-user-toolkit-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

删除 Responsive_Xxx 环境变量，仅仅根据设备类型，并读取 pageJson.topWindow 来完美实现响应式

Browse Source
This commit is contained in:
陆柯 2022-04-04 16:51:54 +08:00
parent 1ac2a685a3
commit b43f13b887
1 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
usertool.js
View File

@ -13,7 +13,6 @@ export default {
WHITE_BUTTON: 'default',
// [todo] 能否把这些默认值放到 export 以外？
RESPONSIVE_TABBAR_AUTOHIDE_WIDTH_THRESHOLD_DEFAULT: 0,
BACKEND_DEFAULT: 'SERVER', // 服务器 SERVER 或云服务 UNICLOUD
thisPage() {
@ -94,21 +93,17 @@ export default {
// uni.showTabBar({})
// #ifdef H5
if (uni.getSystemInfoSync().model==='PC') {
const envar = this.envar || wo?.envar || {}
if (envar.Responsive_Tabbar==='AUTOHIDE') {
if (window.screen.width > (envar.Responsive_Tabbar_Autohide_Width_Threshold || this.RESPONSIVE_TABBAR_AUTOHIDE_WIDTH_THRESHOLD_DEFAULT)) {
// 响应式方案：仅仅根据当前设备类型，如果是 PC 大屏幕，则始终显示 topWindow 并且隐藏顶部 navibar 和底部 tabBar。
const envar = this.envar || wo?.envar
if (pagesJson?.topWindow) {
if (uni.getSystemInfoSync().model==='PC') {
if (window.screen.width > (pagesJson?.topWindow?.matchMedia?.minWidth || 0)) {
uni.hideTabBar()
// 不知为何，同一个二级页面，如果第二次进入，就仍然会显示 navibar, 必须通过 setTimeout 执行才能彻底隐藏。
setTimeout(()=>{ document.getElementsByTagName('uni-page-head')?.[0]?.remove() },0)
}
uni.onWindowResize(({size})=>{
if (size.windowWidth > (envar.Responsive_Tabbar_Autohide_Width_Threshold || this.RESPONSIVE_TABBAR_AUTOHIDE_WIDTH_THRESHOLD_DEFAULT)) {
uni.hideTabBar()
}else{
uni.showTabBar()
}
})
}else if (envar.Responsive_Tabbar==='ALWAYSHIDE') {
uni.hideTabBar()
}else {
document.getElementsByTagName('uni-top-window')?.[0]?.remove() // hide topWindow
}
}
// #endif
@ -177,6 +172,7 @@ export default {
}) {
const thisRoute = this.thisPage()?.route || 'VueApp' // 立刻保存 this.thisPage().route，因为在调用后台后，可能已切换到了其他页面。
const startTime = new Date().toJSON()
let url = undefined
let result = {}
if (backend === 'UNICLOUD') {
let { /* success, header, requestedId, */ result: resultCloud = {} } = await uniCloud
@ -206,8 +202,7 @@ export default {
apiWhat[key] = JSON.stringify(apiWhat[key])
}
}
const url = this.makeServerUrl(`${apiVersion}/${apiWho}/${apiTodo}`)
process.env.NODE_ENV === 'development' && console.log('%c '+JSON.stringify({url}), 'color:blue')
url = this.makeServerUrl(`${apiVersion}/${apiWho}/${apiTodo}`)
let [error, { statusCode, header, errMsg, data: resultServer = {} } = {}] = await uni.request({
method: httpMethod,
url: url,
@ -234,7 +229,7 @@ export default {
if (process.env.NODE_ENV === 'development') {
console.log(
'%c '+JSON.stringify({startTime:startTime, page:thisRoute, endTime:new Date().toJSON()}) +
' %c '+ JSON.stringify({ backend, apiWho, apiTodo, apiWhat }) +
' %c '+ JSON.stringify({ backend, apiWho, apiTodo, apiWhat, url }) +
' %c '+ JSON.stringify(result),
'color:blue', 'background:skyblue', 'background:magenta') // 不知为何，直接用 result 会输出一个奇怪的对象，要主动添加 JSON.stringify 才按照期望输出。
}