1. Sintaxis WXML
La sintaxis de wxml incluye principalmente: lista de vinculación de datos condición de representación referencia de plantilla de representación
1. descripción general y función de wxml
WXML (WeiXin Markup Language) es un conjunto de lenguajes de etiquetado diseñados por el marco. Combinado con componentes básicos y sistemas de eventos, la estructura de la página se puede construir y la función es similar a html.
2. Enlace de datos
Todos los datos dinámicos en WXML provienen de los datos de la página correspondiente. Utilice la sintaxis { {variable|js expresión de línea numérica única}} para analizar la salida en la página .wxml correspondiente.
Los datos comerciales necesarios para la primera representación de la página, cuando se carga la página, los datos pasarán los datos de la capa lógica a la capa de vista en forma de cadena json.
Utilice la sintaxis :
<!-- ============= vinculación de datos { {variable|expresión js de una sola línea}}========== -->
<!-- 1. Enlace de contenido del componente { {}} -->
<!-- <vista>hola</vista>
<vista>{ {str}}</vista>
<vista>{ {'Hola'}}</vista>
<vista>{ {[1,2,3]}}</vista>
<vista>{ { {id:1,nombre:"李四"} }}</vista> -->
<!-- 2. ID de atributo del componente Tenga en cuenta que no hay espacios entre comillas y llaves -->
<!-- <vista id="11">id</vista>
<view id="{ {id}}">id--variable de atributo</view> -->
<!--Pregunta: -->
<!-- <view id="{ {id}}">id-- variable de atributo</view> -->
<!-- 3. Clase de atributo de componente -->
<!-- <ver clase="caja">clase</vista>
<view class="{ {className}}">clase--escritura de variables</view> -->
<!-- 4. Estilo de atributo de componente -->
<!-- <vista estilo="margen: 40px;fondo: rojo;">estilo</vista>
<view style="margin: { {magin}}px;background: red;">escritura variable de estilo</view> -->
<!-- 5. La palabra clave del atributo del componente bool(true | false) debe anidarse en { {}} -->
<!--Uso incorrecto: <view hidden="false">hola</view> -->
<!-- <vista oculta="{ {false}}">hola</vista>
<vista oculta="{ {true}}">hola</vista> -->
<!-- 6. Expresión de operación + - * / Valor de ruta de datos de operación ternaria (objeto de matriz) -->
<!-- <vista>{ {1+1+3}}+5</vista>
<vista>{ {'hola'+'Hola'+cadena}}</vista>
<vista>{ {5>13 ? 'mayor que' : 'menor que'}}</vista>
<view class="{ {5 >23 ? className : ''}}">clase dinámica ternaria</view> -->
<!-- Nota: expresiones complejas de una sola línea, las funciones incorporadas de js no son compatibles -->
<!-- <vista>{ {Math.random()}}</vista>
<vista>{ {puntuación[1]}}</vista>
<vista>El nombre de usuario es: { {usuario.nombre}}</vista>
<view>Id: { {userInfo[0].id}}--El nombre de usuario es: { {userInfo[0].name}}</view> -->
Nota:
1. Tenga en cuenta que no debe haber espacios entre comillas y llaves
2. Si el valor del atributo es de tipo bool, tenga en cuenta que el tipo bool debe estar anidado en { {}}, si el valor es verdadero, se puede abreviar (solo escriba el nombre del atributo pero no el valor)
3. Ya sea el valor o el contenido del atributo en el componente, siempre que sea una variable, debe anidarse en { {} }
3. Representación de lista wx:for
Vincular una matriz usando la propiedad de control `wx:for` en un componente renderizará el componente repetidamente usando los datos de cada elemento de la matriz.
El nombre de la variable de subíndice del elemento actual de la matriz predeterminada se establece de forma predeterminada en "índice", y el nombre de la variable del elemento actual de la matriz se establece de forma predeterminada en "elemento".
Utilice la sintaxis:
wx:para nombre de subíndice predeterminado: nombre de valor predeterminado de índice: elemento modificar nombre de subíndice: wx:for-index modificar nombre de valor de elemento: wx:for-item
<!-- 2. Representación de listas (bucle) La sintaxis de bucle también es un atributo y un atributo de control -->
<!-- Sintaxis: wx:for Nombre de subíndice predeterminado: índice Nombre de valor predeterminado: elemento
Modificar el nombre del subíndice: wx:for-index Modificar el nombre del valor del elemento: wx:for-item -->
<!-- 2.1 Matriz de bucles[] -->
<!-- <ver wx:for="{ {puntaje}}" wx:key="*this"> -->
<ver wx:for="{ {puntaje}}" wx:key="index">
El subíndice es: { {index}}----El valor es: { {item}}
</ver>
<!-- Vuelva a escribir el nombre de subíndice predeterminado y el nombre de variable wx:for-index wx:for-item bucle anidado necesita ser reescrito -->
<ver wx:for="{ {puntuación}}" wx:for-index="i" wx:for-item="m">
El subíndice es: { {i}}----El valor es: { {m}}
</ver>
<!-- 2.2 Objeto de bucle {} vue: (valor, clave, índice) en usuario-->
<ver wx:for="{ {usuario}}">
El subíndice es: { {index}}----El valor es: { {item}}
</ver>
<!-- 2.3 Conjunto de objetos de bucle [{},{}] -->
<!--Uso incorrecto: <view wx:for="{ {userInfo}}" wx:key="{ {item.id}}"> -->
<ver wx:for="{ {userInfo}}" wx:key="id">
El subíndice es: { {index}}----El valor es: { {item.name}}
</ver>
<!-- 2.4 Tenga en cuenta que no puede haber espacios entre comillas y llaves -->
<ver wx:for="{ {[1,2,3]}} ">
El subíndice es: { {index}}--el valor es { {item}}
</ver>
<ver wx:for="{ {[1,2,3]+' '}}">
El subíndice es: { {index}}--el valor es { {item}}
</ver>
Nota:
1. Sin espacios entre comillas y llaves
wx: clave :
efecto:
Cuando los cambios de datos activan la capa de renderizado para volver a renderizar, los componentes con claves se corregirán y el marco se asegurará de que se reordenen en lugar de recrearlos para garantizar que los componentes mantengan su propio estado y mejoren la eficiencia del renderizado de listas.
Definir clave:
1. Si la lista es estática, no necesita definir la clave.
2. Cadena, que representa una determinada propiedad (formato de matriz de objeto) del elemento en la matriz del bucle For. El valor de esta propiedad debe ser la única cadena o número en la lista y no se puede cambiar dinámicamente. (la identificación de los datos).
3. La palabra clave reservada `*this` representa el elemento en sí mismo (matriz de tipo de número/cadena) en el bucle for. Esta representación requiere que el elemento en sí sea una cadena o número único.
1.
<ver
wx:for="{ {matriz}}"
wx:para-índice="i"
wx:para-elemento='m'
wx:key="*esto"
>
El subíndice es { {i}} --- el valor es { {m}}
</vista> -->
2.
<ver wx:for="{ {userInfo}}" wx:key="id">
El subíndice es { {index}} --- el valor es { {item.name}}
</ver>
Nota:
El valor de clave no necesita estar anidado en { {}}, incluso si es una variable
4. Representación condicional
En el proceso de desarrollo de subprogramas, a menudo nos encontramos con operaciones de bifurcación, que aquí llamamos representación condicional, y para implementar la representación condicional en subprogramas, usamos wx:if
Utilice la sintaxis :
wx:si wx:elif wx:si no
<vista wx:if="{ {puntuación[0] > 90}}">优秀</vista>
<view wx:elif="{ {puntuación[0] > 70}}">良好</view>
<vista wx:else="">一般</vista>
si VS oculto:
`wx:if` también es **perezoso**, si la condición es `falsa` durante el renderizado inicial, el framework no hace nada y solo comienza el renderizado parcial cuando la condición se vuelve verdadera por primera vez.
Por el contrario, 'oculto' es mucho más simple, el componente siempre se representará, simplemente controle mostrar y ocultar.
En general, `wx:if` tiene un costo de cambio más alto y `hidden` tiene un costo de renderización inicial más alto. Por lo tanto, `hidden` es mejor para situaciones en las que se requiere un cambio frecuente, y `wx:if` es mejor si es poco probable que cambien las condiciones durante el tiempo de ejecución.
<vista wx:if="{ {true}}">if-显示</vista>
<view wx:if="{ {false}}">if-do not display</view>
<view hidden="{ {false}}">oculto-显示</view>
<view hidden="{ {true}}">oculto-no mostrar</view>
usos del bloque :
El uso del bloque no se mostrará en la salida de la página principalmente para colocar el bucle (wx:for) y juzgar (wx:if) la salida de múltiples segmentos de código, no se puede usar el bloque oculto
<!-- <bloque wx:for="{ {matriz}}">
El subíndice es { {index}}----el valor es { {item}}
</bloque> -->
<ver clase="información">
<!-- El usuario ha iniciado sesión para mostrar información -->
<bloquear wx:if="{ {búfer}}">
<imagen src="../../images/0.jpg"></imagen>
<text>Li Si</text>
</bloque>
<!-- El usuario no ha iniciado sesión y se le solicita que inicie sesión -->
<button wx:else>Iniciar sesión</button>
</ver>
5. Plantilla
Similar a vue.js, los applets de WeChat también tienen una sintaxis de plantilla. WXML proporciona una plantilla (plantilla), que puede definir fragmentos de código en la plantilla y luego llamarlos en diferentes lugares. Puede mejorar la tasa de reutilización de código
Defina la plantilla:
<templatename='el nombre de la plantilla'>
Componentes de negocio...
</plantilla>
Usar plantillas:
<templateis='El nombre de la plantilla'/>
Parámetros de paso de plantilla:
data="" <templateis='El nombre de la plantilla' data="param1,"param2...." />
Utilice la sintaxis :
<!--El nombre de la plantilla de reutilización de código es data -->
<!-- 1. Uso básico -->
<!-- 1.1 Definir un nombre de fragmento de código (pequeña etiqueta de programa)-->
<!-- <nombre de la plantilla="demo1">
<ver>
<text>El nombre de usuario es: Li Si--la edad es: 20</text>
</ver>
</plantilla> -->
<!-- 1.2 Usar fragmento de código es -->
<!-- <plantilla es="demo1" />
<plantilla es="demo1" /> -->
<!-- 2.transferencia de datos-->
<!-- No hay datos en la plantilla que el usuario deba pasar. No hay estilo, y el usuario debe configurar el estilo -->
<!-- 2.1 Definir plantillas -->
<!-- <nombre de la plantilla="demo2">
<ver>
<text>El nombre de usuario es: { {name}} -- la edad es: { {age}}</text>
</ver>
</plantilla> -->
<!-- 2.2 Uso de plantillas -->
<!-- <template is="demo2" data="{ {nombre,edad}}" /> -->
<!-- 3. Formato del objeto de transferencia de datos -->
<!-- 3.1 Definir plantillas -->
<!-- <nombre de la plantilla="demo3">
<ver>
<text>El nombre de usuario es: { {user.name}} -- la edad es: { {user.age}}</text>
</ver>
</plantilla> -->
<!-- 3.2 Uso de plantillas -->
<!-- <template is="demo3" data="{ {usuario}}" /> -->
<!-- 4. Formato del objeto de transferencia de datos: {} ... -->
<!-- 4.1 Definir plantillas -->
<!-- <nombre de la plantilla="demo4">
<ver>
<text>El nombre de usuario es: { {name}} -- la edad es: { {age}}</text>
</ver>
</plantilla> -->
<!-- 4.2 Uso de plantillas -->
<!-- <template is="demo4" data="{ {...usuario}}" /> -->
<!-- 5. Objeto de matriz de formato de transferencia de datos: [{},{}...] -->
<!-- 5.1 Definir plantillas -->
<!-- <nombre de la plantilla="demo5">
<ver>
<text>El nombre de usuario es: { {name}} -- la edad es: { {age}}</text>
</ver>
</plantilla> -->
<!-- 5.2 Uso de plantillas -->
<!-- <plantilla
es="demostración5"
wx:for="{ {información de usuario}}"
wx: clave = "id"
datos="{ {...elemento}}"
/> -->
Nota:
1. La plantilla en sí no tiene datos, quien la use la pasará (datos)
2. La plantilla no tiene archivos de lógica js ni archivos de estilo wxss, y el usuario debe configurar el estilo y la lógica
6. Cita
1.importar
import importa la plantilla definida en el archivo de destino.
<!-- 1.import introduce la plantilla en el archivo de destino (archivo .wxml) -->
<!-- 1. Importar plantilla -->
<importsrc="../../temp/demo6.wxml"/>
<!-- 2. Utilice la plantilla importada -->
<templateis="demo6"data="{ {...usuario}}"/>
WXML proporciona dos métodos de referencia de archivos: importación e inclusión.
Alcance de importación: importar tiene el concepto de alcance, es decir, solo se importará la plantilla definida en el archivo de destino y la plantilla importada por el archivo de destino no se importará.
<!-- 3. El alcance de la importación no se puede utilizar como plantilla de archivo, debe ser una relación de uso directo -->
<importsrc="../../temp/demo6.wxml"/>
<!-- Plantilla `demo7` no encontrada. -->
<templateis="demo7"/>
2.incluir
include puede importar el código completo del archivo de destino excepto <template/> y el módulo wxs, que es equivalente a copiar a la ubicación de inclusión.
<!-- 1. Introduzca el fragmento de código en el archivo de destino -->
<incluyerc="../../temp/demo6.wxml"/>