Maison >interface Web >uni-app >Comment Uniapp modifie-t-il les données reçues ?

Comment Uniapp modifie-t-il les données reçues ?

PHPz
PHPzoriginal
2023-04-20 09:10:54967parcourir

Avec le développement continu du développement d'applications mobiles, de nombreux développeurs explorent également constamment de nouvelles solutions techniques, parmi lesquelles Uniapp est sans aucun doute la plus populaire à l'heure actuelle. Bien qu'uniapp offre beaucoup de commodité, les développeurs peuvent avoir besoin de compétences supplémentaires pour certains besoins spécifiques. Cet article explique comment modifier les données reçues dans uniapp.

1. Contexte

Dans uniapp, nous pouvons traiter les données dans une certaine mesure via des filtres wxs, des propriétés calculées, etc., mais si nous devons effectuer un traitement plus détaillé sur les données d'origine renvoyées par l'interface, cette fois vous vous devez utiliser $watch pour surveiller et répondre aux données.

2. Opérations spécifiques

1. Déclarez l'objet de données dans l'instance de vue et définissez la structure de données à laquelle il faut répondre, comme les données d'origine renvoyées par l'interface :

<script>
export default {
  data () {
    return {
      rawData: {}
    }
  },
}
</script>
  1. Dans la fonction de cycle de vie créée. (), passez uni.request Lancez une requête pour obtenir les données cibles :
<script>
export default {
  data () {
    return {
      rawData: {}
    }
  },
  created() {
    uni.request({
       url: 'https://foobar.com/getData',
        success: (res) => {
          this.rawData = res.data
        }
     })
  }
}
</script>
  1. Écoutez l'objet rawData et traitez les données, par exemple en convertissant l'horodatage renvoyé par l'interface dans un format d'heure plus lisible :
<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. Résumé

Grâce à ce qui précède Dans cette étape, nous pouvons facilement mettre en œuvre un traitement personnalisé des données renvoyées par l'interface et afficher les données traitées à l'utilisateur via le rendu de la page. Il convient de noter que $watch est en fait un processus « d'écoute », donc lors de l'écriture de la fonction d'écoute $watch, vous devez faire attention aux problèmes de format standard tels que les noms de variables et les indentations pour éviter les erreurs inattendues.

Dans le processus d'utilisation d'Uniapp pour développer, lorsque nous rencontrons des problèmes, nous devons apprendre à utiliser des documents officiels pour trouver de l'aide. Dans le même temps, nous devons également faire preuve de diligence dans l’exploration et l’essai de nouvelles technologies afin d’obtenir un maximum d’avantages dans les plus brefs délais et avec le moins de code possible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn