在 UniApp Vue3 项目里不用插件,手动撸一套 rem 自适应
记录一次在 HBuilder X 创建的 uni-app vue3 项目中,基于 1366×1024 设计稿,不依赖任何第三方插件,直接用 rem 实现自适应布局的过程。
支持通配符SSL证书、多域名证书、IP证书。适配ACME接口, 支持Zerossl、Let's Encrypt和Google等渠道。登录已有账号
2026-07-13 12:00:49 uni-app showModal 页面跳转
在uni-app里做确认弹窗跳转,逻辑上就是在showModal的success回调里判断用户点了“确定”还是“取消”,点了确定再调跳转API。代码本身不复杂:
uni.showModal({
title: '提示',
content: '确认跳转到目标页面吗?',
confirmText: '确定',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: '/pages/target/target'
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
但跳不起来的时候,坑大多在路径上。uni-app里页面路径必须用绝对路径,以“/”开头,从项目根目录开始算。
写相对路径比如“../pages/home”这种,不会报明显的错,就是点了确定没反应,查起来还容易忽略这一点。
目标页面是tabBar页面的话,情况又不一样。
tabBar页面不能用navigateTo跳,得换成uni.switchTab,而且这个路径必须在pages.json的tabBar配置里声明过,否则switchTab直接失败。很多从普通页面切过来的场景,顺手就写了navigateTo,结果点了没跳,查半天才想起来是tabBar的事。
跳转方法本身行为也不同,得根据场景选对。uni.navigateTo会保留当前页,新页面打开后还能返回,最常用。uni.redirectTo是关掉当前页再打开新页,适合登录后跳首页这种不想让用户返回的场景。
uni.reLaunch会把所有页面栈清空再打开一个新页,相当于重置应用状态,退出登录或切换账号的时候用。uni.switchTab专门跳tabBar页面,其他几个方法对tabBar页面都不管用。
跳转带参数也不难,直接在url后面拼query就行,比如“/pages/detail/detail?id=123”,目标页面在onLoad里通过options拿到参数。
完整封装一下,放在方法里调用:
handleShowModal() {
uni.showModal({
title: '操作确认',
content: '即将跳转到详情页,是否继续?',
confirmText: '跳转',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: '/pages/detail/detail?id=123'
});
}
}
});
}
有时候还需要先做异步请求,拿到数据再弹窗问用户要不要跳。这种情况把showModal放在异步函数里,等到数据回来再弹就行,别把跳转写到异步外部去,不然用户点了确定拿到的还是旧数据。
async function handleAsyncJump() {
try {
const data = await fetchData(); // 模拟异步操作
uni.showModal({
title: '数据加载完成',
content: '是否查看详情?',
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: '/pages/detail/detail'
});
}
}
});
} catch (error) {
console.error('数据加载失败', error);
}
}
线上遇到的几个高频问题也就那么些。跳转没反应,先去查路径是不是绝对路径,目标页面有没有在pages.json里注册,没注册的页面怎么配路径都没用。
tabBar页面跳转失败,大概率是用错方法了,把navigateTo换成switchTab,再确认下路径在tabBar配置里有没有。还有一种情况是点了确定后卡一下或者跳转时机不对,多半是success回调里做了异步操作但没等完就跳了,确保异步完成后再执行跳转就好。
这些点都不复杂,多数是踩过一次就记住了。
上一篇: 打嗝憋回去的代价,以及几个不费劲的解法
记录一次在 HBuilder X 创建的 uni-app vue3 项目中,基于 1366×1024 设计稿,不依赖任何第三方插件,直接用 rem 实现自适应布局的过程。
深度解析HTML a标签如何通过设置`target="_blank"`属性,实现点击链接在新标签页打开,同时不关闭当前页面的功能。文章强调了`rel="noopener noreferrer"`在增强安全性方面的关键作用,并提供了绝对URL、相对路径和带参数链接的完整代码示例,助你轻松掌握。