Postat den 14. oktober 2024 av Jan Bunk
För vissa webbplatser kan det vara användbart att dynamiskt ändra apparnas navigeringsfält. Du kan uppnå detta med dessa JavaScript-funktioner.
executeWhenAppReady()
-funktionen i vårt hjälparskript för appen. Det säkerställer att din webbplats inte försöker interagera med appen innan den är redo eller när din webbplats laddas med en vanlig webbläsare (ReferenceError, funktionen är inte definierad). getNavigationBarItems
Använd den här funktionen för att få en lista med objekt som representerar alla navigeringsfält som för närvarande visas.
<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
Använd den här funktionen för att ändra de navigeringsfält som ska visas.
<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>
Här är en lista över relaterad utvecklardokumentation om att dynamiskt ändra appens meny. Se till att du tittar på den som gäller för din apps layout.