Tabla de contenido
prefacio
Para la forma actual, los miniprogramas de WeChat son un tema candente, entonces, ¿cómo los aprendemos y dominamos y luego hacemos proyectos prácticos?
¡Por esta razón, he creado esta columna especialmente para compartirla contigo mientras estudio!
Este artículo presenta principalmente el término enlace de datos, entonces, ¿cómo definimos y usamos los datos en la página del applet?
Primero, presentemos los principios básicos del enlace de datos:
1. Definir datos en fecha
2. Usar datos en wxml
如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！
1. Definición de datos
请诸君打开微信开发者工具，接下里跟着我一步一步操作！
Declaración: La definición y el uso de nuestros datos deben diferenciarse. Por ejemplo, cada una de nuestras páginas tiene sus propios datos. Si queremos usar datos en una página específica, debemos hacerlo dentro de la página especificada.
La ubicación para definir los datos está en el archivo .js correspondiente a la página, y los datos se pueden colocar en el objeto de datos. (A continuación, el blogger eligió la página de lista anterior)
-
Abra .js, encuentre datos en él, defina un dato en él, el formato es el siguiente
Page({ /** * 页面的初始数据 */ data: { xdl: '跟着一碗黄豆酱学习微信小程序！' }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })page 组件是初始化生成的，我们只需要关注上面代码的 data ，在代码开头。结构就是 名称 ： ‘内容’
2. Datos vinculantes
我们前面已经定义了数据，那么我们如何使用呢？首先我们介绍一下一个语法 — Mustache 语法（双大括号）
2.1 Sintaxis de bigote
¿Para qué se puede usar la sintaxis de Mustache? Tres funciones principales
- Enlazar contenido dinámicamente
- Propiedades vinculadas dinámicamente
- operación ternaria
2.1.1 Contenido de vinculación dinámica
Ahora que hemos definido los datos, ¿cómo llamarlos? (enlace dinámico)
<view> {
{
需要绑定的数据名称 }} </view>
Solo necesitamos usar la sintaxis de Mustache (corchetes dobles) en .wxml para importar los datos que definimos en .js, como se muestra en el código anterior
2.1.2 Propiedades de vinculación dinámica
Cuando usamos algunos componentes, necesitamos establecer el valor del atributo correspondiente para tener un efecto.Por ejemplo, nuestro componente de imagen necesita el valor del atributo src, que nos dice la posición de nuestra imagen en el componente de imagen. Entonces, ¿cómo se unen las propiedades de nuestro Moustache?
data: {
xdl: '跟着一碗黄豆酱学习微信小程序！',
picsrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqimg.hxnews.com%2F2018%2F1114%2F1542153705958.jpg&refer=http%3A%2F%2Fqimg.hxnews.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667625105&t=96c03a127d2f0443361ae749461bb2cd'
},
El formato de los datos de definición es el mismo que el anterior. Tomamos el atributo src de la imagen como ejemplo. Creamos un picsrc y almacenamos la ruta de nuestra imagen en él. A continuación, entramos en list.wxml para realizar operaciones de vinculación de atributos.
<!--pages/list/list.wxml-->
<view> {
{
xdl }} </view>
<image src="{
{ picsrc}}"></image>
绑定方式就是将原本要填写属性值的地方改成了前面定义的数据名称而已，但是必须使用 Mustache 语法！（双括号）
Mostrar resultados:
2.1.3 Operaciones ternarias
El operador ternario es un formato fijo en la programación de software y la sintaxis es "expresión condicional? expresión1: expresión2". El uso de este algoritmo puede filtrar los datos uno por uno al llamar. A continuación, el blogger te llevará a experimentar la operación ternaria.
data: {
xdl: '跟着一碗黄豆酱学习微信小程序！',
picsrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqimg.hxnews.com%2F2018%2F1114%2F1542153705958.jpg&refer=http%3A%2F%2Fqimg.hxnews.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667625105&t=96c03a127d2f0443361ae749461bb2cd',
a: '3'
},
Primero, definimos un dato a en los datos en list.js, y su valor es 3
<!--pages/list/list.wxml-->
<view> {
{
xdl }} </view>
<image src="{
{ picsrc}}"></image>
<view> {
{
a >=1 ? 'YES' :'NO'}}</view>
Luego, en list.wxml, usamos la sintaxis de Mustache, vinculamos datos a y luego juzgamos >= 1, si a es mayor o igual a 1, mostrará SÍ, de lo contrario, mostrará NO
Mostrar resultados
2.2 Uso integral de la sintaxis de Moustache
Luego te guiaré a través de la operación.
-
Abra list.js y defina una variable aleatoria
data: { random:(Math.random()*10)+2, }, -
Abra el .wxml de la página correspondiente y use la sintaxis de Moustache para incrustar los datos para una salida de comparación aleatoria y 5
<view>{ { random >=5 ? 'a的数值真的大于等于2哟！':'a的数值小于等于2捏！'}}</view> -
Mostrar resultados
2.3 Vista de datos
Creo que todos deben tener una pregunta, es decir, ¿cómo sabemos cuál es el número aleatorio generado? A continuación, te diré cómo ver los datos.
-
Haga clic en appdata dentro del depurador
-
Ver todos nuestros datos definidos en un marco de datos
3. Operación de datos
我们前面讲的 Mustache 语法也可以进行算术运算，接下来博主带大家一起来操作一下
3.1 Límite de dígitos (toFixed)
A continuación, definimos dos conjuntos de datos, un conjunto sin dígitos y un conjunto con 3 dígitos
-
definir datos
data: { random:(Math.random()*10)+2 , random2:Math.random().toFixed(3) }, -
Observación de datos
我们可以看到设置位数的数据 random2 以及变成三位数
3.2 Operaciones aritméticas
接下里我们进行简单的算数运算展示
-
Operación aritmética usando random2 creada anteriormente (*1000)
<view>{ { random2*1000 }}</view> -
Visualización de datos
-
Mostrar resultados
Resumir
¡Todos deberían ser felices todos los días, estudiemos felices juntos!
