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

Postato su 4. ottobre 2025 da Jan Bunk


Per alcuni siti web può essere utile modificare dinamicamente i pulsanti nella barra dell'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).

getAppBarItems

Usa questa funzione per ottenere una lista di oggetti che rappresentano tutti gli elementi della barra dell'app attualmente visualizzati.


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

setAppBarItems

Usa questa funzione per modificare gli elementi della barra dell'app che devono essere mostrati.


<script>
    try {
        // example for an app bar item object
        let newAppBarItem = {
            action: {
                urlToRedirectTo: "https://webtoapp.design/contact",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false,
                isRateAction: false,
                isPastNotificationsAction: false,
            },
            icon: {
                name: "list"
            }
        };

        // get the currently displayed app bar items
        let allAppBarItems = (await getAppBarItems())["appBarItems"];

        // add the new app bar item to the list of app bar items
        allAppBarItems.push(newAppBarItem);

        // display the list of app bar items, including the new app bar item
        await setAppBarItems(allAppBarItems);
    }
    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.