uni-app中获取当前页面URL需分平台处理:H5用window.location.href,小程序用uni.getLaunchOptionsSync()拼相对路径,App端通常降级;复制时H5必须用navigator.clipboard.writeText并try/catch,小程序和App可用uni.setClipboardData。

直接调用 uni.setClipboardData 复制当前页面 URL 是不可行的——因为该 API 只接受字符串,而「当前页面 URL」在不同平台含义不同、获取方式也完全不同。H5 端能拿到完整浏览器地址栏 URL,小程序端只能拿到相对路径 + query,App 端甚至不暴露路由地址。必须分平台处理,且 H5 需 fallback 到原生 navigator.clipboard.writeText。
uni-app 中如何获取当前页面 URL(各平台差异)
不能统一用 uni.getCurrentPages() 的 $route 或 options 拼接:它只返回路由参数,不包含协议、域名、hash 等;uni.getSystemInfoSync().platform 可判断环境,但获取 URL 的逻辑必须拆开:
- 微信/支付宝小程序:用
uni.getLaunchOptionsSync()获取启动参数中的path和query,拼成/pages/detail/detail?id=123这类相对路径(注意:不含 host) - H5 平台:直接读
window.location.href,最可靠;uni.getSystemInfoSync().platform === 'h5'是判断依据 - App(iOS/Android):
uni.getLaunchOptionsSync()在 App 启动时有效,但前台切换页面时不触发;实际中 App 端一般不需分享 URL,可降级为空或固定引导页
复制 URL 时必须处理的平台兼容性问题
uni.setClipboardData 在 H5 端自 2022 年起已被多数浏览器禁用(需用户手势 + 安全上下文),直接调用会静默失败或报错 writeText is not a function。必须按平台选择 API:
- 小程序平台(微信、支付宝等):用
uni.setClipboardData({ data: urlStr }),success/fail 回调可用 - H5 平台:必须用
navigator.clipboard.writeText(urlStr),且需包裹在try/catch中,并检查navigator.clipboard是否存在 - App 平台:
uni.setClipboardData可用,但部分 Android 厂商 WebView 有兼容问题,建议加fail降级提示
防白屏与降级提示的关键写法
用户点击「复制链接」按钮后,若未弹出成功提示,大概率是复制失败但没反馈。尤其 H5 端失败时无回调,必须手动 catch 并给 UI 提示:
copyPageUrl() {
const platform = uni.getSystemInfoSync().platform;
let urlStr = '';
<p>if (platform === 'h5') {
urlStr = window.location.href;
try {
await navigator.clipboard.writeText(urlStr);
uni.showToast({ title: '链接已复制', icon: 'success' });
} catch (err) {
uni.showToast({ title: '复制失败,请手动长按粘贴', icon: 'none' });
}
} else {
// 小程序 / App
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const path = currentPage.route || '';
const query = Object.keys(currentPage.options || {}).length > 0
? '?' + Object.entries(currentPage.options).map(([k, v]) => <code>${k}=${v}</code>).join('&')
: '';
urlStr = '/' + path + query;</p><pre class="brush:php;toolbar:false;">uni.setClipboardData({
data: urlStr,
success: () => uni.showToast({ title: '链接已复制', icon: 'success' }),
fail: () => uni.showToast({ title: '复制失败,请手动长按粘贴', icon: 'none' })
});} }
注意 currentPage.route 返回的是 pages.json 中注册的路径(如 pages/detail/detail),不是带斜杠开头的,要手动补;query 拼接时避免空值导致 ?&id=1 这类错误。


















