第三方链接跳转原生APP( H5前端 对接 原生前端 )

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

需求：微信群点击第三方链接跳转原生APP

一、URL Schemes是什么？

url schemes：页面跳转协议

组成: [scheme:][authority][path][?query][#fragment]

scheme : 协议名称 - 必须

host : 协议地址 - 必须

port : 协议的端口，可以不填

path : 协议路径，可用 / 连接多个

query : 携带的参数可用 & 连接多个

fragment : 锚点

通过定义自己的scheme协议，可以非常方便跳转app中的各个页面；

通过scheme协议，服务器可以定制化告诉App跳转到APP内部页面。

栗子1：http://baidu:8080/news?system=pc&id=45464

栗子2：alipays://platformapi/startapp?appId=20000067

二、Universal Link是什么？

Universal Link 是 Apple 在 WWDC 2015 上为 iOS 9 引入的一个新功能，是通过传统HTTP链接来启动App的新技术。可以使用相同的网址打开网站和App。 通过唯一的网址，就可以链接到App中具体的视图，不需要特殊的Scheme。如果用户没有安装App则链接到对应的普通网页。

栗子： https://company.jiajuxy.com/?’+window.location.hash

三、解决方案

1.callapp-lib（第三方依赖）

开箱即用的callapp-lib
使用文档参考
callapp-lib使用

## Install

Install with [npm](https://www.npmjs.com/):

```sh
npm install --save callapp-lib

Usage

const CallApp = require('callapp-lib');

or;

import CallApp from 'callapp-lib';

callapp-lib 同样支持 script 加载，你可以使用下面的 cdn 文件（地址在下面的示例中），也可以下载 dist/index.umd.js 到你的项目中，index.umd.js 会暴露一个全局变量 CallApp ，这个全局变量和上面 commonjs 导入的 CallApp 内容是一致的，使用方法也是一致的。

2.第三方集成MobLink

此项方式需要原生端配合生成集成
moblink使用教程入口

3.朴素的按钮（手动写）

---

<template>
  <div>
    <!--自动加载隐藏页面跳转-->
    <iframe src="协议地址" style="display:none"></iframe>
    <van-button type="primary" :disabled="isDisabled" block @touchstart.native.prevent="evokeByLocation()">打开APP</van-button>
    <van-button type="primary"  block @touchstart.native.prevent="clickCallappFn()">下载APP</van-button>

  </div>
</template>

<script>
export default {
  props:{
    packageDataUrl:String,
  },
  data () {
    return {
      uri:window.location.hash,  //参数
      isDisabled:false,
    }
  },
  methods:{
    evokeByLocation(){
      window.location.href = '协议地址?'+this.uri;
      // 无响应或者没安装跳转下载
        var t = Date.now(),
        r = this.packageDataUrl;
        var timer =null;
        timer = setTimeout(function() {
          this.isDisabled=true;
        return Date.now() - t > 2200
          ? (clearTimeout(this.timer), !1)
          : !document.webkitHidden &&
              !document.hidden &&
              void (location.href = r);
              
      }, 2000);
      
    }, 
    clickCallappFn(){
     window.location = this.packageDataUrl; //下载地址  
   }, 
  },
}
</script>

总结

可以通过三种方式实现，按需求取舍！ 谢谢观看！如有不对，欢迎指证！