Detailed introduction to the method of UniApp page jump and value transfer

In recent years, with the development of mobile Internet technology and the popularity of mobile devices, developing APPs has become a fashionable and efficient way to expand business. As a cross-platform development tool, UniApp is highly convenient and efficient in the application development process. However, we need to use some specific methods when developing page jumps and parameter transfers involved in developing UniApp applications. In this article, we will introduce in detail the method of UniApp page jump and value transfer.

1. Use URL to pass parameters

The method of page jump and value passing in UniApp is to use URL to pass parameters, which is similar to the URL passing of parameters used in general web development. We can add parameters to the URL, and then obtain these parameters through the query attribute of the component object in the page after the jump.

Suppose we have two interfaces A and B. We need to jump to page B in page A and pass some parameters to page B. We can use the following code to achieve page jump and parameter transfer:

// 在A页面中，点击按钮跳转到B页面，并传递参数
<template>
  <view>
    <button @click="navigateToB">跳转到B页面</button>
  </view>
</template>

<script>
  export default {
    methods: {
      navigateToB() {
        uni.navigateTo({
          url: '/pages/B/B?id=123&name=UniApp',
          success: function(res) {
            console.log('跳转到B页面成功')
          }
        })
      }
    }
  }
</script>

In the above code, we use the uni.navigateTo method to realize the page jump to page B, and change the parameter id and name to key-value form added to the URL. In page B, we can obtain these parameters through the this.$route.query method, as shown below:

// 在B页面中，获取A页面传递的参数
<script>
  export default {
    mounted() {
      console.log(this.$route.query)
    }
  }
</script>

In this way, we can more easily achieve page jumps and parameter passing, but it requires manual splicing of URLs, which is error-prone, and parameter passing only applies to string types.

2. Use the API provided by uni-app

In addition to using URL parameters, UniApp also provides some APIs to implement page jumps and parameter transfer. The specific implementation is as follows:

// 在A页面中，点击按钮跳转到B页面，并传递参数
<template>
  <view>
    <button @click="navigateToB">跳转到B页面</button>
  </view>
</template>

<script>
  export default {
    methods: {
      navigateToB() {
        uni.navigateTo({
          url: '/pages/B/B',
          eventChannel: {
            emit: 'acceptDataFromA',
            data: {
              id: 123,
              name: 'UniApp'
            }
          },
          success: function(res) {
            console.log('跳转到B页面成功')
          }
        })
      }
    }
  }
</script>

In the above code, we use eventChannel to implement parameter transfer between pages. When page A jumps to page B, we first create an event channel eventChannel, and then add the parameters that need to be passed to the eventChannel.data object. When the jump is successful, we pass the name acceptDataFromA and data eventChannel.data of this event channel to page B. In page B, we can receive these parameters through the following code:

// 在B页面中，接受A页面传递的参数
<script>
  export default {
    created() {
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.on('acceptDataFromA', (data) => {
        console.log(data)
      })
    }
  }
</script>

In this way, we can achieve page jumps and parameter transfer without manually splicing URLs, and support many different types of Parameter passing.

Summary

In UniApp application development, page jump and parameter passing are a relatively important link. By exploring URL parameter passing and API usage, we can find that UniApp provides a variety of methods to implement page jumps and parameter passing. Each of these methods has its own merits, and developers can choose the appropriate method according to actual needs.

It is recommended that developers actively explore and try different methods when developing UniApp applications, master page jumps and parameter transfers, and flexibly apply them to their own business scenarios. In this way, you can not only improve the development efficiency and user experience of your application, but also bring more value to yourself.

The above is the detailed content of Detailed introduction to the method of UniApp page jump and value transfer. For more information, please follow other related articles on the PHP Chinese website!