How does uniapp display the parameters passed by the page?

If you are developing a uniapp-based mobile application, you may encounter situations where you need to pass parameters between different pages. In this article, we will introduce how to display the parameters passed by the page in uniapp.

In uniapp, we can pass parameters to the next page in many ways. For example, you can use the routing jump API provided by uniapp to pass parameters to the next page. On the next page, we can obtain the passed parameter values ​​through the $mp.page object and bind these parameter values ​​to the components of the page to achieve the desired effect.

For example, we can jump from a list page to the details page and pass an id parameter. On the details page, query related data based on this id value and bind the data to the components of the page.

So how to implement it specifically? Next, we will introduce it in detail from the following aspects.

1. Pass parameters when routing jumps

We can use the API provided by uniapp to pass parameters to the next page when routing jumps. For example, the following code is a simple routing jump, passing the id parameter to the detail page.

uni.navigateTo({
  url: '/pages/detail/detail?id=' + this.id
})

This.id here is the id value of the current page. We splice this value into the query parameter of the detail page address.

2. Get the parameter value passed by the page

When we jump to the detail page, we need to get the parameter value passed to the detail page. This can be obtained through the options attribute in the $mp.page object. For example:

onLoad(options) {
  console.log(options.id) // 打印出传递过来的id值
}

In the onLoad function, we can get the passed id parameter value through options.id and perform subsequent operations.

Note that if we get the parameters passed in the component page, we need to get them through this.$mp.options.

3. Bind parameters to page components

After obtaining the passed parameters, we can bind these parameters to sub-components to achieve page data rendering.

In Vue, we can bind parameters to the props attribute of the component through the v-bind directive. For example, the following code:

<template>
  <div>
    <h1>{{ content.title }}</h1>
    <p>{{ content.desc }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      content: {}  // 用于存放获取到的数据
    }
  },
  created() {
    this.getContent(this.id)
  },
  methods: {
    getContent(id) {
      // 根据id获取数据，并将数据绑定到content对象上
    }
  }
}
</script>

In the above code, we define an id attribute through props, and assign the passed id parameter to the id attribute. In the created function, we call the getContent function to obtain the data asynchronously and store the data in the content object.

Finally, we bind the data in the content object to the h1 and p tags in the component, and display the data after the page is loaded.

In summary, we can pass parameters through the API provided by uniapp, obtain the passed parameter values ​​through the $mp.page object, and render the parameters onto the page by binding attributes. I hope this article can help you better understand how to display the parameters passed by the page in uniapp.

The above is the detailed content of How does uniapp display the parameters passed by the page?. For more information, please follow other related articles on the PHP Chinese website!