How does uniapp change the received data?

With the continuous development of mobile application development, many developers are also constantly exploring new technical solutions, among which uniapp is undoubtedly the most popular one at present. Although uniapp provides a lot of convenience, developers may need some additional skills for some specific needs. This article will introduce how to change the received data in uniapp.

1. Background

In uniapp, we can process data to a certain extent through wxs filters, computed properties, etc., but if we need to process the original data returned by the interface For more precise processing, you need to use $watch to monitor and respond to data.

2. Specific operations

1. Declare the data object in the vue instance and define the data structure that needs to be responded to, such as the original data returned by the interface:

<script>
export default {
  data () {
    return {
      rawData: {}
    }
  },
}
</script>

2. In the life cycle function created(), initiate a request through uni.request to obtain the target data:

<script>
export default {
  data () {
    return {
      rawData: {}
    }
  },
  created() {
    uni.request({
       url: 'https://foobar.com/getData',
        success: (res) => {
          this.rawData = res.data
        }
     })
  }
}
</script>

3. Listen to the rawData object and process the data, such as the timestamp returned by the interface Convert to a more readable time format:

<script>
export default {
  data () {
    return {
      rawData: {}
    }
  },
  created() {
    uni.request({
       url: 'https://foobar.com/getData',
        success: (res) => {
          this.rawData = res.data
        }
     })
  },
  watch: {
    rawData: {
      handler: function(val, oldVal) {
        // 时间戳转换成可读性更好的时间格式
        val.timestamp = new Date(val.timestamp).toLocaleDateString();
      },
      deep: true
    }
  }
}
</script>

3. Summary

Through the above steps, we can easily implement custom processing of the data returned by the interface and process it The final data is displayed to the user through page rendering. It should be noted that $watch is actually a "listening" process, so when writing the $watch listening function, you must pay attention to standard format issues such as variable names and indentations to avoid unexpected errors.

In the process of using uniapp to develop, when we encounter problems, we must learn to use official documents to find help. At the same time, we must also be diligent in exploring and trying new technologies to achieve maximum benefits in the shortest time and with the least code.

The above is the detailed content of How does uniapp change the received data?. For more information, please follow other related articles on the PHP Chinese website!