recherche

Maison >interface Web >Tutoriel H5 >Implémentation de l'ouverture de l'application via un navigateur mobile ou du passage à la page de téléchargement

Implémentation de l'ouverture de l'application via un navigateur mobile ou du passage à la page de téléchargement

一个新手
一个新手original
2018-05-28 17:47:2918865parcourir

Ouvrez l'application via le navigateur mobile ou accédez à la page de téléchargement

Ce qui suit ne montre que les exemples et les codes clés les plus simples
En raison de conditions matérielles limitées, seule la situation sur Android a été testée

Ajouter des schémas

Il existe un fichier manifest.json sous le projet d'application mobile créé par HBuilder, ajoutez-y des schémas et définissez les valeurs dans les schémas à ce que vous voulez.
Implémentation de l'ouverture de l'application via un navigateur mobile ou du passage à la page de téléchargement

Paramètres de la page Web

À l'heure actuelle, vous avez besoin d'un système Web simple capable de fournir une page Web simple pour l'accès au navigateur mobile.
Tous ceux qui ont utilisé Java le savent, donc je ne vous le dirai pas. 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8" />
<title>文档标题</title>
</head>
<body>
    <p style="font-size: 68px;">
        <a href="javascript:open_or_download_app();">打开APP</a>
        <span id="device"></span>
    </p>
    <script type="text/javascript">
    //<![CDATA[
    function open_or_download_app() {
        var device = document.getElementById("device");
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
            device.innerHTML = "ios设备";
            // 判断useragent，当前设备为ios设备
            var loadDateTime = new Date();
        　　// 设置时间阈值，在规定时间里面没有打开对应App的话，直接去App store进行下载。
            window.setTimeout(function() {
                var timeOutDateTime = new Date();
                if (timeOutDateTime - loadDateTime <2200) {
                    window.location = "xxxxxxxx";  // APP下载地址
                } else {
                    window.close();
                }
            },2000);
             window.location = "apptest://apptest";　　//ios端URL Schema
        } else if (navigator.userAgent.match(/android/i)) {
            device.innerHTML = "Android设备";
            // 判断useragent，当前设备为Android设备
            // 判断useragent，当前设备为ios设备
            var loadDateTime = new Date();
        　　// 设置时间阈值，在规定时间里面没有打开对应App的话，直接去App store进行下载。
            window.setTimeout(function() {
                var timeOutDateTime = new Date();
                if (timeOutDateTime - loadDateTime < 2200) {
                    window.location = "xxxxxxxx";   // APP下载地址
                } else {
                    window.close();
                }
            },2000);
        　    window.location = "apptest://apptest";　　// Android端URL Schema 
        } 
    } 
    //]]>
    </script>
    </body>
    </html>

Le schéma d'URL d'Android est accessible en écrivant « Schéma que vous avez défini :// Schéma que vous avez défini ». IOS est différent de cela. Veuillez vous référer à Baidu pour une explication détaillée du schéma d'URL, et vous aurez une compréhension plus approfondie.
Selon la référence, même si l'application est ouverte en arrière-plan, JS s'exécutera toujours pendant un certain temps, environ 600 à 1 000 millisecondes, donc au moins le calendrier doit être réglé sur plus d'une seconde, ce qui est plus garanti. 

window.setTimeout(function() {},2000);  // 需要设置大一点，才有效果，否则会始终执行

Ensuite, vous pouvez empaqueter l'application et l'installer sur votre téléphone pour la tester. Vous pouvez également supprimer l'application et comparer les deux résultats.

IOS sera ajouté si nécessaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Java json JS android ios
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction aux styles de base BootStrapArticle suivant：Introduction aux styles de base BootStrap

Articles Liés

Voir plus