Home > Article > Web Front-end > UniApp implementation startup diagram and guidance diagram configuration and usage guide
UniApp Configuration and Usage Guide for Implementing Startup Diagram and Guidance Diagram
Introduction:
UniApp is a cross-platform application development framework based on Vue.js, which can be implemented on iOS simultaneously through a set of code , Android, H5 and other platforms. In the development of mobile applications, startup images and guidance images are one of the key factors to improve user experience. This article will introduce in detail how to configure and use startup diagrams and guidance diagrams in UniApp, and attach corresponding code examples.
1. Configuration startup diagram
manifest.json
file in the UniApp project root directory, edit the file, and find "app- plus"
field, configure the relevant information of the startup image in the "splashscreen"
attribute of this field. The sample code is as follows:
"app-plus": { "splashscreen": { "image": "/static/splash.png", "autoclose": true, "duration": 3000, "delay": 0, "fadeout": "fadeOut" } }
static
in the project root directory and name the startup image as splash.png
, place it in the static
folder. Note:
2. Configuration guide diagram
manifest.json
file in the UniApp project root directory, edit the file, and find "app-plus"
field, configure the related information of the boot map in the "launch_path"
attribute of this field. The sample code is as follows:
"app-plus": { "launch_path": "pages/guide/guide", "launch_showoption": { "titleNView": false, "popGesture": "none" } }
guide
in the pages
directory of UniApp, And create a file named guide.vue
under this folder as the guide image page. The sample code is as follows:
<template> <view class="guide-container"> <image class="guide-img" :src="imageList[currentIndex]"></image> <view class="guide-btn" @click="onButtonClick">进入应用</view> </view> </template> <script> export default { data() { return { currentIndex: 0, // 当前引导图的索引 imageList: [ // 引导图图片列表,可自行添加或删除 "/static/guide1.png", "/static/guide2.png", "/static/guide3.png" ] } }, methods: { onButtonClick() { // 点击“进入应用”按钮后的跳转逻辑,如跳转至首页 uni.navigateTo({ url: "/pages/index/index" }); } } } </script> <style scoped> .guide-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .guide-img { width: 100%; height: 100%; } .guide-btn { width: 200rpx; height: 80rpx; line-height: 80rpx; text-align: center; background-color: #ccc; color: #fff; margin-top: 50rpx; border-radius: 40rpx; } </style>
Note:
Summary:
Through the above steps, we can easily configure and use startup images and guide images in UniApp to improve the user experience and add a professional appearance to the application. Of course, the above code examples are for reference only, and you can adjust and optimize them according to your actual project needs.
Reference link:
The above is the detailed content of UniApp implementation startup diagram and guidance diagram configuration and usage guide. For more information, please follow other related articles on the PHP Chinese website!