uniapp如何打开xhslink.cn/m/3短链接

在uniapp中如何通过代码打开"xhslink.cn/m/3"这样的短链接？我尝试使用uni.navigateTo和uni.redirectTo都不起作用，请问有什么正确的方法可以在uniapp应用中跳转这种第三方短链接吗？需要特定的配置或插件支持吗？

2 回复

在uniapp中打开短链接，可以使用uni.navigateTo或uni.redirectTo方法：

// 方式1：保留当前页面
uni.navigateTo({
  url: 'https://xhslink.cn/m/3'
})

// 方式2：关闭当前页面
uni.redirectTo({
  url: 'https://xhslink.cn/m/3'
})

注意：需要确保链接在白名单中，且HBuilderX配置了合法域名。


在 UniApp 中打开短链接（如 xhslink.cn/m/3），可以通过以下方法实现：

方法一：使用 uni.navigateTo 或 uni.redirectTo

如果短链接指向的是 Web 页面，可以直接在 UniApp 中通过 WebView 或跳转到外部浏览器打开。

  1. 使用 WebView 组件（适用于内嵌网页）：

    <template>
  <web-view src="https://xhslink.cn/m/3"></web-view>
</template>

    注意：web-view 组件会占用整个页面，通常用于内嵌显示网页。

  2. 跳转到外部浏览器（推荐，避免应用内限制）：

    // 在按钮点击事件或页面方法中调用
uni.navigateTo({
  url: '/pages/webview/webview?url=' + encodeURIComponent('https://xhslink.cn/m/3')
});

    需要提前创建一个 webview.vue 页面，并在 pages.json 中配置路由：

    <!-- pages/webview/webview.vue -->
<template>
  <web-view :src="url"></web-view>
</template>
<script>
  export default {
    data() {
      return {
        url: ''
      };
    },
    onLoad(options) {
      this.url = decodeURIComponent(options.url);
    }
  };
</script>

方法二：使用 uni.openExternal（H5 平台）

如果需要在 H5 环境中直接打开系统浏览器：

// 仅适用于 H5 平台
uni.openExternal({
  url: 'https://xhslink.cn/m/3'
});

注意事项：

  1. 短链接处理：确保短链接可访问且未屏蔽。如果短链接需要登录或特定环境，可能无法直接打开。
  2. 平台差异：
    • 小程序平台可能受域名白名单限制，需在 manifest.json 中配置 request 合法域名。
    • App 平台无限制，但需注意网络权限。
  3. 用户体验：建议通过提示让用户选择是否跳转，避免强制打开外部链接。

示例代码（完整跳转逻辑）：

// 在 UniApp 页面方法中
openShortLink() {
  const link = 'https://xhslink.cn/m/3';
  // 判断平台
  #ifdef H5
    window.open(link, '_blank');
  #else
    uni.navigateTo({
      url: '/pages/webview/webview?url=' + encodeURIComponent(link)
    });
  #endif
}

根据实际需求选择合适的方法。如果短链接指向的是动态内容（如需要登录），建议通过后端解析后再使用。

回到顶部