|
《uniapp跳转外部链接》 uniapp里跳转外部链接,跳转真不是外部个能直接甩手就干的事。我踩过最大的链接坑,就是跳转以为它跟普通网页一样,写个window.location或者a标签href就完事了。外部结果呢?链接在App端直接没反应,H5端倒是跳转跳了,但一刷新就白屏,外部微信小程序里更是链接直接报错——压根不让你碰那玩意儿。 先分清场景。跳转你要跳的外部“外部链接”,到底是链接网页,还是跳转另一个App的协议?这俩处理方式完全不同。如果只是外部打开一个http或https的网页,H5端最简单,链接直接window.location.href = 'https://xxx.com',或者用uni.navigateTo配合web-view组件——但web-view这玩意儿在App端有域名白名单限制,个人开发者没配过的话,页面直接给你显示空白。别问我怎么知道的,我调试了整整一个下午,最后发现是没在manifest里配置业务域名。 App端正经做法是plus.runtime.openURL()。这玩意儿能唤起系统浏览器,也能跳转第三方App的scheme。比如你要跳淘宝的商品详情,直接plus.runtime.openURL('taobao://item?id=xxx'),如果用户装了淘宝,直接就唤起App了,没装的话——你得先判断一下,不然就报错。判断方法用plus.runtime.isApplicationExist,这API得传包名,Android和iOS的包名写法还不一样,Android是com.taobao.taobao,iOS是taobao://。真麻烦,但绕不过去。 小程序端就更有意思了。微信小程序里,uni.navigateTo只能跳内部页面,外部链接必须用web-view组件。但web-view的src只支持业务域名,而且你得在微信公众平台后台配置。个人主体的小程序,不好意思,web-view直接是灰的,压根不能选。我见过有开发者用wx.redirectTo去跳,结果控制台直接提示“不支持打开非业务域名”。 还有个细节容易忽略:H5端如果用window.location.href跳转,页面会直接替换掉当前页面,用户点返回就回不来了。要保留当前页面状态,得用window.open开新窗口。但在App端,window.open根本不存在,你只能在plus.runtime.openURL和uni.navigateTo之间选。我自己的习惯是写个公共方法:先判断平台,App走plus,H5走window.open,小程序直接抛个提示让用户复制链接——因为小程序里真没法直接跳外部浏览器,只能复制到剪贴板让用户自己打开。 对了,App端跳外部链接还有一个坑:plus.runtime.openURL如果跳的是http链接,会直接调起系统浏览器,但有些安卓定制ROM(比如小米、华为)会弹一个“选择打开方式”的对话框,用户体验很割裂。你要是想直接在当前web-view里加载外部网页,得用uni.web-view.js那个桥接文件,但那个文件在uni-app的npm包里藏得挺深,不仔细翻文档根本找不到。 最后说个实用的小技巧:跳外链之前,最好先判断网络状态。用户在弱网环境下点跳转,如果链接加载超时,体验特别差。用uni.getNetworkType判断一下,没网直接弹toast“当前无网络”,别让用户干等。这细节看着小,但真能减少不少投诉。 写代码别硬套,每个端都有自己的脾气。你要是只做H5,那随便跳;要是做App,老老实实配好manifest的urlScheme;要是做小程序,趁早做好“复制链接”的备选方案。uniapp号称一套代码多端运行,但外链跳转这块,它真没帮你省多少事。 |