当一个app 有五个tab 其中3个不需要登录,但是第4 个和第5个需要登录才能正常显示,这时我在需要登录界面onshow中添加登录验证,如果没有登录 调用uni.navigateTo 这时会出现js阻塞新界面会出现短暂的白屏,这种问题可以优化一下吗?
5***@qq.com
- 发布:2019-11-22 15:23
- 更新:2023-06-18 08:13
- 阅读:9051
提供一个思路(仅针对APP端,不过web也不必要,随便hack一下就解决了)
- 使用plus创建一个native view 对象
helpers.ts
import { View } from '@/typings/global'
export class ViewCreator {
view: View = {} as any
createView() {
this.view = new plus.nativeObj.View('test', {
bottom: '0px',
left: '0px',
height: '60px',
width: '100%'
})
this.view.drawText(
'',
{},
{
size: '24px',
color: '#FF0000',
backgroundColor: '#FFFFFF'
}
)
this.view.show()
return this
}
addEventView(callback: (e: Event) => void) {
this.view.addEventListener('click', callback, false)
return this
}
close() {
if (this.view) this.view.close()
}
}
- 引入首页的vue文件(如 home.vue)
home.vue
<script>
import { UserService } from '@/services/user-service'
import { ViewCreator } from '@/helpers'
export default {
data() {
return {
user: null,
}
},
methods: {
customViewEvent(e) {
this.$refs.loading.open()
console.log('e.clientX', e.clientX)
if (e.clientX > 90) { // => 使用 e.clientX 判断用户点击区域
UserService.getUser()
.catch(e => {
console.error(e) // => 这里做错误处理,可以跳到登录页面
})
.then(user => { // => 成功之后需要手动调用 uni.switchTab(..)
console.log('get loggedUser', user)
if (e.target) e.target.close()
this.$refs.loading.close()
})
}
},
onReady() {
const view = new ViewCreator().createView().addEventView(this.customViewEvent)
console.log('view', view)
},
... // other code
</script>
4个item 只针对app端
监听 我的
APP.vue
<script>
export default {
data() {
return {
robotView: null
}
},
onLaunch: function() {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary'); //锁定屏幕
let that = this,
naviArr = [
'navigateTo',
'redirectTo',
'reLaunch',
'switchTab',
'navigateBack',
]
for (let i of naviArr) {
uni.addInterceptor(i, {
//监听跳转
success(e) {
that.watchRouter(i, e)
},
})
}
that.watchRouter()
// #endif
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
methods: {
onclick() {
let isLogin = uni.getStorageSync('token_key');
console.log(isLogin)
if (isLogin) {
uni.switchTab({
url: '/pages/my/my'
})
} else {
uni.navigateTo({
url: '/pages/login/login'
})
}
},
watchRouter(i, e) {
// getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
let pages = getCurrentPages();
let currentPath = pages[pages.length - 1]?.$page.fullPath
if (currentPath === undefined || ['/pages/game/game', '/pages/index/index', '/pages/fine/fine',
'/pages/originality/originality'
].includes(currentPath)) {
this.robotView?.hide()
this.robotView = new plus.nativeObj.View('robot-btn', {
bottom: '0px',
left: '80%',
height: '44px',
width: '100px'
},
[{
tag: 'img',
id: 'robot',
position: {
top: '0px',
left: '0px',
width: '68px',
height: '44px'
}
},
]);
this.robotView.show();
this.robotView.addEventListener("click", (e) => {
this.onclick(e)
}, false);
} else if(currentPath=='/pages/login/login') {
this.robotView?.hide()
}else {
this.robotView?.hide()
}
},
},
}
</script>
<style lang="scss">
5***@qq.com (作者)
已经解决了,用Nvue 可以解决
2020-04-01 09:19
Douba
回复 5***@qq.com: 能否给出解决方案
2020-04-10 14:27
9***@qq.com
回复 5***@qq.com: 怎么解决的呢,可以分享下吗
2020-07-10 10:48
nicepainkiller
回复 5***@qq.com: 提供个思路
2020-09-01 14:43