精华内容
下载资源
问答
  • 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下载app文件方法实现思路前端示例代码java示例代码 实现思路 经测试微信发现如果下载文件是.apk文件会进行拦截,如果是别的下载文件(如:http://xxx/123.doc文件)会尝试呼起手机的默认浏览器进行下载(在...

    微信中H5下载app文件方法

    实现思路

    经测试微信发现如果下载文件是.apk文件会进行拦截,如果是别的下载文件(如:http://xxx/123.doc文件)会尝试呼起手机的默认浏览器进行下载(在个别手机会出现一个弹框让你选择浏览器)。

    在这个过程当中会向后端发起两次下载请求,微信第一次发起的请求发现是下载链接,呼起浏览器再次发送下载链接请求。

    根据上述情况,我们可以让后端同学封装一个拦截器,当请求下载链接时判断请求头的 “user-agent“ 是微信还是普通浏览器,如果是微信就放行,此时微信会以为是一个普通下载文件(如:我们在微信中的下载链接是http://xxx/123.doc)然后呼起默认浏览器,当默认浏览器会再次请求下载链接,后端拦截器再次判断请求头是否是微信,如果不是则对浏览器进行重定向(如:把http://xxx/123.doc重定向为http://xxx/123.apk)让浏览器进行下载。

    前端示例代码

    <a href="http://xxx/123.doc">下载app</a>
    

    java示例代码

    package com;
    
    import java.io.IOException;
    
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @SuppressWarnings("unchecked")
    public class DlFilter implements Filter {
        public void destroy() {
        }
    
        public void doFilter(ServletRequest req, ServletResponse res,
                FilterChain chain) throws IOException, ServletException {
            HttpServletRequest request = (HttpServletRequest) req;
            HttpServletResponse response = (HttpServletResponse) res;
            
            String url = "";
            String ua = request.getHeader("user-agent");// http头信息;
            
            if(ua.indexOf("MicroMessenger")!=-1){//从微信中过来的请求
                chain.doFilter(req, res); //继续往下走,诱发微信弹出外部浏览器选择窗口
            }else{//来自微信外部浏览器
                url = "123.apk";//或者其他可以下载到你附件的链接,.do的也可以啊
                response.sendRedirect(request.getContextPath()+url);
            }
        }
    
        /**
         * 初始化
         */
        public void init(FilterConfig fc) throws ServletException {
            
        }
    
    }
    
    

    如有不明白的可以加我微信:XCMF5210

    参考链接请点击这里

    展开全文
  • h5唤起APP原理

    2021-04-15 18:23:37
    通过scheme协议,服务器可以定制化告诉App跳转那个页面,可以通过通知栏消息定制化跳转页面,可以通过H5页面跳转页面等。 对于iOS,我们都知道苹果手机中的APP都有一个沙盒,APP就是一个信息孤岛,相互是不可以进行...

    一、URL Scheme介绍
    1、什么是 URL Scheme?URL Scheme的作用

    对于Android,Scheme是一种页面内跳转协议,是一种非常好的实现机制,通过定义自己的scheme协议,可以非常方便跳转app中的各个页面;通过scheme协议,服务器可以定制化告诉App跳转那个页面,可以通过通知栏消息定制化跳转页面,可以通过H5页面跳转页面等。

    对于iOS,我们都知道苹果手机中的APP都有一个沙盒,APP就是一个信息孤岛,相互是不可以进行通信的,但是苹果还是给出了一个可以在app之间跳转的方法:URL Scheme。iOS的APP可以注册自己的URL Scheme,URL Scheme是为方便app之间互相调用而设计的,我们可以通过系统的OpenURL来打开该app,并可以传递一些参数。

    URL Scheme必须能唯一标识一个APP,如果你设置的URL Scheme与别的APP的URL Scheme冲突时,你的APP不一定会被启动起来。因为当你的APP在安装的时候,系统里面已经注册了你的URL Scheme。一般情况下,是会调用先安装的app,但是iOS的系统app的URL Scheme肯定是最高的,所以我们定义URL Scheme的时候,尽量避开系统app已经定义过的URL Scheme。

    简单的说,URL Scheme就是一个可以让app相互之间可以跳转的协议。每个app的URL Scheme都是不一样的,如果存在一样的URL Scheme,那么系统就会响应先安装那个app的URL Scheme,因为后安装的app的URL Scheme被覆盖掉了,是不能被调用的。

    2、URL Scheme应用场景:

    客户端应用可以向操作系统注册一个 URL scheme,该 scheme 用于从浏览器或其他应用中启动本应用。通过指定的 URL 字段,可以让应用在被调起后直接打开某些特定页面,比如商品详情页、活动详情页等等。也可以执行某些指定动作,如完成支付等。也可以在应用内通过 html 页来直接调用显示 app 内的某个页面。综上URL Scheme使用场景大致分以下几种:

    (1)服务器下发跳转路径,客户端根据服务器下发跳转路径跳转相应的页面

    (2)H5页面点击锚点,根据锚点具体跳转路径APP端跳转具体的页面

    (3)APP端收到服务器端下发的PUSH通知栏消息,根据消息的点击跳转路径跳转相关页面

    (4)APP根据URL跳转到另外一个APP指定页面

    3、URL Scheme协议格式:

    客户端自定义的 URL 作为从一个应用调用另一个的基础,遵循 RFC 1808 (Relative Uniform Resource Locators) 标准。这跟我们常见的网页内容 URL 格式一样。

    一个普通的 URL 分为几个部分:scheme、host、relativePath、query。

    比如:http://www.baidu.com/s?rsv_bp=1&rsv_spt=1&wd=NSurl&inputT=2709,这个URL中,scheme 为 http,host 为www.baidu.com,relativePath 为 /s,query 为 rsv_bp=1&rsv_spt=1&wd=NSurl&inputT=2709。

    一个应用中使用的 URL 例子(该 URL 会调起车辆详情页):uumobile://mobile/carDetail?car_id=123456,其中 scheme 为 uumobile,host 为mobile,relativePath 为 /carDetail,query 为 car_id=123456。

     行为(应用的某个功能页面)    
            |
    

    scheme://[path][?query]
    | |
    应用标识 功能需要的参数
    二、H5唤起APP的解决方案
      了解了scheme我们就知道了如何唤起我们的app,并跳转到指定页面,如何注册scheme请看这篇博客:Android平台、iOS平台设置UrlSchemes,实现被第三方应用调用

    接下来我们需要做的就是在用户浏览网页时,如何能判断该用户是否安装了该应用。如果安装了该应用,就直接打开该应用;如果没有安装该应用,就下载该应用。

    基本大部分解决方案的原理都是如此:先打开scheme协议来唤起app,如果超时了(比如超时2s)那么就跳转到app下载页。

    方案原理大致如此,就是需要做一些优化,比如微信浏览器、打开了scheme唤起了app,此时也就是在document隐藏时,需要清除延时跳转下载页的定时器以防出现下载等等

    也有方案插件,这里推荐2款:

    第一款:callapp-lib,周下载700多

    第二款:web-launch-app,周下载100多

    直接按文档引用即可。

    这篇博客详细介绍了一些方案,并附开源库callapp-lib,写的很不错,可以了解下:H5唤起APP指南(附开源唤端库)

    展开全文
  • H5App唤起其他应用(Android平台)

    千次阅读 2019-12-06 16:26:49
    前期的一些设置直接用HbuildX进行,参考的链接 ...里面写的很详细,感谢作者,一步步按照配置来...被唤起App配置 在AndroidStudio里在AndroidManifest.xml配置信息进行添加 <intent-filter> <action android...

    前期的一些设置直接用HbuildX进行,参考的链接
    Android 平台 HTML5+ SDK的集成(HBuilder离线打包)
    里面写的很详细,感谢作者,一步步按照配置来就可以了

    被唤起App配置

    在AndroidStudio里在AndroidManifest.xml配置信息进行添加

    <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"></action>
                    <category android:name="android.intent.category.DEFAULT"></category>
                    <category android:name="android.intent.category.BROWSABLE"></category>
                    <data
                        android:host="host"
                        android:path="/path"
                        android:scheme="scheme">
                    </data>
                    <!--&lt;!&ndash;<a href="[scheme]://[host]/[path]?[query]">启动应用程序</a>&ndash;&gt;-->
     </intent-filter>
    

    注意这两个 调用意图要分开,否则可能创建的app不显示应用图标,其中scheme必须要有。
    被唤起的时候可以在path后面加一下自定义的参数,这些参数可以自用,下面有例子

    LayaAir里面加调起代码(我用的腊鸭开发)

    在index.html里面添加 ,这里在Android上面监听到plusready 后 设置手机常亮,这也是njs插件常用的方法

     document.addEventListener("plusready", function () {
                plus.device.setWakelock(true);
            }, false);
    

    接下来是判断被唤起app是否被安装

    var getIntentByPackageName = function (pkgname) {
        plus.android.importClass('android.content.pm.PackageManager');
        var MainActivity = plus.android.runtimeMainActivity();
        var PackageManager = MainActivity.getPackageManager();
        return plus.android.invoke(PackageManager, 'getLaunchIntentForPackage', pkgname);
     }
     var isInstalledApp = function (pkgname) {
        return getIntentByPackageName(pkgname) != null;
      }
    

    举例

    let exit = Laya.Browser.window.isInstalledApp("com.xxxxx.xxxxx")//true代表安装了应用
    alert("exit=" + exit);
    

    应用调起

    var openApp = function (url,callBack,packageName) { 
                errorCB=callBack
                identity=packageName
                plus.runtime.openURL( url, errorCB, identity ); 
            }
    

    举例

    Laya.Browser.window.openApp("scheme://host/path?name=zidingyicanshu1&zidingyicanshu2=26", () => {
                                alert("哈哈哈哈,调起失败");
                            }, "com.xxxxx.xxxxx")
                            }//?后面可以加自定义参数
    

    HBuilder 去掉启动时候的app名字和灰色界面------设置好应用的splash为自己的图片
    在这里插入图片描述
    附上参考链接
    Android平台本地(离线)打包指南 - Android Studio
    Android平台设置UrlSchemes,实现被第三方应用调用
    web-launch-app
    HTML 5+ SDK 更新日志
    官方例子

    展开全文
  • h5唤起app

    万次阅读 2016-08-21 22:01:21
    h5唤起app这种需求是常见的。在移动为王的时代,h5app导流上发挥着重要的作用。 目前我们采用的唤起方式是url scheme(iOS,Android平台都支持),只需原生APP开发时注册scheme, 那么用户点击到此类链接时,会自动...
  • 2014年的时候公司有个移动端的项目,需要在移动端浏览器点击下载按钮呼起原生app,当时依赖js在浏览器呼起原生app还是一个比较新的交互形式,当然技术的实现方案也基本没有什么可以参考的,经过一段时间的技术调研和...
  • app = navigator.appVersion; return { trident: u.indexOf( 'Trident' ) > - 1 , /*IE内核*/ presto: u.indexOf( 'Presto' ) > - 1 , /*opera内核*/ webKit: u.indexOf( 'AppleWebKit' ) > - 1 , /*...
  • js 实现呼起(打开)app

    万次阅读 2017-03-30 13:06:25
    我们知道,js是无法判断手机是否安装了某款app的,但是有时候我们会有这样的需求:点击下载app按钮,如果已经安装了这款app呼起,如果没有安装则跳转到下载页。思路: 在前端,如果想实现上述问题,首先得有个url...
  • 主要介绍了Html5如何唤起百度地图App的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信h5支付测试时,发现使用Safari iframe的方式无法呼起微信app进行支付。本文首先讲述了微信支付的流程、随后进行了两个测试与网上的搜索等进行了一系列的探索,得到了可以证实的结论。
  • 前两天接到一个无线的需求,我这个小白...  当然只是其中的一个需求,还有的是现在各类app,分享出去的H5页面中,一般都会带着一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳
  • h5页面唤起本地APP

    千次阅读 2016-10-31 14:37:57
    本来没有写博客的习惯,但是发现,记忆力现在差好多,不写下来就忘了,主要也是帮助其他人更好的实现功能。因为自己百度找了很多,...唤起APP,需要uri sheme.我们可以在程序的入口activity中加入以下代码。 intent
  • H5处理 <a href="ygmxapp://ygmx.app/openwith?name=zhangsan&age=26">启动APP</a> Android处理 1.在AndroidManifest.xml的MAIN Activity下追加以下内容(按照下面的格式来追加) <intent-...
  • 紧急需要,会搞定的私信我,有偿
  • iOS-html调起APP并传参

    千次阅读 2016-03-15 18:20:35
    前一段时间要做一个html页面调起APP应用的需求,特记下研究成果 1、在项目info.plist中添加URL Types以供html调用 2、在html中调用 支付页面</title></head><script type="text/javascript"> var
  • h5分享页面打开APP

    2019-10-06 19:29:27
    项目中 直播app分享出来的直播h5页面 点击进入按钮:已下载app 就进入app,未下载跳转到下载页面 判断是安卓还是ios var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.index...
  • 内嵌在app里的h5页面实现分享

    千次阅读 2019-07-03 17:25:12
    今天在做项目的时候, 有一个功能是内嵌在app里的h5页上有一个按钮,点击按钮要呼起微信的通讯录,进行分享,分享完成之后调后端接口记录分享次数。 如下图,呼起微信通讯录的界面是这样子: 由于微信限制,...
  • apph5 页面兼容性问题和解决方案

    千次阅读 2019-10-25 13:35:13
    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。 一、ios端兼容input光标高度 问题详情描述:input输入框光标,在...
  • 此处我是调用的选择省市区的插件,但是,当我点击时,手机自带的键盘也弹出了,这不是我想要的效果,处理方式如下: $(function(){ $("#address").focus(function(){  document.activeElement.blur();...
  • 这个h5页用的是flex布局,没有用定位一类。 body,html给的是宽高100%; 思路是首先获取浏览器可视区的高度,然后把高度赋给页面根div var hrt = document.documentElement.clientHeight; //获取当前可视区域的...
  • 大家都知道H5游戏其实是网页,但是有些APP或者微端不显示网址链接。这里给大家介绍介绍一种,利用Fiddler进行抓包,获取APP打开的网址的方法。有人说何必多此一举呢,直接用模拟器玩游戏就好了。的确,直接用没毛病...
  • H5+与BLE处理之路+uni-app

    千次阅读 2019-08-16 11:27:50
    H5+与BLE(低功耗蓝牙)连接过程,使用的是uni-app框架。分享了自己在开发过程中所遇到的一些问题和解决方法。在此分享出来供大家参考,如有不对之处,望谅解及批评指正,谢谢。
  • h5 唤起拨打电话功能

    千次阅读 2019-03-06 12:32:40
    那如何用h5来实现呢,请听以下分解: 第一步:head添加meta,添加两个属性和值name="format-detection"和content=“telephone=yes”,如: &lt;meta name="format-detection" content="...
  • 在iOS APP发起H5微信支付

    万次阅读 2018-01-11 14:42:13
    H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。 主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器...
  • app-》h5同步身份

    2016-02-18 17:24:00
    的时候,主要登陆退出功能都在APP实现,H5通过伪协议的方式,APP的界面,登陆成功之后,APP再调用相关暴露的js方法。 登陆过程详解 A.在客户端登陆,进入H5页面的过程 客户端...
  • 通过H5直接打开微信支付

    千次阅读 2019-01-17 20:59:16
    前两天通过H5集成了一款游戏,游戏中集成了微信支付。但是我们的产品对H5跳转微信充值有一定要求,我大致说明一下。 前言:直接使用[[UIApplication sharedApplication] openURL:request.URL]; 这句代码只是跳转了...
  • 移动端H5拉起手机相机 目前浏览器拉起手机相机的有两种方式MediaDevices.getUserMedia()和使用input标签 input 标签拉起相机 只要正确的配置accept和capture就可以打开手机相册,相机,麦克风 <div> <h2&...
  • 在网上看了很多,都说APP能唤起微信,手机网页实现不了。也找了很多都不能直接唤起微信。 总结出来一个可以直接唤起微信的。适应手机qq浏览器和uc浏览器。 下面上代码,把这些直接放到要转发的页面里就可以了: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 637
精华内容 254
关键字:

h5呼起app