首页
前端开发
HTML5
Web页面唤起App方案

Web页面唤起App方案

0 次浏览 0 条评论
rar
rar

Web 页面唤起 App 的方案，说白了就是想办法在用户点击网页时直接拉起 App，没装的话就引导他去下载。整个逻辑其实不复杂，关键点就两块：设备判断和链接跳转。设备判断靠的是navigator.userAgent，iOS 和 Android 区分开，再根据平台用不同的跳转方式。

iOS 这边，Universal Links是苹果推荐的方案，稳定还不弹提示，不过配置麻烦点，要搞定apple-app-site-association文件。偷懒点就用自定义 URL Scheme，像myapp://home这种，但用户没装 App 时会失败跳转，要兜底。

Android 更灵活，Intent Filter加上scheme或host配置好之后，点击特定链接就能唤起 App。比如下面这个写法：

JavaScript 那边，一般是点击事件里判断系统，动态设置location.href。如果 App 没装，iOS 就跳 App Store，Android 就跳 Google Play，基本逻辑像这样：

if (isIOS) {
  [removed].href = 'myapp://home';
  setTimeout(() => {
    [removed].href = 'https://apps.apple.com/app/id123456';
  }, 2000);
} else {
  [removed].href = 'intent://home#Intent;scheme=myapp;package=com.example.app;end';
}

项目里有两个文件挺实用的，TestJs是通用逻辑，TestWebJs是 Web 端特化逻辑。想偷个懒直接用 Demo 也行，参考sample-web-app，或者想研究UserAgent也有例子看，像这个库就还行。

如果你经常要做“从网页跳 App”的需求，这套方案可以直接套着来，逻辑清晰、兼容性也不错。记得做好兜底，别让用户点了啥都没反应。

rar 文件大小：1.15MB