微信小程序的数据绑定--从Data传输到view

本文详细介绍了微信小程序中数据从JS文件传输到WXML页面显示的过程,包括数据来源规则及常用绑定方式,如单个常量绑定和数组绑定,帮助开发者理解页面变量获取和展示的机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、说明

这个讨论的是纯前端的数据传输,指的是从js文件的Data中获取数据,并在view页面显示的过程。微信小程序官方文档已经有很好的说明,比较全面。这里只是归类一下常用的方法,看起来会简单一些。

二、规则

WXML 中的动态数据均来自对应 Page 的 data。

这句话很重要,它告诉开发者,如何让一个页面访问到任何一个page的变量。

  1. 前端页面只从Page中的data中获取数据。微信小程序的目录结构是固定的,每个wxml的数据一定来自于同目录的.js文件Page的data。
  2. app.js是全局的,它里面的data也是全局变量,所有的页面都可以getApp实例后,获取到app.data数据。
  3. 不同page之间的数据时相互独立的,他们之间数据交互需要通过,app的全局data来中转。
    在这里插入图片描述

三、常用绑定方式

一下都基于同一个目录下的js数据传输到wxml并显示。不考虑不同页面之间数据传输。
读者一定要属性json数据格式,否则定义data数据复杂事会看不清楚数据的结构。
简单易懂的json教程: http://www.w3school.com.cn/json/index.asp

3.1单个常量绑定

定义一个变量,前端直接显示这个变量。

Page({
  data: {
    msg:'Hello World'
  }
})
<view>{{msg}}</view>

在这里插入图片描述

3.2 数组绑定

数组的特点是一个数据包含多个元素,关注点在于如何控制每个元素的获取和页面显示。

wx:for={{array}} 属性控制标签,我们后台传过来的数组绑定到了view这个标签上。这个view内部的模块会被重复渲染,渲染的次数等于array的元素个数。

index 和item 是固定的,不是自定义的。分别代表如下含义:

  • index 代表了每个元素下表
  • item 代表了每个元素的内容
Page({
  data: {
    blklist: ['张三','李四','王五','李磊']
  }
})
<view wx:for='{{blklist}}'>{{index}}、{{item}}</view>

页面渲染的结果如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值