【微信小程序】框架wxml(一)wxml数据绑定

今天系统的记录一下wxml的数据绑定功能。

首先给出要用到的wxss样式文件

/* pages/wxml/wxml.wxss */
.wxml-container{
  padding: 0 20rpx ;
  align-items: center;
}

.topic-group{
  background: pink;
  width: 100%;
  text-align: center;
  margin-top: 40rpx;
}

#text1{
  margin-top: 0;
}

text{
  width: 100%;
  text-align: center;
}

.topic-item{
  font-size: 40rpx;
}



1.简单绑定,用双花括号引用变量

  简单绑定
  {{message}}
  {{messageNew.time}}


并在js的data中赋值↓,如message中可以直接引用,time在messageNew中赋值,引用时用.间隔,messageNew.time为数据路径。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: "简单绑定的字符串",
    messageNew:{
      time:"2017-10-17"
    },  
  }
})


效果图↓




2.用工具查看属性,将view的id值赋为item-{{id}}

  组件属性
  通过工具查看属性

在js对id进行赋值

id: 1,


查看属性↓,点击Wxml工具,将鼠标移到左侧view上并点击,对应属性内容标蓝,可以看到,该view的id值为item-1。

【微信小程序】框架wxml(一)wxml数据绑定_第1张图片



3.控制属性

 控制属性
  切换condition(Click on me)
  condition为true会显示


js中我们首先将condition赋值true,并在js中实现方法

switchCondition: function () {
    var condition = this.data.condition;
    this.setData({
      condition: !condition
    })
  }


看下效果图,每次点击“切换condition”条目,condition值都取反,影响view的展示↓





4.三元运算

三元运算
  


①我们在js中将flag赋值为5,显示如下↓(因为flag不为1,因此hidden为false,即不隐藏)



②在js中将flag赋值为1,显示如下↓(flag==1,hidden值为true,view被隐藏)





5.算数运算

算数运算
  {{a+b}}+{{c}}+d
  {{a+b+c}}+{{d}}


同样在js的data中进行赋值↓

    a: 1,
    b: 2,
    c: 3,
    d: 4,


效果图如下,花括号包裹的部分可以进行运算,不同花括号之间的数据无法进行运算



6.逻辑运算

逻辑判断
  length={{length}}
  arr.length={{arr.length}}

在js赋值

    length:4.5,
    arr:[1,2,3,4,5,6],
效果图如下 ↓ length=4.5 不满足大于5的条件 ,因此第一个view不可见;arr.length=6满足大于5的条件,因此第二个view可见,展示arr.length=6.



7.字符串运算

  字符串运算
  {{"hello "+name}}
  hello {{name}}
在js中对name进行赋值↓

name:"Crab",
效果图,可以看到两种表达方式的结果一致





8.数据路径计算

  数据路径运算
  {{buff.age}}+{{cow[0]}}+{{cow[1]}}
在js的data中加入如下赋值数据↓

    buff:{
      age:13
    },
    cow:["Emily","Lisa"],
查看结果 (数组中数据用 “数组名[索引]” 方式访问,JSON格式用.分隔路径不同级)




9.数组组合

  数组组合
  {{item}}
在js中赋值

zero:0,
查看结果,可以看到数组中的zero被js中的值替换。

【微信小程序】框架wxml(一)wxml数据绑定_第2张图片
接下来,我们将wxml数组中的zero用引号标注

  数组组合
  {{item}}
查看新的结果,可以看到,数组的首个元素直接为 ‘zero’

【微信小程序】框架wxml(一)wxml数据绑定_第3张图片


10.使用对象

  

  使用对象
  

自定义一个template,将其命名(须符合命名规范)。在“templateA”中,包含两个text,其引用值分别为templateA1和templateA2,使用该templateA时需要将两个参数赋值。在该demo中,templateA1在wxml在template中赋值为“Amarni405”,templateA2在js中进行赋值

templateA2:"dior999",
查看结果




11.对象展开

  

  对象展开
  
js中数据赋值如下↓,进行数据展开时,变量名需一一对应(obj1中不含变量Ba,因此需对Ba进行Ba:obj1.a操作,当然也可以将其他值赋给Ba)

    obj1:{
      a:700,
      Bb:800,
      Bc:900
    },
    obj2:{
      Bd:1000
    },
    Bd:888,

查看结果↓

【微信小程序】框架wxml(一)wxml数据绑定_第4张图片


注意:同样的变量名,会发生覆盖,修改wxml代码↓,新增小红框部分代码


可以看到Bd值发生了变化↓

【微信小程序】框架wxml(一)wxml数据绑定_第5张图片




12.其他注意事项  花括号与引号之间存在空格,结果发生变化

  
    {{item}}
  

  
    {{item}}
  
每一个view中都存在5个元素 “1” “,” “2” “,”和“3”(数组元素之间填充逗号)
【微信小程序】框架wxml(一)wxml数据绑定_第6张图片


13.附上完整的wxml文件



  简单绑定
  {{message}}
  {{messageNew.time}}

  组件属性
  通过工具查看属性

  控制属性
  切换condition(Click on me)
  condition为true会显示

  三元运算
  

  算数运算
  {{a+b}}+{{c}}+d
  {{a+b+c}}+{{d}}

  逻辑判断
  length={{length}}
  arr.length={{arr.length}}

  字符串运算
  {{"hello "+name}}
  hello {{name}}

  数据路径运算
  {{buff.age}}+{{cow[0]}}+{{cow[1]}}

  数组组合
  {{item}}

  

  

  使用对象
  

  对象展开
  

  条件判断
  true
  flase

  
    {{item}}
  

  
    {{item}}
  


完整的js代码

// pages/wxml/wxml.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: "简单绑定的字符串",
    messageNew:{
      time:"2017-10-17"
    },
    id: 1,
    condition: true,
    flag: 5,
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    length:4.5,
    arr:[1,2,3,4,5,6],
    name:"Crab",
    buff:{
      age:13
    },
    cow:["Emily","Lisa"],
    zero:0,
    templateA2:"dior999",
    obj1:{
      a:700,
      Bb:800,
      Bc:900
    },
    obj2:{
      Bd:1000
    },
    Bd:888,
    lipsticks:["YSL13","Dior999","Armani405"],
    lipsticks2:[
      {
        name:"YSL13",
        price:320
      }, {
        name: "Dior999",
        price: 300
      }, {
        name: "Armani405",
        price: 320
      },
    ]
  },
  switchCondition: function () {
    var condition = this.data.condition;
    this.setData({
      condition: !condition
    })
  }
})




今天就记录到这里,夜晚愉快。

你可能感兴趣的:(微信小程序开发)