H5 instance method to start APP native page-H5 Tutorial-php.cn

I haven’t written a blog for a long time. Recently, there was a demand for H5 to start the APP native page. I encountered some pitfalls in the process. I read some online implementation plans and specially summarized them.

1. Need to judge the client Platform and whether to access it in the WeChat browser

1. Client judgment

When starting the APP, the Android and IOS systems process it differently. Since Android is open, you can In the browser, through the tag and the meta tag, the browser app obtains the permission to open the app on the phone and then starts the APP.

On the IOS side, systems after IOS9 can add configuration and logic code writing during the APP development process. The system will open the APP corresponding to this domain name before the browser is about to access a domain name. , this is a bit flashy, there are still benefits to being closed.

So first we have to judge on the client whether it is an Android system or an IOS system. The judgment 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;
}

Copy after login

2. Whether it is in the WeChat built-in browser

No matter which platform the client is Android/IOS, there is a problem when accessing it on the WeChat platform, that is, the client cannot be started. This is a limitation of WeChat for security reasons. Android blocks the schema protocol unless The company is a partner of WeChat and has joined the whitelist before it can be used

. The IOS system can access the download page of the app corresponding to the app store, but WeChat often blocks the URL of the app store, making it inaccessible. The more convenient way is to open the download page of App Store in WeChat browser whether it is IOS or Android (IOS will eventually go to

appstore). My requirement here is to prompt the user to click "..." to open it with the default browser.

To determine whether it is in WeChat, the code is as follows:

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

Copy after login

2. Principle

First of all, whether it is andorid or IOS, it is impossible to determine whether the mobile phone is equipped with an APP through JS in the browser. Even if the browser has permission to read the mobile phone application list, there is no fixed external API for us to query. . The H5 startup APP essentially opens the APP through the

URL scheme. An APP can set one or more URL schemes to open its own. The browser accesses the URL scheme of a certain APP, and then if the system is installed with this APP, it will request permission to open the APP. In fact, it can be regarded as a browser app

opening another app. iOS can use the canOpenUrl method of UIApplication to detect whether the URL scheme can open the corresponding APP, and Android is similar. Of course, if the JS jump URL scheme does not respond, it also means that the mobile phone does not have the app installed.

3. Android platform

First edit AndroidManifest.xml, mainly to add the second

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

Copy after login

For example, wushang here is scheme. This should be the unique identifier of the app. Otherwise, when H5 wakes up, a selection box will appear to select which APP to start. And host means starting the page. In fact, this should be replaced with a package name like com.android.sky.

In this case, the complete URL is wushang://android?data=sky, followed by parameter transfer. In Activity, you can use the following code to get the parameters

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

Copy after login

. Then you can do string interception or whatever.

Let’s talk about the front-end code. There are two situations here

1. When the page is refreshed and entered, request permission to call up the APP

This It's relatively simple. Just add a meta tag to the head at the top of the page.

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

Copy after login

This tag will access the link when the page refreshes, and then start the APP. But there is a problem. If it is the Safari browser of the Apple system, an error message will be given when accessing the header with this meta. Therefore, this header can be passed through the client's

summary when the backend renders the page. Classes are being added.

2. The easiest way to invoke the APP through a click event is of course to use the a tag directly, as follows

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

Copy after login

But in actual use, It is necessary to judge the client's platform type and whether it is in WeChat's built-in browser, so this approach is definitely not possible.

Next, let’s talk about a problem encountered during the development process and record it. Because the tool library used on the mobile terminal here is zepto, and the click event used is tap. However, when using tap for processing, you often need to click many times to activate the APP

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

Copy after login

Specific reasons I don’t know, maybe the tap event uses a light touch. Then after some exploration, I used the click event, or directly marked the handler function on the a tag, so there would be no such problem

<a id="go" >open Android app</a><a href="javascript:startApp()">
   open</a><script src="../res/lib/zepto.min.js?1.1.11"></script><script src="../res/lib/public.js?1.1.11"></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>

Copy after login

So I decided to use these two if I encounter this kind of problem in the future. way. The following is the actual processing function

 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系统，通过定时器的方式，判断是否安装有APPvar 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);
        }
     }
  }

Copy after login

In fact, there is a very simple way, which is to jump directly to the app. Whether on android or IOS, as well as WeChat and non-WeChat. The download page of the app treasure has two functions: downloading and opening (if it is on the IOS platform, it is by connecting to the app store)

4. IOS platform

For the problem of not being able to open in ios9 and above, ios9 actually provides a better solution——universal link.

This is a feature launched by iOS9. If your application supports Universal Links, you can easily start the APP through a traditional HTTP link (if your application is already installed on the iOS device) app (no need to make any additional judgment, etc.), or open a web page (your app is not installed on the iOS device). Perhaps it can be explained more simply. Before iOS9, for the need to wake up the APP from various browsers, Safari, UIWebView or WKWebView, we usually could only use scheme.

The above comes from the introduction of universal links on the Internet. For the front end, to put it simply, you access an http URL. If this URL contains content matching the rules in the configuration file you submitted to the development platform, the iOS system will Go try to open your app. If it cannot be opened, the system will redirect you to the link you want to visit in the browser. This is a very good attribute, because through this attribute we can bypass WeChat's interception and open the app on ios9.

So the above click event is just to access the app store, because if the app is installed, it will already be in the APP when the browser accesses it.

These are all IOS configuration things, so I won’t write more. As for parameter passing and page orientation, it is actually equivalent to obtaining the current connected URL in UIWebView, and then performing string splitting and verification to determine which page to go to and obtain parameter values.

The above is the detailed content of H5 instance method to start APP native page. For more information, please follow other related articles on the PHP Chinese website!