html5起动原生态AP☏P小结

2021-01-20 23:19 jianzhan

很久沒有写文章赚钱了,近期有一个H5起动APP原生态网页页面的要求,正中间遇到一些坑,看过些在网上的完成计划方案,刻意来小结下

一、必须分辨顾客端的服务平台及其是不是在手机微信访问器中浏览

1、顾客端分辨

在起动APP时,Android和IOS系统软件解决的方法不是一样的,Android这里因为对外开放,能够在访问器中通快递过<a>标识及其meta标识的方法,让访问器app获得手机上开启运用的管理权限从而起动APP。

而在IOS这里,IOS9之后的系统软件,则能够在APP开发设计全过程里加入配备和逻辑性编码撰写,系统软件在访问器将要浏览到某一网站域名前就把这一网站域名相匹配的APP开启,这一有点儿闪,封闭式還是有封闭式的益处。

因此最先要在顾客端分辨,是Android系统软件還是IOS系统软件,分辨编码以下

function isInIos(){
    var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];
    for(var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          return true;
        }
    }
    return false;
}        

2、是不是在手机微信内嵌访问器中

不管是在哪儿个服务平台的顾客端Android/IOS,在手机微信的服务平台上浏览都是有一个难题,那么就是没法起动顾客端,它是手机微信以便安全性性考虑到的限定,android这里屏蔽掉schema协议书,除非是企业是手机微信的小伙伴添加了授权管理才可以

应用,IOS系统软件能够去浏览app相匹配appstore的免费下载页,可是手机微信常常屏蔽掉appstore的这一网站地址,从而浏览不上。较为便捷的作法便是在手机微信访问器中,不管是IOS還是android都去运用宝的免费下载(IOS 这里最终会到

appstore中)网页页面开启。我这里的要求是提醒客户点一下“...”用默认设置访问器开启。

分辨是不是是在手机微信中,编码以下:

function isInWx(){
    var agent = window.navigator.userAgent.toLowerCase();
    return agent.match(/MicroMessenger/i) == 'micromessenger';
}

二、基本原理

最先不管是andorid還是IOS端,在访问器中通快递过JS全是没法分辨该手机上是不是配有某APP的,即便这一访问器有权利限载入手机上运用目录,都没有一个固定不动的对外开放API让我们开展查寻。而H5起动APP实质上是根据

URL scheme开启APP,一个APP能够设定一个或好几个开启自身的URL scheme,访问器去浏览某一个APP的URL scheme,随后若系统软件安裝有这一APP,则会恳求管理权限去开启这一APP。实际上也算作访问器app

开启另外一个app,iOS便可令其用 UIApplication 的 canOpenUrl 方式来检验URL scheme 是不是能开启相匹配的APP,而android也是相近的方法。自然假如JS自动跳转URL scheme沒有反映,也寓意着这一手机上沒有

装这一app。

三、android服务平台

最先编写AndroidManifest.xml,关键是提升第二个<intent-filter>

<activity android:name=".activity.LoadingActivity"
      android:label="${APP_NAME}"
      android:screenOrientation="portrait"
      android:theme="@style/FirstActivityTheme">
      <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.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:host="android"
                android:scheme="wushang" />
      </intent-filter>
</activity>

例如这里wushang便是scheme,这一最好app的唯一标志符,否则在H5唤起时,会出現一个挑选框,挑选起动哪个APP。而host表明起动该网页页面,实际上这一更应当用com.android.sky那样的包名来取代更强。

那样的状况详细的URL便是wushang://android?data=sky,后边是主要参数传送。在Activity中能够用以下编码获得主要参数

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

以后在开展标识符串提取還是甚么鬼的都随便啦。

接下去来谈一谈前端开发编码,这儿有二种状况

1、网页页面在更新进到时,恳求管理权限勾起APP

这一较为简易,就仅用在网页页面的顶端head里加入meta标识就可以

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

这一标明当网页页面更新即去浏览这一连接,从而起动APP。可是存有一个难题,假如是iPhone系统软件的Safari访问器得话,浏览有这一meta的头,会得出不正确提醒,因此这一头顶部能够在后端开发开展网页页面3D渲染时根据顾客端的

总类在再加去。

2、根据点一下恶性事件勾起APP

非常简单的方法自然是立即应用a标识,以下

<a href="wushang://android">open Android app</a>

可是在具体应用时,是必须对顾客端的服务平台种类也有是不是在手机微信内嵌访问器中开展分辨的,因此那样的作法毫无疑问不是行的。

接下去谈一谈在开发设计全过程中,碰到的一个难题,纪录下。由于这里手机端应用的专用工具库库是zepto,选用的点一下恶性事件是tap,可是再用tap开展解决是常常关键点许多下,才可以勾起APP

<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });
</script>

实际缘故不知道,将会是tap恶性事件选用的是轻一点碰触。随后探求了下,才用click恶性事件,或是立即在a标识上标明解决涵数就沒有这难题

<a id="go" >
    open Android app
</a>
<a href="javascript:startApp()">
   open
</a>
<script src="../res/lib/zepto.min.js"></script>
<script src="../res/lib/public.js"></script>
<script>
    $('#go').click(function () {
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });

    function startApp(){
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }
</script>

因此决策之后碰到这种难题,就用这二种方法了。下边是具体的解决涵数

 window.startApp = function(){     //起动APP
     if(publicFun.isInWx()){     //手机微信中
        alert("请在访问器中开启");
     }else{      //非手机微信中
        if(publicFun.isIos()){    //IOS系统软件,立即去itunes中,既能够免费下载还可以开启
            window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系统软件,根据定时执行器的方法,分辨是不是安裝有APP
            var hasApp = true , t = 1000;
            setTimeout(function () {  //沒有安裝APP则自动跳转至运用宝免费下载,廷时時间设定为2秒
              if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);
            var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的時间便是考虑APP起动的時间,若APP起动了,再度回到网页页面时t2这方面编码实行,hasApp即是true。相反若APP沒有起动即是false
              var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 < t + 150);
            } , t);
        }
     }
  } 

实际上有一个十分简易的方法,便是立即自动跳转运用宝。不管是在android還是IOS,及其手机微信非手机微信。运用宝的免费下载网页页面都是有免费下载和开启2个作用(假如是在IOS服务平台,它是根据联接app store的方法)

 四、IOS服务平台

对于ios9及之上的无法打开难题,具体上ios9出示了更强的处理计划方案————通用性连接。

它是iOS9发布的一项作用,假如你的运用适用Universal Links(通用性连接),那麼就可以够便捷的根据传统式的HTTP连接来起动APP(假如iOS机器设备上早已安裝了你的app,不用附加做一切分辨等),或是开启网页页面(iOS机器设备上沒有安裝你的app)。也许能够更简易点来讲明,在iOS9以前,针对从各种各样从访问器,Safari、UIWebView或是 WKWebView中唤起APP的要求,大家一般只有应用scheme。

之上来源于在网上有关通用性连接的详细介绍,针对前端开发简易点讲便是你浏览一个http的url,假如这一url含有你递交给开发设计服务平台的配备文档中配对标准的內容,ios系统软件想去试着开启你的app,假如无法打开,系统软件便会在访问器转站向你需要浏览的连接。非常好的一个特性,由于根据这一特性在ios9上大家可以绕开手机微信的阻拦进而开启app。

因此上边的点一下恶性事件,只是是去浏览app store,由于若app已安裝,在访问器浏览时,就早已去到APP中了。

这种全是IOS配备上的物品,也不多写了。对于传参,及其网页页面定项,实际上也便是非常于在UIWebView中获得当今联接的URL,随后开展标识符串分拆及其校检,就可以分辨去哪里个页,及其获得主要参数值。

到此这篇有关html5起动原生态APP小结的文章内容就详细介绍到这了,大量有关html5起动原生态APP內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!