Liaison de données pour le développement de petits programmes

Liaison de données

Les données dynamiques en WXML proviennent des données de la Page correspondante.

Liaison simple

La liaison de données utilise la syntaxe "Moustache" (doubles accolades) pour envelopper les variables et peut être utilisée sur :

Contenu

<view> {{ message }} </view>
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

ComposantAttributs(doivent être entre guillemets)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

Attributs de contrôle (doivent être entre guillemets)

<view wx:
if
="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

Mot clé (doit être entre guillemets doubles)

true : vrai de type booléen, représentant la vraie valeur.

false : false de type booléen, représentant une valeur fausse.

<checkbox checked="{{false}}"> </checkbox>

Remarque spéciale : n'écrivez pas directement check="false" Le résultat du calcul est une chaîne, qui est convertie en un type booléen pour représenter une valeur vraie.

Opération

peut effectuer des opérations simples dans {{}}. Les méthodes suivantes sont prises en charge :

Opération ternaire

<view hidden="{{flag ? true : false}}"> Hidden </view>

<.>Opérations arithmétiques

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

Le contenu en vue est

3 + 3 + d

Jugement logique

<view wx:if="{{length > 5}}"> </view>

Opérations sur les chaînes

<view>{{"hello" + name}}</view>
Page({
  data:{
    name:"MINA"
  }
})

Opérations sur le chemin des données

<view>{{
object
.
key
}} {{
array
[0]}}</view>
Page({  data: {
    object: {
      key: &#39;Hello &#39;
    },    array: [&#39;MINA&#39;]
  }
})

Combinaison

peut également être combiné directement dans Moustache pour former un nouveau

objet ou tableau

tableau

<view wx:
for
-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})

est enfin combiné en un tableau [0, 1, 2, 3, 4]

objet

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

L'objet combiné final est {for : 1, bar : 2 >

Vous pouvez également utiliser l'opérateur d'expansion

... pour développer un objet

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

L'objet combiné final est {a : 1, b: 2, c : 3, d : 4, e : 5>

Si la clé et la valeur de l'objet sont les mêmes, elle peut également être exprimée indirectement

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: &#39;my-foo&#39;,
    bar: &#39;my-bar&#39;
  }
})

finalement combinée dans L'objet is {foo: 'my-foo', bar: 'my-bar'>

Remarque : les méthodes ci-dessus peuvent être combinées à volonté, mais s'il y a des

noms de variables qui sont les de même, ces derniers couvriront les précédents, tels que

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

L'objet combiné final est {a : 5, b : 3, c : 6}

[Recommandations associées]

1.

Téléchargez le code source complet du mini programme WeChat

2

Démo du jeu du mini programme WeChat, sélectionnez différents blocs de couleur<.>3.

Démo de l'applet WeChat : transformation d'image en carrousel

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!