Flutter中如何实现从网页跳转回应用（含外部浏览器场景）

云上老周

2026-10-18

实现逻辑分两种场景处理：

场景1：使用inAppWebView在应用内打开网页

该场景无需额外系统配置，直接通过webview提供的JS交互通道即可实现回调：

初始化InAppWebView时注册自定义JS通道，示例代码如下：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你要打开的网页地址")),
  javascriptChannels: <JavascriptChannel>{
    JavascriptChannel(
      name: 'CustomAppChannel',
      onMessageReceived: (JavascriptMessage message) {
        if (message.message == "trigger_back") {
          // 此处执行返回应用后的逻辑，例如关闭webview、跳转到指定页面等
          Navigator.pop(context);
        }
      },
    ),
  },
)

网页端对应按钮的点击事件里调用通道方法即可：

document.querySelector('#back_to_app_btn').addEventListener('click', () => {
  if (window.CustomAppChannel) {
    CustomAppChannel.postMessage('trigger_back');
  }
})

场景2：使用Chrome等外部浏览器打开网页

该场景无法使用inAppWebView的能力，需要通过*DeepLink（深度链接）*实现应用唤起，分端配置：

Android端配置

在android/app/src/main/AndroidManifest.xml的启动Activity标签下新增intent-filter：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 自定义scheme可自行修改，避免和其他应用冲突 -->
    <data
        android:scheme="my_flutter_app"
        android:host="route" />
</intent-filter>

配置完成后，格式为my_flutter_app://route的链接被点击时，会自动唤起你的应用。

iOS端配置

在ios/Runner/Info.plist中新增如下配置：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>my_flutter_app</string>
        </array>
    </dict>
</array>

网页端实现

按钮点击时直接跳转配置好的深度链接即可：

document.querySelector('#back_to_app_btn').addEventListener('click', () => {
  window.location.href = 'my_flutter_app://route';
  // 可选降级逻辑：如果用户未安装应用，2秒后跳转到应用下载页
  setTimeout(() => {
    window.location.href = '你的应用下载地址';
  }, 2000);
})

可选：传递参数到应用

如果需要从网页携带参数到应用，可以将参数拼在深度链接后，例如my_flutter_app://route?target_page=goods_detail&goods_id=123，Flutter端可通过uni_links插件监听唤起事件，解析参数后执行对应逻辑。

内容的提问来源于stack exchange，提问作者Ardeshir ojan