精华内容
下载资源
问答
  • H5 唤醒Android App

    千次阅读 2017-01-03 11:03:58
    H5 唤醒Android App

    目录

    原文链接:http://ihongqiqu.com/2015/12/03/html-call-native-app/

    解决问题

    当用户在手机浏览器中点击一个按钮时,如果手机上已经安装该应用,则直接打开,如果没有安装,则转向应用下载页面。

    实现方式

    H5实现

    H5实现链接格式如下

    <a href="[scheme]://[host]/[path]?[query]"> 唤起应用 </a>

    各个项目含义如下所示:

    • scheme:唤起协议 ※详细后述
    • host: 唤起指定host
    • path: 协议路径※没有也可以
    • query: 一些参数※没有也可以

    终端未安装App

    终端如果已经安装我们的应用,这个时候可以直接唤起原生应用;终端如果没有安装我们的应用,这时我们需要引导用户去安装。

    JavaScript实现源码

    <a id="call-app" href="javascript:;" > Start or Download </a><br/><br/>
    <input id="download-app" type="hidden" name="storeurl" value="http://jd.com/8JZ5OO">
    
    <script>
        (function(){
            var ua = navigator.userAgent.toLowerCase();
            var t;
            var config = {
                /*scheme:必须*/
                scheme_IOS: 'schemedemo://',
                scheme_Adr: 'schemedemo://ihongqiqu.com/test/scheme?name=google&page=1',
                download_url: document.getElementById('download-app').value,
                timeout: 600
            };
    
            function openclient() {
                var startTime = Date.now();
    
                var ifr = document.createElement('iframe');
    
                ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
                ifr.style.display = 'none';
                document.body.appendChild(ifr);
    
                var t = setTimeout(function() {
                    var endTime = Date.now();
    
                    if (!startTime || endTime - startTime < config.timeout + 200) { 
                        window.location = config.download_url;
                    } else {
    
                    }
                }, config.timeout);
    
                window.onblur = function() {
                    clearTimeout(t);
                }
            }
            window.addEventListener("DOMContentLoaded", function(){
                document.getElementById("call-app").addEventListener('click', 
                    openclient, false);
            }, false);
        })()
    </script>

    APP实现

    AndroidManifest中添加配置

    <activity android:name=".SchemeActivity">
        <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="schemedemo" />
        </intent-filter>
    </activity>

    DATA标签中匹配原则如下:

    • android:scheme : 唤起协议
    • android:host : 唤起host,只有置顶的host才可被唤起
    • android:pathPrefix : 唤起的路径,对路径进一步的过滤

    Activity中接受唤起协议的数据:

    Uri uri = getIntent().getData();
    StringBuilder sb = new StringBuilder();
    // 唤起链接
    sb.append("string : ").append(getIntent().getDataString()).append("\n");
    sb.append("scheme : ").append(uri.getScheme()).append("\n");
    sb.append("host : ").append(uri.getHost()).append("\n");
    sb.append("port : ").append(uri.getPort()).append("\n");
    sb.append("path : ").append(uri.getPath()).append("\n");
    // 接收唤起的参数
    sb.append("name : ").append(uri.getQueryParameter("name")).append("\n");
    sb.append("page : ").append(uri.getQueryParameter("page"));
    
    tv_data.setText(sb.toString());

    测试资源

    唤起源码
    测试地址
    正式地址

    项目源码

    https://github.com/jingle1267/AndroidSchemeDemo

    展开全文
  • H5APP交互 h5调用app方法传参H5APP交互 h5调用app方法传参今天遇到一个需求,是点击分享按钮,需要调用app的原生分享app那边写好了一个方法是onShare( )我们第一步就是点击分享好友触发第二步:onShare () {...

    H5 和 APP交互 h5调用app方法传参

    H5 和 APP交互 h5调用app方法传参

    今天遇到一个需求,是点击分享按钮,需要调用app的原生分享

    app那边写好了一个方法是onShare( )

    我们第一步就是点击分享好友触发

    7d90ab73dd8c20f66166420fa8968396.png

    第二步:

    onShare () {

    if(this.isAndroid_ios()) {

    console.log('安卓')

    window.local_obj.onShare('1')

    }else {

    console.log('ios')

    window.webkit.messageHandlers.onShare.postMessage('1'); //ios

    }

    },

    isAndroid_ios()这个函数是判断是否是安卓或者是ios

    因为安卓和ios的调用方法不同

    以onShare()方法为例:

    安卓:window.local_obj.onShare('1')

    IOS:window.webkit.messageHandlers.onShare.postMessage(’1‘); //ios

    里面可以传参给APP  的

    016862b5255ba3f280e47e997f2a2437.png

    H5 和 APP交互 h5调用app方法传参相关教程

    展开全文
  • 转载请注明出处// 项目代码为uniapp编写// fingerScheme 为app的scheme,如微信的为`weixin://`let url = this.fingerScheme; // codingapi://fingervar timeout, t = 1000, hasApp = true;setTimeout(function () {...

    转载请注明出处

    // 项目代码为uniapp编写

    // fingerScheme 为app的scheme,如微信的为`weixin://`

    let url = this.fingerScheme; // codingapi://finger

    var timeout, t = 1000, hasApp = true;

    setTimeout(function () {

    if (!hasApp) {

    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终端

    if(isAndroid){

    _this.$Common.user.showToast("检测到您未安装,请先安装");

    window.location.href = _this.pkgUrl

    }else{

    _this.$Common.user.showToast("您的设备赞不支持");

    }

    //未安装app

    }

    document.body.removeChild(ifr);

    }, 2000)

    var t1 = Date.now();

    var ifr = document.createElement("iframe");

    ifr.setAttribute('src', url);

    ifr.setAttribute('style', 'display:none');

    document.body.appendChild(ifr);

    timeout = setTimeout(function () {

    var t2 = Date.now();

    if (!t1 || t2 - t1 < t + 100) {

    hasApp = false;

    }

    }, t);

    展开全文
  • H5唤醒Android原生App传参数

    千次阅读 2018-04-25 16:30:31
    H5唤醒Android原生App传参数 @Author GQ 2018年04月25日 H5测试页面需要调用APP的WebView页面,为了方便开发人员测试 写一个唤醒app并传参数url显示webview页面 效果图 使用的qq内置浏览器, 测试...

    H5唤醒Android原生App传参数

    @Author GQ 2018年04月25日

    H5测试页面需要调用APP的WebView页面,为了方便开发人员测试

    写一个唤醒app并传参数url显示webview页面

    这里写图片描述

    效果图

    这里写图片描述

    • 使用的qq内置浏览器, 测试使用UC浏览器无法调用 scheme 然后点击 “调试”

    这里写图片描述
    - 此时会唤醒app并打开 TestWebViewActivity 加载页面

    AndroidManifest中配置

    //不需要配置权限
    <activity android:name=".test.TestWebViewActivity">
                <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:host="h5"
                        android:scheme="app" />
                </intent-filter>
    </activity>
    • 注意schemehost 是自己随便写的,但需要和h5中内容一致,访问时即拼接为 app://h5

    Html

    直接拷贝代码,引入 vue.js

    <!DOCTYPE html>
    <html lang="en">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/dist/plugins/vue/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <a href="javascript:void(0);"
           @click="startApp('')">打开APP</a>
    
        <div>在app调试h5,请先输入调试网址</div>
        <input type="text" v-model="url">
        <a href="javascript:void(0);"
           @click="startH5(url)">调试</a>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                url: "1"
            },
            methods: {
                startApp: function (url) {
                    //alert(url)
                    window.location = "app://main?param=" + url;
                },
                startH5: function (url) {
                    //alert(url)
                    window.location = "app://h5?param=" + url;
                }
            }
        });
    
    </script>
    </body>
    </html>
    • url 我设置为传入参数,客户端接收到直接调用 webview.load(url) 加载即可

    Kotlin部分代码

    //接收唤醒
    try {
        var param = intent.data?.getQueryParameter("param")
            Log.e(TAG, "唤醒接收参数 param = $param")
            url = param
    } catch (e: Exception) {
        e.printStackTrace()
    }
    if (url != null && url.isNotEmpty()) {
        if (!url.contains("http")) {
            url = "http://" + url
        }
        progressWebView.loadUrl(url)
    } else {
        //url链接无效
        showError("链接失效了~")
    }
    展开全文
  • H5唤醒本地APP

    2020-07-30 17:54:16
    H5网页唤起APP,不管是IOS系统还是安卓系统,浏览器是通过URL scheme 来打开APP的。一个APP可以设置一个或者多个scheme用来打开自己的APP。 以下是常见的scheme: APP 微信 支付宝 淘宝 新浪微博 QQ 知乎 短信 ...
  • H5唤醒APP方法,H5唤醒不了App跳下载页 let ua = window.navigator.userAgent.toLowerCase(); let src = { iphone: /iphone/i.test(ua), android: /android/i.test(ua), windows: /windows/i.test(ua), ...
  • = 9环境下会默认打开apple-app-site-association文件universal link是ios9之后出的功能。它是通过传统HTTP链接来启动App。它其实就是一个https开头的链接,还要满足一些特定的规则才能被识别为universal link,才能...
  • ※html唤醒APP※(android版)测试 - 为了测试方便,这边都写在同一个app中 - WebActivity:假装是浏览器,浏览器也是一个app - AppActivity:假装是APP - 实际应用中WebActivity,AppActivity是两个不同APP - 如果...
  • H5 是一种跨平台、能快速传播 并且 易于迭代的web页面。通常来说,它有以下几个作用:传播效应,一般是为品牌进行宣传,让更多的人知道和了解这个品牌品牌推广,形式一般是小游戏,抽奖,或者邀请函,活动介绍等商品...
  • H5页面唤醒App(安卓+ios),由安卓APP提供scheme,host等,openUrl,universalUrl
  • H5 唤醒App

    千次阅读 2019-03-15 11:18:04
    H5 唤醒App 打开APP function GetMobelType() { var browser = { versions: function() { var u = window.navigator...
  • uniapp解决H5唤醒APP

    2021-02-26 15:42:55
    H5唤醒APP 解决H5唤醒指定APP 设置schemes - Android 打开项目manifest.json文件源码视图 在manifest.json文件的"app-plus">>“distribute”>>"android"下添加schemes节点数据 自定义字符串,不要使用...
  • 原创在https://blog.csdn.net/m0_37678565/article/details/68491444在manifest文件中最开始启动的activity中添加:android:host="host"android:pathPrefix="/pathPrefix"android:scheme="scheme" />//注意host,...
  • 以前微信浏览器内想要直接唤醒 app 要么接微信的应用宝要么你是腾讯的干儿子。而在微信在2020年5月分推出了“微信开放标签”功能wx-open-launch-app 用于微信浏览器内直接唤醒 app ,也可通过携带参数直接进入app...
  • 最近的项目中,点击按钮唤醒App的需求经常有,之前也有考虑过用通用连接的方式来解决,但代码修改来修改去,一直都觉得不完美,最后只能先暂时用下面的方式来解决,后期有更好的解决办法再去优化。下面代码的解决...
  • H5唤醒APP

    千次阅读 2019-03-26 17:40:24
    微信中H5唤醒APP 注意 安卓6.0一下不要用let声明!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • H5唤醒App如何实现

    2019-09-27 16:50:36
    一是引导已下载用户从H5页面唤醒App并直达指定场景 二是引导未下载用户从H5页面下载App,首次打开App时直达指定场景 从运营角度来看,引导已下载用户打开App,能提高用户粘性和活跃度,而用户在App内的产品体验自然...
  • 支付宝文档地址H5页面唤醒支付宝APPCreated by IntelliJ IDEA.Date: 17/1/12Time: 下午1:32To change this template use File | Settings | File Templates.--%>支付宝*,:before,:after {-webkit-tap-highlight-...
  • H5唤醒app

    2021-04-07 17:38:41
    通过app以链接形式分享,被分享者点击h5链接,跳转到相应app,携带路径和参数 技术问题 1、网页端是无法获取到手机中是否安装该app的 通用的解决方法:点击唤醒链接2秒后,自动跳转到下载页面。如果页面...
  • h5唤醒app

    千次阅读 2019-05-18 15:46:46
    最近公司有个需求要在h5页面能跳转到银行app。这也是我第一次接触这样的业务,因而一开始碰到很多的困难,还好后面也解决了。 h5页面跳转app,一般通过URL Scheme进行跳转。 1、URL Scheme是什么? 我们先看下url...

空空如也

空空如也

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

h5唤醒安卓app