Jak pobrać i ustawić elementy menu aplikacji

Dla niektórych stron może być przydatne dynamiczne modyfikowanie pozycji menu aplikacji. Możesz to zrobić za pomocą tych funkcji JavaScript.

Korzystanie z funkcji JavaScript

getMenuItems

Użyj tej funkcji, aby pobrać listę obiektów reprezentujących wszystkie aktualnie wyświetlane pozycje menu.

<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

Użyj tej funkcji, aby zmodyfikować pozycje menu, które mają być wyświetlane.

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

To funkcja pomocnicza, która pozwala uzyskać obiekt pozycji menu odpowiadający kliknięciu danego elementu, zwykle linku lub przycisku.

<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,
                isRateAction: false,
                isPastNotificationsAction: 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,
                isRateAction: false,
                isPastNotificationsAction: false,
            },
            icon: null,
            children: []
        };
    */
</script>