1***@163.com
1***@163.com
  • 发布:2025-04-25 19:18
  • 更新:2025-04-25 19:18
  • 阅读:117

关于H5空白页 找了半天故障 交给claude3.7 几分钟解决了

分类:HBuilderX

项目使用了一个特殊的 Vue 结构,其中 App.vue 不是直接呈现页面,而是包含一个 App 组件
修复 main.js 中的一些兼容性问题import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'

// 处理兼容性问题
// #ifdef H5
// 修复 H5 空白页面问题的全局处理
window.addEventListener('DOMContentLoaded', () => {
// 处理初始化加载问题
if (!location.hash || location.hash === '#/') {
// 如果是空hash,尝试恢复到登录页
setTimeout(() => {
const token = uni.getStorageSync('token');
if (!token) {
location.replace(location.pathname + '#/pages/login/login');
}
}, 200);
}
});
// #endif

// 添加全局导航守卫
const whiteList = ['/pages/login/login', '/pages/register/register', '/pages/forget-password/forget-password']

// 处理路由路径,确保正确处理绝对和相对路径
Vue.prototype.$normalizePath = function(url) {
// 如果已经是绝对路径(以/开头),则返回
if (url.startsWith('/')) {
return url;
}
// 否则转换为绝对路径
return '/' + url;
}

Vue.prototype.$checkLogin = function() {
const token = uni.getStorageSync('token')
const userInfo = uni.getStorageSync('userInfo')

// 清理可能存在的mock数据
if (token && token.includes('mock')) {
uni.removeStorageSync('token')
uni.removeStorageSync('userInfo')
return false
}

return token && userInfo && userInfo.userId
}

Vue.prototype.$navigateTo = function(url) {
// 标准化路径
const normalizedUrl = this.$normalizePath(url);

if (!this.$checkLogin() && !whiteList.some(path => normalizedUrl.includes(path))) {
uni.reLaunch({
url: '/pages/login/login'
})
return
}
uni.navigateTo({
url: normalizedUrl
})
}

// #ifdef H5
// 添加全局异常处理
window.addEventListener('error', (e) => {
console.error('全局错误:', e);
// 可以在这里添加错误上报逻辑
});
// #endif

const app = new Vue({
...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif复了 App.vue 的模板结构,保持 <App :keepAliveInclude="keepAliveInclude"> 的原有格式,并将通知弹窗移到内部
添加了 keepAliveInclude 属性,用于缓存主要页面(提高性能)
在 main.js 中添加了全局 DOMContentLoaded 事件处理,修复空白页面问题

0 关注 分享

要回复文章请先登录注册