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

1. Find the 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"
  }
}

2. Create a folder named static in the project root directory and name the startup image as splash.png, place it in the static folder.

Note:

• The size of the startup image must meet the requirements of each platform, usually 750*1334 pixels. It is recommended to use high-definition images to prevent high-resolution Blurry issues occur on rate devices.
• The "autoclose" attribute indicates whether to automatically close the startup image. The default value is true.
• The "duration" attribute is the time the startup image continues to be displayed, in milliseconds, and the default is 3000 milliseconds.
• The "fadeout" attribute is the name of the startup image fade effect. The optional values ​​are "fadeOut", "fadeScale", and "none". The default is "fadeOut".

2. Configuration guide diagram

1. Find the 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"
  }
}

2. Create a folder named 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:

• The image size of the guide image is similar to the startup image and needs to be set appropriately according to the requirements of each platform size of.
• The guidance map page can be designed according to project needs, such as adding multiple guidance map pages or adding custom operations, etc.

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:

1. UniApp official documentation: https://uniapp.dcloud.io/
2. UniApp startup diagram configuration: https://uniapp.dcloud .io/collocation/manifest?id=app-plus object splashscreen attribute
3. UniApp boot image configuration: https://uniapp.dcloud.io/collocation/manifest?id=app-plus object launch path and titleNView Attributes

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!