社区/学习指南/微信云开发学习指南

数据绑定

今天我们来了解一下数据绑定,什么是数据绑定呢?就是把 WXML 中的一些动态数据分离出来放到对应的 js 文件的 Page 的 data 里。

数据绑定这个概念其实很多学过网页开发的朋友也会比较困惑。大家可以不必执着于这个深奥的概念,而是先来动手做一下了解是一个什么效果。在潜移默化里,你会 get 到前端里一个非常了不得的技术知识哦~

把数据分离出来

我们可以在小程序的页面文件 wxml 里写这样一段代码,比如我们可以写在 home.wxml 里面,

<view>张明,您已登录,欢迎</view>

这样的场景我们经常遇到,不同的人使用一款 App 或者 H5 的时候,页面会根据不同的登录人不同的用户信息。

我们可以这样把 wxml 的代码修改成这样:

<view>{{username}},您已登录,欢迎</view>

然后再在 home.js 的 data 里面写这样一段代码,最终呈现的结果是:

	data: {
        username:"张明"`
      },

在模拟器我们看到呈现的结果和之前一样,我们可以 data 里面的”张明”修改成任何一个人的名字,前端的页面也会相应有所改变,如果通过函数的方式根据不同的用户修改 username 的值,这样不同的登录的人登录就会显示相应的用户名。

大家再回头来回顾一下 json 语法,这里的 username 是字段名称,也就是变量,冒号:后面的是值。在 wxml 文件里,只需要用双大括号{{}}把变量名包起来,就能把 data 里面的变量给渲染出来。

数据类型

通过前面的案例我们了解到 WXML 中的动态数据均来自对应 Page 的 data。 data 是小程序的页面第一次渲染使用的初始数据。小程序的页面加载时, data 将会以 JSON 字符串的形式由逻辑层传至渲染层,因此 data 中的数据必须是可以转成 JSON 的类型:字符串 String,数字 Number,布尔值 Boolean,对象 Object,数组 Array。

  • 字符串 String,用于存储和处理文本,可以结合 Excel 单元格格式里的文本格式来理解;
  • 数字 Number,这个很好理解,比如 233 这个数,它的数字格式和文本格式是有很大不同的,学 Excel 一定不会陌生;
  • 布尔值 Boolean,就是 true 和 false,虽然只有两个值,但是它代表着两种选择,两种不同的条件,两种不同的结果;
  • 对象 Object,结合之前所学,我们再来回顾一下:对象由大括号{}分隔,在大括号{}内部,对象的属性以名称和值对的形式 name : value 来定义,属性由逗号,分隔
  • 数组 Array,结合之前所学,我们再来回顾一下:数组由中括号[ ]来分割,有点类似于列表;

数据类型在编程语言里是一个非常重要的概念,大家可以先只需要知道是啥就可以,不必强行理解哦。就像我们把不同的人分为男、女、深圳人、程序员等不同类型一样,数据类型就是一种对不同类型的数据进行了一个分类而已,只是为了区分它们才有了不同的格式规范它们。

组件属性的渲染

通过数据绑定,我们还可以把 style、class 、id 等属性分离出来来控制组件的样式等信息。

使用开发者工具在 home.wxml 里输入以下内容:

<navigator id="item-{{id}}" class="{{itemclass}}" url="{{itemurl}}" >
      <image style="width: {{imagewidth}}" mode="{{imagemode}}" src="{{imagesrc}}"></image>
</navigator>

需要按照 json 的语法,把下面 data 里面的数据添加到 home.js 的 data 里面:

data: {
        id: 233,
        itemurl:"/pages/home/imgshow/imgshow",
        itemclass:"event-item",
        imagesrc: "https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
        imagemode:"widthFix",
        imagewidth:"100%",
      },

然后在模拟器里查看显示的效果,发现显示的结果上和我们之前不采用数据绑定没有什么区别,但是用数据绑定的好处是为我们以后添加大量数据以及进行编程更新打下了基础。
字符串与数字

在前面我们以前说过,数字 Number 与字符串 String 在 Excel 里是不同的,在小程序(也就是 JavaScript)里也是不同的。我们来实战了解一下,在 home.wxml 里输入以下代码:

<view>两个数字Number相加:{{love1+forever1}}</view>
<view>两个字符串String相加:{{love2+forever2}}</view>

然后把下面 data 里的数据添加到 home.js 里面:

  data: {
    love1:520,
    love2:"520",
    forever1:1314,
    forever2:"1314",
  }

在这里我们可以看到使用””双引号包住的是字符串格式,而没有使用双引号的是数字格式。

可以看到数字格式的数字相加和四则运算的加法是一致的,而字符串与字符串的相加是拼接。+ 加号在 JavaScript 里既可以扮演四则运算符的角色,也可以进行拼接,取决于数据的格式。

小任务:数字格式的 520 和字符串格式的 520,它们在页面的显示上虽然是一样的,但是字符串格式可以拼接,而数字格式的数字,则方便以后我们进行数字大小的比较。请问出身年份是应该使用数字格式,还是字符串格式?身份证号码呢?

渲染数组里的单条数据

在前面我们就已经接触过数组,比如 pages 配置项就是小程序里所有页面的一个列表。数组 Array 是值的有序集合,每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。这个索引是从 0 开始的非负整数,也就是 0,1,2,3,4,5…..

在 home.wxml 里输入以下代码:

<view>互联网快讯</view>
<view>{{newstitle[0]}}</view>

然后把下面 data 里的数据添加到 home.js 里面:

  data: {
    newstitle:[
      "瑞幸咖啡:有望在三季度达到门店运营的盈亏平衡点",
      "腾讯:广告高库存量还是会持续到下一年",
      "上汽集团云计算数据中心落户郑州,总投资20亿元",
      "京东:月收入超2万元快递小哥数量同比增长163%",
      "腾讯:《和平精英》日活跃用户已超五千万",
    ],
  }

我们发现数组的第一条数据就显示出来了,也就是说{{array[0]}}对应着数组 array 的第一项,0 就是索引的第一个位置,也就是我们可以使用数组名+中括号[ ]+索引的位置来访问数组的某一条数据。

小任务:我们已经知道 newstitle[0]显示的是第 1 条新闻的标题,那怎么显示第 5 条新闻的标题?还记得 pages 配置项的第一项就是小程序的初始页面么,你现在知道它是怎么做到的么?

渲染对象类型的数据

对象(object)是 JavaScript 语言的核心概念,也是最重要的数据类型。对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法)。

有的时候一个对象有多个属性,就拿电影来说,就有电影名称,国家,发行时间、票价、评价等等无数个属性,我们该如何把这些呈现在页面上呢?

在 home.wxml 文件里输入以下代码:

<image mode="widthFix" src="{{movie.img}}" style="width:300rpx"></image>
<view>电影名:{{movie.name}}</view>
<view>英文名:{{movie.englishname}}</view>
<view>国家:{{movie.country}}</view>
<view>发行年份:{{movie.year}}</view>
<view>简述:{{movie.desc}}</view>

在与之对应的 home.js 的 data 里,添加如下数据:

data: {
    movie: {
      name: "肖申克的救赎",
      englishname:"The Shawshank Redemption",
      country:"美国",
      year:1994,
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
      desc: "有的人的羽翼是如此光辉,即使世界上最黑暗的牢狱,也无法长久地将他围困!"
    },
  },

这样,对象 Object 类型的数据就被渲染出来啦。也就是在双大括号{{}}里,输入变量 movie+点+属性名即可,这就是对象的点表示法。

复杂的数据嵌套

对象是可以嵌套的,也就是一个对象可以作为另外一个对象的值,除了对象里套对象,数组里也可以套对象,对象里也可以套数组。把现实生活中的事物转化成错综复杂的数据,是非常重要的数据思维。

比如上面我们只列出了豆瓣排名第 1 的电影,那 top5 前五的电影呢,它就是一个列表;每一部电影的工作人员又有导演、编剧、演员,而每一部电影的演员名单又是一个列表,每个演员又有复杂的属性,比如姓名、出身年月、所获奖项(列表)…真的是子子孙孙无穷尽。当然简单的数据我们可以写在 data 里面,而如此复杂的数据就要使用到数据库啦。

比如我们把下面 data 里的数据添加到 home.js 里面:

    movies:[
      {
        name: "肖申克的救赎",
        englishname: "The Shawshank Redemption",
        country: "美国",
        year: 1994,
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
        desc: "有的人的羽翼是如此光辉,即使世界上最黑暗的牢狱,也无法长久地将他围困!",
        actor:[
          {
            name:"蒂姆·罗宾斯",
            role:"安迪·杜佛兰"
          },
          {
            name:"摩根·弗里曼",
            role:"艾利斯·波伊德·瑞德"
          },
        ]
      },
      {
        name: "霸王别姬",
        englishname: "Farewell My Concubine",
        country: "中国",
        year: 1993,
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.webp",
        desc: "风华绝代",
        actor: [
          {
            name: "张国荣",
            role: "程蝶衣"
          },
          {
            name: "张丰毅",
            role: "段小楼"
          },
        ]
      },
    ],

那我们应该如何把豆瓣电影排名第 2 的霸王别姬的主演之一的张国荣的名字给渲染到页面呢? {{movies[1].actor[0].name}}表示的是电影列表里的第 2 部电影, {{movies[1].actor[0]}}表示的是第 2 部电影里的排名第一的主演, {{movies[1].actor[0].name}}则表示的是主演的名字啦。

在 home.wxml 里输入以下代码测试看一下显示的是不是张国荣?

<view>豆瓣电影排名第2、最重要的主演演员名:</view>
<view>{{movies[1].actor[0].name}}</view>

那如何把第 2 部电影里的所有数据都渲染出来呢?

<image mode="widthFix" src="{{movies[1].img}}" style="width:300rpx"></image>
<view>电影名:{{movies[1].name}}</view>
<view>英文名:{{movies[1].englishname}}</view>
<view>发行地:{{movies[1].country}}</view>
<view>发行年份:{{movies[1].year}}</view>
<view>简述:{{movies[1].desc}}</view>

小任务:在 home.wxml 输入以下代码会是什么结果?为什么不能这样?

<view>{{movies}}</view>
<view>{{movies[1]}}</view>
<view>{{movies[1].actor}}</view>

以上我们只是输出了数组里的单条数据,或者对象嵌套的数据里的单条数据,如果是商品列表、电影列表、新闻列表这些我们应该如何渲染到页面呢?后面一节我们将会介绍列表渲染和条件渲染。

本文出自 李东bbsky