当前位置：首页 > news >正文

【外部链接跳转uniapp开发的App内指定页面】实现方案

news 来源：原创 2025/5/18 21:43:07

🌻🌻前言

在移动应用开发中，经常需要通过外部链接（如短信、网页、二维码等）直接跳转到App内的特定页面，例如活动详情页、用户主页等。本文将以uniapp为例，详细讲解如何通过URL Scheme和**Universal Link（App Link）**实现外部链接精准跳转至App内指定页面。

🚀🚀实现方案

1. 使用URL Scheme跳转

URL Scheme是一种通过自定义协议唤醒App的技术（如 myapp://page/home）。

步骤1：配置URL Scheme

在 manifest.json源文件 中配置应用协议：

// manifest.json (uni-app项目)
"app-plus": {
  "schemes": ["myapp"] // 自定义协议名称（建议使用英文）
}

或者在manifest.json可视化界面中配置协议：
打开项目的manifest.json文件，在 “App常用其它设置” -> “Android设置” -> “UrlSchemes” 项中进行设置：
在这里插入图片描述

步骤2：处理外部链接

在 App.vue 的 onLaunch 生命周期中监听启动参数：

onLaunch: function(options) {
  // 处理外部唤醒逻辑
  if (options.path && options.query) {
    const path = options.path; // 获取路径，如 "pages/home/index"
    const query = options.query; // 获取参数，如 {id: 123}
    uni.navigateTo({
      url: `/${path}?${Object.keys(query).map(k => `${k}=${query[k]}`).join('&')}`
    });
  }
}

步骤3：生成外部链接

外部链接格式示例：

myapp://pages/user/info?user_id=1001

2. 使用Universal Link（iOS）或App Link（Android）

适用于通过HTTPS链接直接跳转App（需配置域名关联）。

配置步骤：

iOS：在苹果开发者中心配置Associated Domains，格式为 applinks:yourdomain.com。
Android：配置 assetlinks.json 文件并托管至域名根目录。
在uniapp中监听链接：

// App.vue
onLaunch: function() {
  // #ifdef APP-PLUS
  plus.runtime.getIntent().payload = url; // 处理Android
  // 监听iOS Universal Link
  plus.runtime.addEventListener('intent', (e) => {
    this.handleOpenURL(e.payload);
  });
  // #endif
}

🚀🚀关键代码示例

解析URL参数并跳转

handleOpenURL(url) {
  // 示例URL: myapp://pages/goods/detail?id=2023
  const params = url.split('://')[1]; // 获取路径和参数
  const [pathPart, queryPart] = params.split('?');
  const query = {};
  if (queryPart) {
    queryPart.split('&').forEach(item => {
      const [key, value] = item.split('=');
      query[key] = decodeURIComponent(value);
    });
  }
  // 跳转到指定页面
  uni.reLaunch({
    url: `/${pathPart}?${Object.keys(query).map(k => `${k}=${query[k]}`).join('&')}`
  });
}