小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> uniapp微信小程序端怎么实现外链跳转

uniapp微信小程序端怎么实现外链跳转

在 UniApp 的微信小程序端,由于平台安全限制,无法直接通过路由跳转外链(如 uni.navigateTo 跳转到 https://www.XX.com。但可以通过以下两种方式间接实现外链跳转:


一、使用 web-view 组件(推荐)

web-view 是小程序提供的网页容器组件,可以内嵌加载外链页面。

实现步骤:

  1. 配置业务域名
    外链域名需在微信小程序后台的 业务域名 中配置,否则无法加载。

    • 登录微信公众平台 → 开发 → 开发设置 → 业务域名 → 添加域名(如 https://baidu.com)。

    • 下载校验文件并部署到域名根目录。

  2. 创建 web-view 页面
    在项目中新建页面用于加载外链。




在 pages.json 中注册页面

{
  "pages": [
    {
      "path": "pages/webview/webview",
      "style": {
        "navigationBarTitleText": "加载中..."
      }
    }
  ]
}


跳转到 web-view 页面
通过 uni.navigateTo 跳转,并传递外链地址参数:

// 在需要跳转的页面调用
const externalUrl = 'https://baidu.com';
uni.navigateTo({
  url: `/pages/webview/webview?url=${encodeURIComponent(externalUrl)}`
});


二、通过客服消息或公众号文章(间接跳转)

如果无法满足 web-view 的条件,可通过以下方式间接引导用户访问外链:

1. 客服消息跳转

用户在小程序内联系客服,客服回复外链(用户需主动点击链接)。

// 打开客服会话
uni.navigateTo({
  url: 'contact/contact'
});


2. 跳转到公众号文章

在公众号文章中插入外链,用户点击文章中的链接跳转。

// 跳转到公众号文章(需关联同一主体的公众号)
uni.navigateToMiniProgram({
  appId: '公众号AppID',
  path: 'pages/article/article?id=123'
});

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了