通过h5页面唤起app

方法一

1.callapp-lib 是一个 H5 唤起 APP 的解决方案

下载

npm install --save callapp-lib

引用

import CallApp from 'callapp-lib';

函数

 function phone(){
      //配置文件
      var options = {
            protocol: 'zhyluser://',
            intent: {
                scheme: 'zhyluser://',
                package: 'com.changhua.zhyl.user',
            },
            appstore: 'https://...', //苹果的https
            yingyongbao: '//....',  // http或https 都行
            fallback: '',
        };
        //初始化实例
        var callLib = new CallApp (options);
        //打开对应问app
        callLib.open({
            param: {
                id: serviceId,
            },
            path: 'serviceUser',
            callback: function () {
                console.log('请求超时，请稍后再试')
            },
        });
     }
      

参考:https://www.npmjs.com/package/callapp-lib

方法二

npm install web-launch-app --save

import { LaunchApp, detector, copy, ua, isAndroid, isIos, inWeixin, inWeibo, supportLink } from 'web-launch-app';
 
const lanchApp = new LaunchApp();
// 简单唤起（参数含义参见Api部分）
lanchApp.open({
    scheme: 'app://path?k=v',
    url: 'https://link.domain.com/path?k=v',
    param:{
        k2: 'v2'
    }
});
 
// 复杂唤起
lanchApp.open({
    useYingyongbao: inWeixin && isAndroid,
    launchType: {
        ios: inWeixin ? 'store' : 'link',
        android: inWeixin ? 'store' : 'scheme',
    },
    autodemotion: false,
    scheme: 'app://path?k=v',
    url: 'https://link.domain.com/path?k=v',
    param:{
        k2: 'v2'
    },
    timeout: 2000,
    pkgs:{
        android: 'https://cdn.app.com/package/app20190501.apk',
        ios: 'https://itunes.apple.com/cn/app/appid123?mt=8',
        yyb: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.app.www&ckey=CK123'
    }
}, (s, d, url) => {
        console.log('callbackout', s, d, url);
        s != 1 && copy(url);
        return 2;
    });
 
// 下载
lanchApp.download();
 
// 全局默认配置（参见Config部分）
const lanchApp2 = new LaunchApp(config);
lanchApp2.open({
    page: 'pagenameInConfig',
    param:{
        k: 'v'
    }
});

参考:https://www.npmjs.com/package/web-launch-app

方法三

客户端环境判断

    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Android
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS

浏览器检查

//判断终端
    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iOS终端
                android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //Android终端
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                qq: u.match(/\sQQ/i) == " qq" //是否QQ
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }

      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
       //alert(navigator.userAgent);  
       window.location.href ="iPhone.html";
      } else if (/(Android)/i.test(navigator.userAgent)) {
       //alert(navigator.userAgent); 
       window.location.href ="Android.html";
       } else {
       window.location.href ="pc.html";
      };
    
    function downApp(){
    var u = navigator.userAgent,
        isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
        isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        urls = {
            'android':'http://dldir1.qq.com/weixin/android/weixin704android1420.apk',
            'ios':'https://itunes.apple.com/cn/app/wei/id414478124',
            'other':'http://weixin.qq.com/d'
        };
    //三元运算
    // window.location.href = isAndroid? urls.android : isiOS? urls.ios : urls.other;
    //简化
    if(isAndroid){
        window.location.href=urls.android;
    }else if(isiOS){
        window.location.href=urls.ios;
    }else{
        window.location.href=urls.other;
    }
}
downApp();



if (browser.versions.ios) {

          window.location.href = "taobao://";

          setTimeout(function(){

                    window.location.href = "你的app在商店中的地址";

                    window.location.href = "你的app在商店中的地址";  //为什么要加两遍我下面会说到(ios 弹框)

          },2000)

}else if (browser.versions.android){

          window.location.href = "taobao://**";

          setTimeout(function(){

                    window.location.href = "你的app的下载地址";

          },2000)

}


   

参考:https://cloud.tencent.com/developer/article/1537372

方式四

var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
var form = document.createElement('form');
form.action = src;
document.getElementsByTagName('body')[0].appendChild(form);
form.submit();

参考:https://blog.csdn.net/weixin_34221112/article/details/88768839