微信小程序初探之数据绑定

Jun2812025-08-25 17:38

在微信小程序开发过程中，一般会将页面中的数据从WXML文件中分离出来，通过JS文件操作页面中的数据。那么，微信小程序为什么要将数据分离出来呢？下面我们来看一个例子。

以上是一个图片展示微信小程序，里面有大量的图片，每张图片都有一个单独的图片详情页面供用户下载。用户可以选择喜欢的图片进行查看，通过图片详情来确定是否需要下载该图片，不同的图片有不同的详情信息。

每个商品的详情页面的结构是相同的，区别是页面展示的数据不同。在实际开发中，开发者并不需要为每张图片单独编写一个详情页面，而是只编写一个页面，通过更改页面中的数据来实现不同的图片详情页面。这种开发方式是将页面中的数据分离出来，放到页面的JS文件中，通过程序控制页面中数据的展示。

下面来演示如何通过数据绑定将数据显示在页面中。首先打开pages/index/index.js文件，在data中定义一个lists数据，具体代码如下。

css 复制代码

Page({

   data: {

    lists : \[]
}

})

接下来在pages/index/index.wxml文件中编写页面结构，具体代码如下。

复制代码

<block wx:for="{{lists}}" >

      <view class="list-item"     >

        <image class="img-item"  data-src="{{item.image_src}}" src="{{item.image_src}}"></image>

     </view>

    </block>

简单数据绑定的页面效果如图所示。

页面上显示了lists变量对应的值，也就是把所有图片渲染到页面代码中{{ lists }}所在的位置，实现了从逻辑层到视图层的数据显示。