Comment obtenir et définir les éléments de menu de l'application ?

Mis à jour le 14. octobre 2024 par Jan Bunk


Pour certains sites web, il peut être utile de modifier dynamiquement les éléments de menu des applications. Vous pouvez y parvenir à l'aide de ces fonctions JavaScript.

Utilisation des fonctions JavaScript

Nous vous conseillons de consulter la fonction executeWhenAppReady()dans notre script d'aide de l'application. Elle garantit que votre site web n'essaie pas d'interagir avec l'application avant qu'elle ne soit prête ou lorsque votre site web est chargé à l'aide d'un navigateur normal (Erreur de référence, la fonction n'est pas définie).

getMenuItems

Utilisez cette fonction pour obtenir une liste d'objets représentant tous les éléments de menu actuellement affichés.


<script>
    try {
        // returns a list of objects representing the menu items
        let menuItems = (await getMenuItems())["menuItems"];
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

setMenuItems

Utilisez cette fonction pour modifier les éléments de menu qui doivent être affichés.


<script>
    try {
        // example for a menu item object
        let newMenuItem = {
            name: "Contact",
            action: {
                urlToRedirectTo: "https://webtoapp.design/contact",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };

        // get the currently displayed menu items
        let allMenuItems = (await getMenuItems())["menuItems"];

        // add the new menu item to the list of menu items
        allMenuItems.push(newMenuItem);

        // display the list of menu items, including the new menu item
        await setMenuItems(allMenuItems);
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

convertElementToMenuItem

Il s'agit d'une fonction utilitaire permettant d'obtenir un objet d'élément de menu équivalent à un clic sur un certain élément, généralement un lien ou un bouton.


<a href="https://webtoapp.design/" id="my-link">My Link</a>

<script>
    let myLinkElement = document.getElementById("my-link");

    let myMenuItem = convertElementToMenuItem(myLinkElement);
    /*
        The result will look something like this:
        {
            name: "My Link",
            action: {
                urlToRedirectTo: null,
                javascriptToExecute: null,
                elementToClickSelector: "#my-link",
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };

        or (depending on the app configuration)

        {
            name: "My Link",
            action: {
                urlToRedirectTo: "https://webtoapp.design/",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };
    */
</script>
    

Modification du menu de l'application

Voici une liste de documentation pour développeurs concernant la modification dynamique du menu de l'application. Assurez-vous de consulter celle qui s'applique à la mise en page de votre application.