uni-app 外部应用 在uni-app中实现打开外部应用的方法，如浏览器、淘宝、AppStore、QQ等

📱 uni-app中如何优雅地打开外部应用？一招搞定浏览器、淘宝、AppStore等！

场景：
"小王正在开发一个电商类uni-app应用，用户点击商品详情页的"去淘宝购买"按钮时，需要直接跳转到淘宝App；点击"联系客服"时，要唤起QQ聊天窗口；点击"应用评分"则要跳转AppStore...这该怎么实现呢？🤔"

别急！uni-app提供了多种方式实现外部应用跳转，下面我就手把手教你几种实用方法~ 🛠️

基础方法：使用uni.navigateToMiniProgram（适用于微信小程序环境）

// 示例：跳转到淘宝小程序（仅微信环境）
uni.navigateToMiniProgram({
  appId: '淘宝小程序的appid', // 需要替换为实际值
  path: 'pages/item/index?id=123',
  success(res) {
    console.log('跳转成功🎉');
  },
  fail(err) {
    console.log('跳转失败😢', err);
  }
})

⚠️ 注意：

• 仅限微信小程序平台使用
• 需要提前在微信公众平台配置业务域名
• 目标小程序必须已发布

通用方案：使用plus.runtime.launchApplication（全平台支持）

// 示例：打开淘宝App（Android/iOS通用）
function openTaobao() {
  if(plus.runtime.isApplicationExist({pname:'com.taobao.taobao'})) {
    plus.runtime.launchApplication({
      pname: 'com.taobao.taobao',
      extra: {url: 'taobao://item.taobao.com/item.htm?id=123'}
    }, function(e) {
      console.log('打开失败，可能未安装App😅');
      // 备用方案：跳转网页版
      uni.navigateTo({url:'/pages/webview?url=https://m.taobao.com'})
    });
  } else {
    uni.showToast({title: '请先安装淘宝App~', icon:'none'});
  }
}

🔍 关键点：

• pname参数对应各平台包名：
  • 淘宝：com.taobao.taobao
  • QQ：com.tencent.mobileqq
  • 微信：com.tencent.mm
• iOS的URL Scheme需要额外配置（见下文）

特殊场景处理技巧

跳转浏览器🌐

// 使用系统浏览器打开网页
uni.navigateTo({
  url: '/pages/common/webview?url=' + encodeURIComponent('https://example.com')
})
// 或者直接调用（H5环境）
window.location.href = 'https://example.com';

跳转AppStore/应用市场📲

function gotoAppStore() {
  // iOS
  plus.runtime.launchApplication({
    action: 'itms-apps://itunes.apple.com/app/id387682726' // 替换为实际AppID
  }, function(e) {
    console.log('跳转失败，改用网页版');
    plus.runtime.openURL('https://apps.apple.com/cn/app/id387682726')
  });
  // Android（各厂商差异较大）
  const markets = [
    'market://details?id=com.taobao.taobao',
    'huaweistore://...',
    'mimarket://...'
  ]
  // 尝试逐个打开
}

唤起QQ聊天💬

function openQQ(qqNumber) {
  plus.runtime.openURL(`mqq://im/chat?chat_type=wpa&uin=${qqNumber}`);
  // 备用方案（未安装QQ时）
  setTimeout(() => {
    plus.runtime.openURL(`https://wpa.qq.com/msgrd?v=3&uin=${qqNumber}&site=qq&menu=yes`);
  }, 3000);
}

避坑指南🚧

1. iOS白名单问题
   需要在manifest.json中添加URL Scheme：

   "ios" : {
     "urltypes" : [
       {
         "urlidentifier" : "com.tencent.mm",
         "urlschemes" : ["weixin"]
       }
     ]
   }

2. Android包名获取技巧

   

   • 从应用官网查找
   • 使用adb shell pm list packages命令
   • 第三方网站查询（注意信息安全）

3. 优雅降级方案

   function smartOpen(appScheme, webUrl) {
     plus.runtime.openURL(appScheme, function(err) {
       uni.showModal({
         title: '提示',
         content: '是否跳转到网页版？',
         success(res) {
           if(res.confirm) plus.runtime.openURL(webUrl);
         }
       });
     });
   }

2025年最新适配建议✨

根据2025年8月各平台政策：

1. 微信小程序已全面支持<web-view>内嵌H5跳转App
2. iOS 19要求所有URL Scheme必须在Info.plist中声明
3. 华为鸿蒙Next推荐使用hap://协议替代部分Android Intent

：

• 简单场景 → 直接用uni.navigateToMiniProgram
• 跨平台需求 → plus.runtime系列API
• 考虑兼容性 → 一定要准备备用方案

你可以像搭积木一样组合这些方法，轻松实现各种跳转需求啦！如果遇到具体问题，欢迎在评论区交流~ 💬