精华内容
下载资源
问答
  • H5页面唤起app

    2020-12-14 15:01:01
    前言介绍:近期有需求需要h5页面中唤起app功能 小编试过N++方式,通过js直接以sheme形式跳转app,但是部分机型不兼容 最终使用往上的一个插件js实现开发{具体需求是如果手机已存在app直接跳转app应用中,如果没有该...
    前言介绍:近期有需求需要h5页面中唤起app功能
    小编试过N++方式,通过js直接以sheme形式跳转app,但是部分机型不兼容
    最终使用往上的一个插件js实现开发{具体需求是如果手机已存在app直接跳转app应用中,如果没有该app则跳转下载页面下载app}
    
    ?H5版本实现跳转APP功能
    1==>引入js脚本  
    <script src="https://unpkg.com/callapp-lib@3.1.2/dist/index.umd.js"></script>
    2==>页面js使用:
                          function jumpApp() {
    						var that = this;
    						var options = {
    							scheme: {
    								protocol: "fawnhealth",
    								host: "mfk",
    							},
    							intent: {
    								package: "包名",
    								scheme: "fawnhealth",
    							},
    							timeout: 2000,
    							fallback:"APP页面下载地址",
    							yingyongbao: "应用保市场",
    						};
    						var callLib = new CallApp(options);
    						callLib.open({
    							path: "index",
    						});
    					}
            
    ?vue版本
    1==>npm install --save callapp-lib
    2==>import CallApp from 'callapp-lib';
    3==>
    setTimeout(() => {
            var options = {
              scheme: {
                protocol: "APP协议",
                host: "mfk",
              },
              intent: {
                package: "包名",
                scheme: "fawnhealth",
              },
              timeout: 2000,
              fallback:"下载app地址",
              yingyongbao:
                "应用宝地址",
            };
            var callLib = new CallApp(options);
    
            if (this.$route.meta.jump) {
              console.log(this.$route.params.id, this.$route.name);
              callLib.open({
                param: { threadId: this.$route.params.id },
                path: this.$route.name,
              });
            } else {
              callLib.open({
                path: "index",
              });
            }
          }, 500);				
            
    

     

    展开全文
  • H5中是无法直接判断应用是否安装的,但是可以间接判断。首先判断安卓还是苹果,接着利用schema链接打开app,如果没有打开则执行setTimeout跳转下载页clickDownload() {if (navigator.userAgent.match(/(iPhone|iPod|...

    H5中是无法直接判断应用是否安装的,但是可以间接判断。

    首先判断安卓还是苹果,接着利用schema链接打开app,如果没有打开则执行setTimeout跳转下载页

    clickDownload() {

    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {

    var loadDateTime = new Date();

    window.location = "...";//schema链接或者universal link

    window.setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页

    var timeOutDateTime = new Date();

    if (timeOutDateTime - loadDateTime < 5000) {

    window.location = "..."; //ios下载地址

    } else {

    window.close();

    }

    }, 500);

    } else if (navigator.userAgent.match(/android/i)) {

    var state = null;

    try {

    window.location = '...'; //schema链接或者universal link

    window.setTimeout(function() {

    window.location = "..."; //android下载地址

    }, 500);

    } catch (e) {}

    }

    },

    展开全文
  • 通过h5页面唤起app

    2020-05-28 14:28:03
    1.callapp-lib 是一个 H5 唤起 APP 的解决方案 下载 npm install --save callapp-lib 引用 import CallApp from 'callapp-lib'; 函数 function phone(){ //配置文件 var options = { protocol: 'zhyluser://',...

    方法一

    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

    展开全文
  • Android H5判断是否安装app和唤起APP

    万次阅读 2016-05-05 18:35:08
    H5中是无法直接判断应用是否安装的,但是可以间接判断。 第一种方式, if(...){ document.location = ''; setTimeout(function(){  //此处如果执行则表示没有app },200); } 这里的逻辑很简单,当没有成功打开app的...
    H5中是无法直接判断应用是否安装的,但是可以间接判断。
    第一种方式,
    if(...){
    document.location = '';
    setTimeout(function(){
       //此处如果执行则表示没有app
    },200);
    }
    这里的逻辑很简单,当没有成功打开app的时候
    新页面不会弹出则页面逻辑可言进行,如果进入了新页面,则页面逻辑便终止了
    所以我们可以另开一个延时的线程来判断这个事情

    通过H5唤起APP
    编辑AndroidManifest.xml:
    主要是增加第二个<intent-filter>,launchapp用来标识schema,最好能保证手机系统唯一,那样就可以打开应用,而不是弹出一个选择框。
    android:pathPrefix标识url的path,可以附带自己的数据通过string传递到activity,比如完整url为 launchapp://haha?data=mydata
     
     <activity  
          android:name="com.robert.MainActivity"  
          android:configChanges="orientation|keyboardHidden|navigation|screenSize"  
          android:screenOrientation="landscape"  
          android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >  
          <intent-filter>  
              <action android:name="android.intent.action.MAIN" />  
              <category android:name="android.intent.category.LAUNCHER" />  
          </intent-filter>  
          <intent-filter>  
              <action android:name="android.intent.action.VIEW" />  
              <category android:name="android.intent.category.BROWSABLE" />  
              <category android:name="android.intent.category.DEFAULT"/>  
              <data android:scheme="launchapp" android:pathPrefix="/haha" />  
          </intent-filter>  
        </activity> 



       然后通过activity获得data数据:

         
    public void onCreate(Bundle savedInstanceState) {  
             Uri uridata = this.getIntent().getData();  
             String mydata = uridata.getQueryParameter("data");  
             ...  
        }

     


     编写html页面:
       整个页面也许是某个app的详细介绍,这里只写出关键的js代码:
     
     function openApp() {  
          
                if (/android/i.test(navigator.userAgent)) {  
                     var isrefresh = getUrlParam('refresh'); // 获得refresh参数  
                     if(isrefresh == 1) {  
                         return  
                     }  
                     window.location.href = 'launchapp://haha?data=mydata';  
                     window.setTimeout(function () {  
                             window.location.href += '&refresh=1' // 附加一个特殊参数,用来标识这次刷新不要再调用myapp:// 了  
                     }, 500);  
                 }  
          
        }



      上面代码可以达到这样一个目的,先请求 launchapp:// ,如果系统能处理,或者说已经安装了myapp表示的应用,那么就可以打开,另外,如果不能打开,直接刷新一下当前页面,等于是重置location。


    欢迎关注公众号,互相学习

     


    展开全文
  • H5唤起APP

    2020-03-14 16:08:10
    H5唤起APP的成功与失败的判断和处理 H5链接点击事件唤起APP,若成功则APP唤起进入相应页面,反之跳转APP的应用宝下载链接。(H5唤起APP,需要跟APP开发结合,兼容没有配置H5唤起APP的版本) 配置a标签链接(Android...
  • uni-app H5唤起App

    2021-09-30 14:56:24
    唤起应用页面用JS代码请求该协议,如果在3000ms内有应用程序能解析这个协议,那么就能打开该应用;如果超过3000ms就跳转到app下载页。 //直接调用这个方法即可 async checkInstallApp() { var u = navigator....
  • h5页面唤起app如果没安装就跳转下载(iOS和Android) 浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。 微信里屏蔽了 schema 协议,...
  • H5中是无法直接判断应用...}这里的逻辑很简单,当没有成功打开app的时候新页面不会弹出则页面逻辑可言进行,如果进入了新页面,则页面逻辑便终止了所以我们可以另开一个延时的线程来判断这个事情通过H5唤起APP编辑...
  • H5唤起app

    2021-04-14 15:03:47
    H5唤起app 前言:H5页面点击按钮,判断手机时候安装app,安装则与ios和Android沟通交互传值方式,未安装则跳转app下载页; 1 . html代码片段 // html代码片段 // 唤起app按钮 <a class="open-app down_app_btn_...
  • h5唤起app

    万次阅读 2016-08-21 22:01:21
    h5唤起app这种需求是常见的。在移动为王的时代,h5在app导流上发挥着重要的作用。 目前我们采用的唤起方式是url scheme(iOS,Android平台都支持),只需原生APP开发时注册scheme, 那么用户点击到此类链接时,会自动...
  •  通过打开一个h5 网页,这个h5 页面做一个中转(期间可能要拉接口,拉取后台配置的跳转页面url,比如跳转到一个活动页面),最后跳转对应app对应的界面中。 2.H5 网页嵌入app  现在很多app并不是所有的页面都是...
  • 1. 使用callapp-lib插件:参考https://github.com/suanmei/callapp-lib。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • 最近遇到一个需求:点击一个按钮,如果本机装有则唤起app,没有的话则跳下载页。刚一接到需求,觉得很熟悉,实际上这个功能也确实很常见,页能搜索到一大堆方案,但是实际应用中,却发现总是很难做到100%的完美。这...
  • H5判断是否安装app和唤起APP

    万次阅读 2017-03-03 10:14:07
    html里是无法检测的,只能通过js调用android的方法,获取到app的安装信息后,再调用js,传值到html里获得。$(function(){ $(".a").click(function(){ var the_href=http://segmentfault.com/a/$(".a").attr("href...
  • h5页面唤起app 某个特定页面其实是走了很多弯路还有阅读了不了大牛的博客,为了让大家少走弯路,我就总结下我归纳总结方法吧 android app内页面scheme配置 <activity android:name=...
  • 首先H5唤起APP,需要在H5和APP中进行不同的设置。 原理说明 首先需要说明,不管iOS还是Android,浏览器都不可能预知本地是否安装了某个APP的。或者更严谨地说,我们不能通过浏览器来预知本地...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,651
精华内容 1,060
关键字:

判断h5是否唤起app