H5 Launch native App summary

Long time no blog, there is a H5 to start the application of the native page needs, in the middle of some pits, see some online implementation plan, deliberately to summarize the next

One, need to determine the client's platform and whether to access in the browser

1. Client Judgment

Android and iOS systems do not work the same way when you start the app, and the Android side is open, allowing the browser app to launch the app by using the <a> tag and meta tags in the browser to get the app to open.

On the iOS side, IOS9 after the system, you can add configuration and logic code in the app development process, the system in the browser will be access to a domain name before the application of the domain to open, this is a bit flashing, closed or there are closed benefits.

So the first thing to judge on the client, is the Android system or iOS system, the Judge code is as follows

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, whether in the built-in browser

Regardless of the platform on which the client Android/ios, access on the platform has a problem, that is unable to start the client, this is for security considerations, Android this block schema protocol, unless the company is a partner to join the white list to

, the iOS system can access the app's download page for AppStore, but it often blocks AppStore's URL from being accessed. A convenient way to do this is in the browser, whether it is iOS or Android to go to the app Bao download (iOS this end will be

AppStore) page opens. The demand on my side is to prompt the user to click "..." to open with the default browser.

To determine if it is in, the code is as follows:

function isinwx () {    var agent = Window.navigator.userAgent.toLowerCase ();    Return Agent.match (/micromessenger/i) = = ' Micromessenger ';}

Second, the principle

First of all, whether it is Andorid or iOS, in the browser through JS is not able to determine whether the phone installed an app, even if the browser has permission to read the list of mobile apps, there is no fixed external API let us query. and H5 launch app is essentially through

URL scheme to open the app, an app can set one or more open their own URL scheme, the browser to access the URL scheme of an app, and then if the system installed the app, it will ask permission to open the app. It's actually a browser app.

Open another app,ios to use UIApplication's Canopenurl method to detect if URL scheme can open the corresponding app, and Android is a similar way. Of course if JS Jump URL scheme does not respond, it also means that the phone does not

Install the app.

Third, Android platform

First edit androidmanifest.xml, mainly to add a second <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 "/> <d ATA android:host= "Android"                android:scheme= "Wushang"/>      </intent-filter></activity>

For example, here Wushang is the scheme, this is the best app's unique identifier, or H5 wake up, a selection box appears, choose which app to start. And host means to start the page, in fact, this should be used Com.android.sky such a package name to replace the better.

In this case the complete URL is Wushang://android?data=sky, followed by parameter passing. In the activity you can get the parameters with the following code

public void OnCreate (Bundle savedinstancestate) {                  Uri uridata = This.getintent (). GetData ();                  String MyData = uridata.getqueryparameter ("data");            }

After that, the string interception or whatever the hell is at random.

Let's talk about front-end code, here are two things

1, the page when the refresh entered, request permission to invoke the app

This is simple, just add a meta tag to the top head of the page

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

This callout will access the link when the page is refreshed to launch the app. However, there is a problem, if it is the Safari browser of the Apple system, access to the header of this meta, will give an error, so this header can be in the back-end page rendering through the client's

The total class is added up.

2. Invoke the app by clicking the event

The simplest way is to use the a tag directly, as follows

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

However, in the actual use, it is necessary to the client's platform type and whether or not in the built-in browser to judge, so this approach is certainly not possible.

Next talk about a problem encountered during the development process, recorded. Because the tool library used on this side of the mobile is Zepto, the Click event is tap, but the most important thing to do with tap is to evoke the app

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

For specific reasons, it may be that the tap event uses a tap touch. And then grope for it, just use the Click event, or label the handler directly on the A label.

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

So the decision to encounter such problems later, the use of these two ways. The following is the actual processing function

Window.startapp = function () {     //Start App     if (PUBLICFUN.ISINWX ()) {     //in        alert ("Please open in Browser");     } else{      //non-medium        if (Publicfun.isios ()) {//ios system, go directly to itunes, can either download or open            window.location.href = "https:// Itunes.apple.com/cn/app/[name]/id[id] ";        } else{      //android System, by the way of the timer, determine whether the app is installed            var Hasapp = true, t = +;            SetTimeout (function () {  ///does not install app to jump to app treasure download, delay time set to 2 seconds              if (!hasapp) window.location.href = "/http A.app.qq.com/o/simple.jsp?pkgname=[name] ";            } , +);            var T1 = Date.now ();            Window.location.href = "Wushang://android";            SetTimeout (function () {    //t time is the start of the app launch time, if the app launches, return to the page again T2 this line of code execution, Hasapp is true. Conversely, if the app does not start it is false              var t2 = Date.now ();              Hasapp =! (!t1 | | t2-t1 < T +);            } , t);}}}  

In fact, there is a very simple way, is to jump directly to the application Bao. Whether it's on Android or iOS, and not. App Treasure's download page has two features to download and open (if it's on the iOS platform, it's connected via the App Store way)

Iv. iOS Platform

For iOS9 and above, in fact iOS9 provides a better solution ———— generic links.

This is a feature of iOS9, and if your app supports universal links, then it's easy to launch the app via a traditional HTTP link (if your app is already installed on your iOS device, no additional judgment is required, etc.), or open a webpage ( Your app is not installed on your iOS device). It might be easier to point out that before iOS9, we can usually only use scheme for the need to wake up apps from a variety of browsers, Safari, UIWebView, or Wkwebview.

The above from the online about the general link introduction, for the front-end simple point is that you access an HTTP URL, if the URL with the configuration file you submitted to the development platform to match the content of the rules, the iOS system will try to open your app, if not open, The system will relay to the link you want to access in the browser. A good property, because by this property on iOS9 we can bypass the interception to open the app.

So the click event above simply goes to the App Store, because if the app is installed, it's already in the app when the browser is accessed.

These are all things on the iOS configuration, and it's not much to write about. As for the reference, and the page orientation, in fact, it is equivalent to get the URL of the current connection in UIWebView, then the string splitting and checking, you can determine which page to go, and get the parameter value.

H5 Launch native App summary