太长时间没来博客园，原因很简单啊——太懒了！罪过罪过~

最近公司的APP项目开始运行，采用的是原生框架+内嵌H5页面。作为一个菜鸡前端，开始入手学习移动端的界面制作加载性能优化。由于公司开始推广软件，加大引流量，运营部开发了软件短信提醒功能，其中需要在短信内放置软件的短链接，简单常见的一个小功能，而我要做的是提供一个短连接就可以了。

分析了一下功能需求：.当用户通过短信内部点击短链接时，会自动唤起我们的APP。

需要考虑：1.判断用户的设备类型。2.判断用户是否已经安装了此软件，安装了直接唤起，未安装安卓跳转到应用宝对应的下载页面，苹果跳转到APPStroe的下载页面。

参考网上文档，首先写了一个demo来实现判断设备类型，并跳转到相关下载页。

具体如下：

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>APP下载页面</title>
 </head>
 <body>
 <script type="text/javascript">

        // 获取终端的相关信息

        var Terminal = {

            // 辨别移动终端类型

            platform : function(){

                var u = navigator.userAgent, app = navigator.appVersion;

                return {

                    // android终端或者uc浏览器

                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,

                    // 是否为iPhone或者QQHD浏览器

                    iPhone: u.indexOf('iPhone') > -1 ,

                    // 是否iPad

                    iPad: u.indexOf('iPad') > -1

                };

            }(),

            // 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...

            language : (navigator.browserLanguage || navigator.language).toLowerCase()

        }

        // 根据不同的终端，跳转到不同的地址

        var theUrl;

        if(Terminal.platform.android){

            theUrl = '应用宝对应的下载地址';

        }else if(Terminal.platform.iPhone){

            theUrl = 'APPStroe对应的软件下载页面';

        }else if(Terminal.platform.iPad){

            theUrl = 'APPStroe对应的软件下载页面';
        };
       location.href = theUrl;
    </script
</body> 
</html>

之把该页面放到服务器上，生成链接地址即可。此时的效果已经实现了一半，即点击链接会根据设备类型自动跳转下载页面。

接下来我们将功能进一步的完善一下：点击短链接会先判断是否已经安装，未安装在执行以上步骤。

我们采用的唤起方式是url scheme(iOS，Android平台都支持)，Android和iOS 开发人员开发时可以实现在安装这款app到手机时，同时在手机上注册一个这个URL。只需原生APP开发时注册scheme， 那么用户点击到此类链接时，会自动跳到APP。

iframe方案的唤起原理是: 程序切换到后台时，计时器会被推迟。如果app被唤醒那么网页必然就进入了后台，如果用户从app切回来，那么时间一般会超过2s;若app没有被唤起，那么网页不会进入后台，setTimeout基本准时触发，那么时间不会超过2s。

具体实现代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="btn">

            <a onclick="submitFn"><button>打开app</button></a>

        </div>

        <script type=" text/javascript ">

            function submitFn() {

                //判断浏览器

                var u = navigator.userAgent;

                if(/MicroMessenger/gi.test(u)) {

                        // 引导用户在浏览器中打开

                        alert('请在浏览器中打开');

                        return;

                    }

                    var d = new Date();

                    var t0 = d.getTime();

                    if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {

                        //Android 向安卓同事索要链接

                        if(openApp('en://startapp')) {

                            openApp('en://startapp');

                        } else {

                            //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验

                            var delay = setInterval(function() {

                                var d = new Date();

                                var t1 = d.getTime();

                                if(t1 - t0 < 3000 && t1 - t0 > 2000) {

                                    alert('检测到未安装，请下载APP');

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

                                }

                                if(t1 - t0 >= 3000) {

                                    clearInterval(delay);

                                }

                            }, 1000);

                        }

                    } else if(u.indexOf('iPhone') > -1) {

                        //IOS  向IOS同事索要

                        if(openApp('ios--scheme')) {

                            openApp('ios--scheme');

                        } else {

                            var delay = setInterval(function() {

                                var d = new Date();

                                var t1 = d.getTime();

                                if(t1 - t0 < 3000 && t1 - t0 > 2000) {

                                    alert('检测到未安装，请下载APP');

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

                                }

                                if(t1 - t0 >= 3000) {

                                    clearInterval(delay);

                                }

                            }, 1000);

                        }

                    }

                };

                function openApp(src) {

                    // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为

                    // 否则打开a标签的href链接

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

                    ifr.src = src;

                    ifr.style.display = 'none';

                    document.body.appendChild(ifr);

                    window.setTimeout(function() {

                        document.body.removeChild(ifr);

                    }, 2000);

                }

        </script>

    </body>

</html>

然后再将页面放到服务器上面生成地址，之后百度一下，生成短链接就可以丢给运营部了~不过别忘了多机型多浏览器测试一下效果哦！

【H5-移动端开发】外部唤起本机APP的解决方法的更多相关文章

  1. Android开发华为手机无法看log日志解决方法

    Android开发华为手机无法看log日志解决方法 上班的时候,由于开发工具由Eclipse改成Android Studio后,原本的华为手机突然无法查看崩溃日志了,大家都知道,若是无法查看日志要它毛 ...

  2. 记一次SpringBoot 开发中所遇到的坑和解决方法

    记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型出现空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Inte ...

  3. Android开发环境搭建时遇到问题的解决方法

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/linux_loajie/article/details/33823637 Android开发环境搭建 ...

  4. linux mint 18.3设置分辨率死机问题的解决方法

    linux mint 18.3由高分辨率设置为低分辨率的时候,会出现死机现象. 解决方法是:使用命令行: xrandr 查询所有支持的分辨率 然后通过 xrandr -s 1920x1080_59.9 ...

  5. H5移动端开发入门知识以及CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  6. H5移动端开发

    开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...

  7. 关于iChartjs在移动端提示框tip显示不正常的解决方法

    最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...

  8. HTML5外包注意事项-开发HTML5游戏的九大坑与解决方法剖析

    随着移动社区兴起,势必带动HTML5的革命.未来一两年内,HTML5移动游戏必将呈现大爆发趋势. 以下是整理的HTML5游戏研发.市场趋势以及渠道布局和技术解决方案的内容.希望大家能从本文中找到对HT ...

  9. 前端webview开发中遇到的一些问题及其解决方法

    最近做了一个webview中的兑换页面,本来以为很简单,想不到遇到了远远超出预期数量的BUG,记下来,以备后患. 1 inline-block元素折行 BUG描述:现在我有三个DIV,要在一列等宽排列 ...

随机推荐

  1. vuex2中使用mapMutations/mapActions报错解决方法 BabelLoaderError: SyntaxError: Unexpected token

    在尝鲜vuex2时,发现vuex2增加了 mapGetters 和 mapActions 的方法,借助stage2的 Object Rest Operator 特性,可以写出下面代码:methods: ...

  2. MYSQL数据库学习十二 使用MySQL运算符

    12.1 算术运算符 + - * /(DIV) %(MOD) 12.2 比较运算符 > < = <=> != <> >= <= BETWEEN AND ...

  3. poj-1012-约瑟夫问题

    Description The Joseph's problem is notoriously known. For those who are not familiar with the origi ...

  4. Algorithm --> 最长回文子串

    1.中心扩展 中心扩展就是把给定的字符串的每一个字母当做中心,向两边扩展,这样来找最长的子回文串.算法复杂度为O(N^2). 但是要考虑两种情况: 1.像aba,这样长度为奇数. 2.想abba,这样 ...

  5. lua循环，减少不必要的循环

    lua中for循环的理解 for i=1, 10 do i = i+3 cclog("i=======%d",i) end 输出:4,5,6,7,8,9,10,11,12,13 相 ...

  6. React demo：express、react-redux、react-router、react-roter-redux、redux-thunk（一）

    近期终于把之前留下的坑填上了(说了好久的要网站重写,总算是写完了),不过最后的在线添加文章,功能虽然做了,后台没把接口加上,实在是没精力去折腾了,公司又有事要忙,现在把从0开始到完成的一个思路来写一下 ...

  7. 多目标跟踪(MOT)论文随笔-SIMPLE ONLINE AND REALTIME TRACKING WITH A DEEP ASSOCIATION METRIC (Deep SORT)

    网上已有很多关于MOT的文章,此系列仅为个人阅读随笔,便于初学者的共同成长.若希望详细了解,建议阅读原文. 本文是tracking by detection 方法进行多目标跟踪的文章,在SORT的基础 ...

  8. 关于C语言的第0次作业

    1.你认为大学的学习生活.同学关系.师生关系应该是怎样的?请一个个展开描述. 我认为的大学学习生活是充实的,丰富多彩的,与高中快节奏.繁忙的生活有所不同.在上了大学我们都成熟了很多,懂得了包容与忍让, ...

  9. 201621123050 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread 1.1 BallR ...

  10. 团队作业7——第二次项目冲刺（Beta版本12.04）

    1.当天站立式会议照片 本次会议内容:1:每个人汇报自己完成的工作.2:组长分配各自要完成的任务. 2.每个人的工作 黄进勇:项目整合,后台代码. 李勇:前台界面优化. 何忠鹏:数据库模块. 郑希彬: ...