Come: ottenere e impostare gli elementi della barra di navigazione dell'app

Postato su 14. ottobre 2024 da Jan Bunk


Per alcuni siti web può essere utile modificare dinamicamente gli elementi della barra di navigazione delle app. Puoi farlo con queste funzioni JavaScript.

Utilizzare le funzioni JavaScript

Potresti voler controllare la funzione executeWhenAppReady() del nostro helper script per le app. Assicura che il tuo sito web non cerchi di interagire con l'applicazione prima che sia pronta o quando il sito web viene caricato con un normale browser (ReferenceError, function is not defined).

getNavigationBarItems

Usa questa funzione per ottenere un elenco di oggetti che rappresentano tutti gli elementi della barra di navigazione attualmente visualizzati.


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

setNavigationBarItems

Usa questa funzione per modificare gli elementi della barra di navigazione che devono essere visualizzati.


<script>
    try {
        // example for a navigation bar item object
        let newNavigationBarItem = {
            label: "Contact",
            action: {
                urlToRedirectTo: "https://webtoapp.design/contact",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: {
                name: "list"
            },
        };

        // get the currently displayed navigation bar items
        let allNavigationBarItems = (await getNavigationBarItems())["navigationBarItems"];

        // add the new navigation bar item to the list of navigation bar items
        allNavigationBarItems.push(newNavigationBarItem);

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

Modifica del Menu dell'App

Ecco un elenco di documentazione per sviluppatori correlata alla modifica dinamica del menu dell'app. Assicurati di visualizzare quella applicabile al layout della tua app.