Detailed introduction to how to set up the startup page in Uniapp

With the popularity of mobile Internet, more and more applications are flooding into the market. Among them, many applications have an important function, which is the startup page. As a cross-platform application development framework, Uniapp also provides the function of setting a startup page. This article will introduce you in detail how to set up the startup page in Uniapp.

1. Why you need a startup page

The startup page, as the name suggests, refers to the first page when you open the application. Different from ordinary pages, startup pages usually have the following characteristics:

1. Attract users: through exquisite pictures, animations, text and other elements, they can make users’ eyes shine and leave a deep impression. , improve user retention rate.
2. Loading resources: Application startup requires the loading of many resources, such as pictures, audio, videos, etc. The startup page can be used to assist the application in loading these resources.
3. Improve experience: The startup page can display the logo or name of the application, so that users can know which application they have opened at a glance, improving user experience.

2. How to set up the startup page in Uniapp

1. Prepare startup page materials

Before making the startup page, you need to prepare the startup page Page material. The materials include pictures, animations, text, etc. of the startup page. It is recommended to use high-definition and visually impactful materials as much as possible.

2. Set the startup page in the manifest.json file

In Uniapp, you can specify the startup page through the manifest.json file. Open the manifest.json file, find "quickapp" under the "appExtra" node, and add the "splash" node in "quickapp", as shown below:

"appExtra": {
  "quickapp": {
    "titleBar": {
      "backgroundColor": "#FFFFFF",
      "textColor": "#007aff"
    },
    "splash": "static/splash.png" //启动页图片地址
  }
}

3. Put the startup page image into the project

In the startup page image address specified in the manifest.json file, the corresponding image file needs to be placed in the corresponding folder (the "static" folder in the example).

4. Additional startup page settings

In addition to setting the startup page in the manifest.json file, Uniapp also provides other ways to set the startup page, such as through Configure the App.vue file to achieve this. I won’t go into details here.

3. Things to note when making a startup page

You need to pay attention to the following when making a startup page:

1. Size and proportion: The size of the startup page needs to be adapted For different mobile phone resolutions, it is recommended to use an aspect ratio of 9:16 or 16:9.
2. Keep it simple: The startup page usually only displays the logo or name of the application, and adding some unnecessary elements will only look bloated.
3. Display method: The display method of the startup page should be short, clear and clear, such as fade in and fade out, gradient, etc.
4. Compatibility: The startup page should consider the compatibility issues of different devices and browsers.

4. Summary

Setting up a startup page can effectively improve the user experience of the application. Uniapp also provides convenient setting tools so that developers can easily add a startup page. When setting up the startup page, you need to pay attention to factors such as the quality of the material and the display method to improve user retention.

The above is the detailed content of Detailed introduction to how to set up the startup page in Uniapp. For more information, please follow other related articles on the PHP Chinese website!