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
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).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>