Jak pobrać i ustawić elementy paska nawigacji aplikacji

Opublikowano 14. października 2024 przez Jan Bunk


Dla niektórych stron internetowych może być przydatne dynamiczne modyfikowanie elementów paska nawigacji w aplikacji. Możesz to zrobić za pomocą tych funkcji JavaScript.

Korzystanie z funkcji JavaScript

Możesz sprawdzić funkcję executeWhenAppReady() w naszym pomocniczym skrypcie aplikacji. Zapewnia, że Twoja strona nie próbuje komunikować się z aplikacją zanim będzie gotowa lub gdy strona jest otwarta w zwykłej przeglądarce (ReferenceError, funkcja nie jest zdefiniowana).

getNavigationBarItems

Użyj tej funkcji, aby uzyskać listę obiektów reprezentujących wszystkie elementy paska nawigacji, które są obecnie wyświetlane.


<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

Użyj tej funkcji, aby zmodyfikować elementy paska nawigacji, które mają być wyświetlane.


<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,
                isRateAction: false,
                isPastNotificationsAction: 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>
    

Edycja menu aplikacji

Oto lista powiązanej dokumentacji deweloperskiej dotyczącej dynamicznej zmiany menu aplikacji. Upewnij się, że przeglądasz tę odpowiednią dla układu swojej aplikacji.