<script setup>
import { ref, onMounted, onlaod } from 'vue';
// 轮播图数据
const banners = ref([]);
const loading = ref(true);
const openId = ref('');
onLoad((options) => {
// 1. 优先从options获取
let urlOpenId = options.openId;
console.log("openid",urlOpenId)
// 2. 兼容性获取(微信环境备用)
if (!urlOpenId) {
try {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
urlOpenId = currentPage?.options?.openId || '';
} catch(e) {
console.error('兼容性获取参数失败:', e);
}
}
// 3. 处理获取到的openId
if (urlOpenId) {
openId.value = urlOpenId;
uni.setStorageSync('wechat_openid', urlOpenId);
console.log('成功获取并缓存openId:', urlOpenId);
} else {
console.log('未检测到URL中的openId参数');
}
});
// 页面挂载时执行核心逻辑(优先级:检查OpenID→授权→加载数据)
onMounted(() => {
// 尝试从缓存读取
const storedOpenId = uni.getStorageSync('wechat_openid');
if (storedOpenId) {
openId.value = storedOpenId;
console.log('从缓存读取openId:', storedOpenId);
}
// 无论是否有缓存都加载轮播图
fetchBanners();
});
// 2. 核心逻辑:检查缓存→无缓存则跳转授权→有授权参数则缓存
const initOpenId = () => {
// 2.1 优先读取本地缓存(UniApp跨端存储API)
const storedOpenId = uni.getStorageSync('wechat_openid');
const storedToken = uni.getStorageSync('wechat_token');
if (storedOpenId && storedToken) {
// 2.2 有缓存:直接赋值使用
openId.value = storedOpenId;
token.value = storedToken;
console.log('从本地缓存获取到OpenID:', openId.value);
return true; // 表示已获取到OpenID
} else {
// 2.3 无缓存:检查当前URL是否有openId参数(授权回调后会携带)
const urlOpenId = getUrlParam('openId');
if (urlOpenId) {
// 2.4 有授权参数:缓存到本地(永久有效,除非手动清除)
openId.value = urlOpenId;
// 若后端返回token,可在此处从URL提取并缓存(示例:getUrlParam('token'))
token.value = getUrlParam('token') || '';
uni.setStorageSync('wechat_openid', urlOpenId);
uni.setStorageSync('wechat_token', token.value);
console.log('从URL提取并缓存OpenID:', openId.value);
return true; // 表示已获取到OpenID
} else {
// 2.5 无缓存且无授权参数:需要跳转授权页
console.log('未找到OpenID,准备跳转授权链接');
return false; // 表示需要授权
}
}
};
// 图标菜单数据(保持不变)
const iconMenus = ref([
{
icon: '/static/icons/ServiceHall.png',
text: '服务大厅',
name: '服务大厅',
path: '/pages/WebView/WebView'
},
{
icon: '/static/icons/IntegrityCulture.png',
text: '廉洁文化',
name: '廉洁文化',
path: '/pages/IntegrityCulture/IntegrityCulture'
},
{
icon: '/static/icons/IntegrityStandards.png',
text: '廉洁标准',
name: '廉洁标准',
path: '/pages/IntegrityStandards/IntegrityStandards'
},
{
icon: '/static/icons/ComplaintChannel.png',
text: '投诉渠道',
name: '投诉渠道',
path: '/pages/ComplaintChannel/ComplaintChannel'
},
{
icon: '/static/icons/ComplainCases.png',
text: '投诉案例',
name: '投诉案例',
path: '/pages/ComplainCases/ComplainCases'
},
{
icon: '/static/icons/ComplaintRecord.png',
text: '投诉记录',
name: '投诉记录',
path: '/pages/ComplaintRecord/ComplaintRecord'
},
{
icon: '/static/icons/OnlinComplaint.png',
text: '在线投诉',
name: '在线投诉',
path: '/pages/OnlinComplaint/OnlinComplaint'
}
]);
// 获取轮播图数据(修复token引用问题)
const fetchBanners = () => {
loading.value = true;
uni.request({
url: '/api/incorruptFront/public/index',
method: 'POST',
header: {
// 仅当token存在时携带Authorization头
...(token.value ? { 'Authorization': `Bearer ${token.value}` } : {})
},
success: (res) => {
if (res.statusCode === 200 && res.data.code === 200) {
banners.value = res.data.data.map(item => ({
image: item.imageUrl,
title: item.imageTitle,
description: item.imageText
}));
} else {
uni.showToast({ title: res.data?.msg || '轮播图数据获取失败', icon: 'none' });
}
},
fail: (err) => {
console.error('轮播图请求失败:', err);
uni.showToast({ title: '网络错误,无法加载轮播图', icon: 'error' });
},
complete: () => {
loading.value = false;
}
});
};
// 导航方法(携带OpenID跳转,确保子页面可使用)
const navigateTo = (item) => {
if (!openId.value) {
uni.showToast({ title: '请先完成微信授权', icon: 'none' });
return;
}
// 跳转时携带openId参数(子页面可通过getUrlParam('openid')获取)
const url = `${item.path}?openid=${openId.value}`;
uni.navigateTo({
url,
fail: (err) => console.error('页面跳转失败:', err)
});
};
</script>
报错:<script setup>
import { ref, onMounted, onlaod } from 'vue';
// 轮播图数据
const banners = ref([]);
const loading = ref(true);
const openId = ref('');
onLoad((options) => {
// 1. 优先从options获取
let urlOpenId = options.openId;
console.log("openid",urlOpenId)
// 2. 兼容性获取(微信环境备用)
if (!urlOpenId) {
try {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
urlOpenId = currentPage?.options?.openId || '';
} catch(e) {
console.error('兼容性获取参数失败:', e);
}
}
// 3. 处理获取到的openId
if (urlOpenId) {
openId.value = urlOpenId;
uni.setStorageSync('wechat_openid', urlOpenId);
console.log('成功获取并缓存openId:', urlOpenId);
} else {
console.log('未检测到URL中的openId参数');
}
});
// 页面挂载时执行核心逻辑(优先级:检查OpenID→授权→加载数据)
onMounted(() => {
// 尝试从缓存读取
const storedOpenId = uni.getStorageSync('wechat_openid');
if (storedOpenId) {
openId.value = storedOpenId;
console.log('从缓存读取openId:', storedOpenId);
}
// 无论是否有缓存都加载轮播图
fetchBanners();
});
// 2. 核心逻辑:检查缓存→无缓存则跳转授权→有授权参数则缓存
const initOpenId = () => {
// 2.1 优先读取本地缓存(UniApp跨端存储API)
const storedOpenId = uni.getStorageSync('wechat_openid');
const storedToken = uni.getStorageSync('wechat_token');
if (storedOpenId && storedToken) {
// 2.2 有缓存:直接赋值使用
openId.value = storedOpenId;
token.value = storedToken;
console.log('从本地缓存获取到OpenID:', openId.value);
return true; // 表示已获取到OpenID
} else {
// 2.3 无缓存:检查当前URL是否有openId参数(授权回调后会携带)
const urlOpenId = getUrlParam('openId');
if (urlOpenId) {
// 2.4 有授权参数:缓存到本地(永久有效,除非手动清除)
openId.value = urlOpenId;
// 若后端返回token,可在此处从URL提取并缓存(示例:getUrlParam('token'))
token.value = getUrlParam('token') || '';
uni.setStorageSync('wechat_openid', urlOpenId);
uni.setStorageSync('wechat_token', token.value);
console.log('从URL提取并缓存OpenID:', openId.value);
return true; // 表示已获取到OpenID
} else {
// 2.5 无缓存且无授权参数:需要跳转授权页
console.log('未找到OpenID,准备跳转授权链接');
return false; // 表示需要授权
}
}
};
// 图标菜单数据(保持不变)
const iconMenus = ref([
{
icon: '/static/icons/ServiceHall.png',
text: '服务大厅',
name: '服务大厅',
path: '/pages/WebView/WebView'
},
{
icon: '/static/icons/IntegrityCulture.png',
text: '廉洁文化',
name: '廉洁文化',
path: '/pages/IntegrityCulture/IntegrityCulture'
},
{
icon: '/static/icons/IntegrityStandards.png',
text: '廉洁标准',
name: '廉洁标准',
path: '/pages/IntegrityStandards/IntegrityStandards'
},
{
icon: '/static/icons/ComplaintChannel.png',
text: '投诉渠道',
name: '投诉渠道',
path: '/pages/ComplaintChannel/ComplaintChannel'
},
{
icon: '/static/icons/ComplainCases.png',
text: '投诉案例',
name: '投诉案例',
path: '/pages/ComplainCases/ComplainCases'
},
{
icon: '/static/icons/ComplaintRecord.png',
text: '投诉记录',
name: '投诉记录',
path: '/pages/ComplaintRecord/ComplaintRecord'
},
{
icon: '/static/icons/OnlinComplaint.png',
text: '在线投诉',
name: '在线投诉',
path: '/pages/OnlinComplaint/OnlinComplaint'
}
]);
// 获取轮播图数据(修复token引用问题)
const fetchBanners = () => {
loading.value = true;
uni.request({
url: '/api/incorruptFront/public/index',
method: 'POST',
header: {
// 仅当token存在时携带Authorization头
...(token.value ? { 'Authorization': `Bearer ${token.value}` } : {})
},
success: (res) => {
if (res.statusCode === 200 && res.data.code === 200) {
banners.value = res.data.data.map(item => ({
image: item.imageUrl,
title: item.imageTitle,
description: item.imageText
}));
} else {
uni.showToast({ title: res.data?.msg || '轮播图数据获取失败', icon: 'none' });
}
},
fail: (err) => {
console.error('轮播图请求失败:', err);
uni.showToast({ title: '网络错误,无法加载轮播图', icon: 'error' });
},
complete: () => {
loading.value = false;
}
});
};
// 导航方法(携带OpenID跳转,确保子页面可使用)
const navigateTo = (item) => {
if (!openId.value) {
uni.showToast({ title: '请先完成微信授权', icon: 'none' });
return;
}
// 跳转时携带openId参数(子页面可通过getUrlParam('openid')获取)
const url = `${item.path}?openid=${openId.value}`;
uni.navigateTo({
url,
fail: (err) => console.error('页面跳转失败:', err)
});
};
</script>
报错:index-OoLs438E.js:18 ReferenceError: onLoad is not defined
at setup (pages-index-index.1zemKHzx.js:1)
at e.setup (index-OoLs438E.js:25)
at Hn (index-OoLs438E.js:18)
at index-OoLs438E.js:20
at index-OoLs438E.js:20
at H (index-OoLs438E.js:20)
at F (index-OoLs438E.js:20)
at w (index-OoLs438E.js:20)
at ht.l [as fn] (index-OoLs438E.js:20)
at ht.run (index-OoLs438E.js:18)
最新发布