Lesson 11 — Handling Navigation

This article is part of a series of mini app development. If you haven’t read the previous article, read it here first.

Lesson 10 — Introduction to Ant Design Mini

In this section, we are going to discuss how to switch from one page to another. i.e. Navigation. In other words, it refers to the system and user interface components that allow users to move between different screens or views within an application. Effective navigation is crucial for providing a seamless and intuitive user experience.This process allows users to explore various sections, features, or content within the mini app.

The general syntax for navigating to a new page in the mini app is by calling the my.navigateTo function:

my.navigateTo({
  url: '/pages/nextPage/nextPage',
});

In our Restaurant app, let us create a new page by following the steps outlined below:

Define the Page Structure

• Create a new folder under the pages directory and name it restaurantmenu.
• Create new files and name them restaurantmenu.axml, restaurantmenu.acss, restaurantmenu.js and restaurantmenu.json.
• Alternatively, and much easier, head over to your app.json file and add a new line…