前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页

这有帮助吗?

  1. Research

Web常用功能

上一页H5可视化编辑下一页Javascript加密混淆

最后更新于1年前

这有帮助吗?

H5唤起移动应用

唤起 App,在不同平台要采用不同的方法,主要是这三个:

  • URL Scheme

  • Universal Link

  • Android App Links

URL Scheme

URL Scheme 是 iOS、Android 都兼容的机制,只需要原生 App 开发时注册 Scheme 即可,用户点击此类链接时,会自动唤醒 App,并借助 URL Router 机制跳转到指定页面。

:

sms://    #短信
tel://    #电话
weixin:// #微信
alipay:// #支付宝
taobao:// #陶宝
mqq://    #QQ
zhihu://  #知乎

URL Scheme 存在的限制:

  • 国内各个厂商浏览器差异很大,当要被唤醒的目标 App 未安装时,这个链接很容易出错。

  • 当注册有多个 Scheme 相同的时候,目前是没有办法区分的。

  • 不支持从其他 App 中的 UIWebView 中跳转到目标 App。

  • 被部分主流平台禁止,微信、微博、QQ浏览器、手机百度中都已经被禁止使用。

正是由于这些限制的存在,苹果和安卓都不约而同发布了自己的第二套方案:iOS 的 Universal Link、Android 的 App Links。

Universal Link(iOS)

Universal Link 是 iOS 9 后苹果推出的通用链接技术,能够方便的通过一个 https 链接来打开 App 指定页面,不需要额外的判断,如果没有安装 App,可以跳转到自定义地址。

相对 Scheme 的优势在于,Universal Link 是一个 Web Link,因此少了很多麻烦:当用户已安装该 App 时,不需要加载任何页面,能够立即唤醒 App,用户未安装 App,则跳去对应的 web link(自定义页面)。

Universal Links 支持从其他 App 中的 UIWebView 中跳转到目标 app。提供 Universal Link 给别的 App 进行 App 间的交流,然而对方并不能够用这个方法去检测你的 App 是否被安装,具有比较好的隐私性。绝大多数平台都支持 Universal Link,微信 7.0.5 版本也解除了对 Universal Link 的限制,同时也能被搜索引擎索引。

App Links(Android)

Android M 以上版本可以通过 App Links,让用户在点击一个链接时跳转到 App 的指定页面,前提是这个 App 已经安装并经过验证。App Links 的最大的作用,就是可以避免从页面唤醒 App 时出现的选择浏览器选项框,前提是必须注册相应的 Scheme,就可以实现直接打开关联的 App。

实际上 App Link s和 Universal Links 差异不大,但相对来说有不同的限制:

  • App links 在国内的支持还不够,部分安卓浏览器并不支持跳转至 App,而是直接在浏览器上打开对应页面。

  • 系统询问是否打开对应 App 时,假如用户选择“取消”并且选中了“记住此操作”,那么用户以后就无法再跳转 App。

微信唤起 app 之 微信开放标签(wx-open-launch-app)

需要注意的问题:

  • 提前条件:服务号已认证、开放平台账号已认证、服务号与开放平台账号同主体。

  • 配置:服务号 “JS接口安全域名” 绑定网页的域名、服务号绑定所需要跳转的App。

  • 点击开放标签按钮无法唤起 App:跟访问页面的方式有关。点击聊天窗口的链接访问,无法唤起移动应用。需要通过分享链接或者公众号发送消息(卡片形式)、扫描二维码访问页面,才能唤起。

  • 点击开放标签按钮无法唤起 App(安卓):App 必需是已经在后台运行,才能被唤起(IOS无此限制)。(应该可以解决,需要安卓原生端开发人员参与)。

用于页面中提供一个可跳转指定 App 的按钮。

注意:Android平台通过开放标签跳转App,App必须接入微信OpenSDK,详细参见文档。

wx-open-launch-app 仅开放给已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转满足一定条件的App。在使用该标签之前,首先需要前往的管理中心 - 公众账号或小程序详情 - 接口信息 - 网页跳转移动应用 - 关联设置中绑定所需要跳转的App。详细配置规则参考文档。

常见的 app URL Scheme
wx-open-launch-app
《Android微信 OpenSDK 接入指南》
微信开放平台
《微信内网页跳转 APP 功能》