过滤器不能用于区分App内外链接跳转,因其仅为纯函数、无平台访问能力;必须用条件编译+平台专属API(如MP-WEIXIN用web-view、APP-PLUS用plus.runtime.openURL、H5用window.open)实现安全跳转。

不能用过滤器区分 App 内外链接地址——过滤器只做数据格式转换,不参与路由决策或平台判断。真正要区分 App 和 H5/小程序等环境下的跳转行为,必须用条件编译 + 平台专属 API,否则会直接报错或跳转失败。
为什么过滤器不适合处理跳转逻辑
过滤器(Vue.filter)本质是纯函数:输入一个值,返回一个格式化后的值。它没有访问 uni API、平台标识或运行时环境的能力,也不能触发页面跳转或调用原生能力。把链接拼接、平台路由选择这类逻辑塞进过滤器,会导致:
- 在 H5 环境里误调用
plus.runtime.openURL(该 API 仅 App 可用,H5 下未定义) - 在微信小程序里尝试用
uni.navigateTo跳外部链接(根本无效,且控制台静默失败) - 无法动态决定该走
web-view还是系统浏览器,因为过滤器不产生副作用
// #ifdef MP-WEIXIN + web-view 是唯一合规路径
微信小程序对外链的限制最严格:必须用 <web-view> 组件,且目标域名必须提前配置到「业务域名」白名单并完成 HTTPS 校验。任何 JS 层的跳转尝试(包括过滤器返回的 URL)都无法绕过这个限制。
- 不能在过滤器里拼接
url后直接传给uni.navigateTo—— 这个 API 只认pages.json里注册过的内部路径 - 正确做法是:用条件编译包裹整个跳转逻辑,确保只有小程序平台才渲染
<web-view>页面,并传入已校验过的 URL - 示例结构:
<!-- #ifdef MP-WEIXIN --> <navigator url="/pages/webView/webView?url=https://example.com">打开</navigator> <!-- #endif -->
// #ifdef APP-PLUS 用 plus.runtime.openURL 最稳妥
App 端跳外部链接,推荐用 plus.runtime.openURL,它调起系统默认浏览器,不依赖 WebView 容器,兼容性好、无域名白名单限制。
-
plus.runtime.openWeb虽然也能开网页,但需手动管理窗口、易被用户误关,且 Android/iOS 行为不一致 - 必须写在
// #ifdef APP-PLUS块内,否则 H5 或小程序里会报plus is not defined - 不要试图在过滤器里 return
"plus.runtime.openURL('...')"—— 字符串不会自动执行 - 正确调用位置:按钮点击事件中,例如:
// #ifdef APP-PLUS plus.runtime.openURL('https://example.com') // #endif
H5 环境直接用 window.open 或 location.href
H5 没有平台限制,但要注意安全策略:若目标链接与当前域不同源,window.open 可能被弹窗拦截,尤其在非用户主动触发场景下。
- 优先用
window.open(url, '_blank'),并确保调用发生在 click 等用户手势事件中 - 避免在
mounted或异步回调里直接 open,大概率失败 - 同样必须条件编译隔离:
// #ifdef H5 window.open('https://example.com', '_blank') // #endif - 别把这行代码塞进过滤器——过滤器没上下文,也不该负责副作用
真正容易被忽略的是:所有平台跳转逻辑都必须在编译期剥离,而不是靠运行时 if 判断。一旦用了 process.env.UNI_PLATFORM 或 uni.getSystemInfoSync().platform 做分支,H5 包里就可能残留 plus.runtime 调用,上线后直接报错。


















