Browser-Deeplink 使用教程

项目介绍

Browser-Deeplink 是一个用于将网站用户重定向到原生 Android 或 iOS 应用的 JavaScript 插件。如果用户没有安装应用，则会重定向到相应的应用商店页面。这种功能在 YouTube、Spotify 等应用中非常常见，但在移动浏览器中并不是默认功能，且实现起来较为复杂。Browser-Deeplink 通过使用隐藏的 iframe 和 setTimeout() 方法来实现这一功能。

项目快速启动

安装

首先，将 browser-deeplink.js 文件包含到你的项目中：

<script src="path/to/browser-deeplink.js" type="text/javascript"></script>

或者使用 require 方法：

const deeplink = require('path/to/browser-deeplink');

配置

提供你的应用详情：

deeplink.setup({
  iOS: {
    appName: "myapp",
    appId: "123456789"
  },
  android: {
    appId: "com.myapp.android"
  }
});

这将创建以下应用商店链接：

• iOS: itms-apps://itunes.apple.com/app/myapp/id123456789?mt=8
• Android: https://play.google.com/store/apps/details?id=com.myapp.android

打开 Deeplink

在页面加载时打开 Deeplink：

window.onload = function() {
  deeplink.open("myapp://object/xyz");
}

应用案例和最佳实践

案例1：社交媒体应用

假设你有一个社交媒体应用，用户在浏览器中点击某个链接时，可以直接打开应用并跳转到特定页面：

deeplink.setup({
  iOS: {
    appName: "SocialApp",
    appId: "987654321"
  },
  android: {
    appId: "com.socialapp.android"
  }
});

window.onload = function() {
  deeplink.open("socialapp://post/12345");
}

案例2：电子商务应用

对于电子商务应用，用户在浏览器中点击商品链接时，可以直接打开应用并跳转到商品详情页面：

deeplink.setup({
  iOS: {
    appName: "EcommerceApp",
    appId: "135792468"
  },
  android: {
    appId: "com.ecommerceapp.android"
  }
});

window.onload = function() {
  deeplink.open("ecommerceapp://product/67890");
}

典型生态项目

1. React-Native 集成

如果你使用 React-Native 开发应用，可以结合 react-native-deeplinking 库来实现 Deeplink 功能：

import { Linking } from 'react-native';

Linking.openURL('myapp://object/xyz').catch(err => console.error('An error occurred', err));

2. Cordova 插件

对于 Cordova 项目，可以使用 cordova-plugin-deeplinks 插件来处理 Deeplink：

cordova.plugins.deeplink.resolveExternal(function(match) {
  console.log('Deeplink matched: ' + match.url);
}, function(nomatch) {
  console.error('Deeplink did not match');
}, {
  url: 'myapp://object/xyz'
});

通过这些集成方案，你可以更方便地在不同类型的应用中实现 Deeplink 功能。