小程序：WXML语法（数据绑定、列表渲染、条件渲染、九九乘法表、导航条） ...

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1、数据绑定

小程序的数据绑定放弃了DOM结构，不用像html那样先获取DOM，然后再赋值给标签。小程序的数据绑定是单向的（从逻辑层(js)到UI层）

（1）简单绑定：

 data: {
      msg: 'hello!'
    }

<view>{{msg}}</view>

（2）运算

<view>{{a+b+c}}</view>

  data: {
    a: 1,
    b: 2,
    c: 3
  }

（3）数组

<view wx:for="{{[a,b,c, 1, 2, 3, 4]}}"> {{item}} </view>

  data: {
    a: 1,
    b: 2,
    c: 3
  }

（4）组件的属性

初始化颜色的值并在属性中获取该值作为属性的值：

  data: {
  num:5,
    color:"red"
  },

<view style="color:{{color}}">nihao</view>

（5）修改data属性的值的方法(不能采用传统的等号的赋值方法)

<view style="color:{{color}}">nihao</view>

<button bindtap="changecolor">点击变色</button>

  changecolor(){
this.setData({
  color:'yellow'
})
  },

data的原始color值为red，这里点击按钮的时候调用函数，将颜色修改为了yellow

  data: {
  num:5,
    color:"red"
  },

点击按钮前：

点击按钮后：

（6）数组、对象

  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA','TOM']
  },

<view>{{object.key}} {{array[1]}}</view>

对象是以属性名和属性值的形式存储，可以用属性名获取值

数组可以通过下标获取数组的相应位置的值

2、列表渲染

（1）微信小程序中的for循环

<view wx:for="{{4}}">晚上好</view>

（2）for循环遍历数组

定义数组：

  data: {
 arr:[1,2,3,4]
  }

绑定数组显示数组的数据：

<view wx:for="{{arr}}">
{{item}}------{{index}}
</view>

item：当前值

index：当前值的下标

（3）循环的优化（block标签的应用）

VIEW方式：

定义数组：

 data: {
    array: ['MINA','TOM','xiaoming']
  },

绑定数组，显示数据：

<view wx:for="{{array}}">
<view>{{item}}------{{index}}</view>
</view>

查看页面元素，有多余的view：

BLOCK方式：

<block wx:for="{{array}}">
<view>{{item}}------{{index}}</view>
</block>

查看页面元素已经没有多余的view标签了：

（4）wx：key（唯一标识符，可以提高列表渲染的效率）

<block wx:for="{{array}}" wx:key="index">
<view>{{item}}------{{index}}</view>
</block>

3、条件渲染

数据：

  data: {
  num:5
  }

对数据进行判断（符合相应的条件才去渲染）：

<view wx:if="{{num > 5}}"> num大于5 </view>
<view wx:elif="{{num < 5}}"> num小于5 </view>
<view wx:else> num等于5 </view>

结果：

4、练习（九九乘法表）

准备数据：

  data: {
    number:[1,2,3,4,5,6,7,8,9]
  },

运用循环的嵌套取出数据完成乘法表的显示：

<view wx:for="{{number}}" wx:for-item="i"  class="row"><!--外层循环i,内层循环j小于等于i-->
   <view wx:for="{{number}}" wx:for-item="j"  wx:if="{{j<=i}}" class="col">
   {{i}}*{{j}}={{i*j}}
   </view>
</view>

样式：

.row{
  display:flex;
  justify-content: flex-start;
  font-size: 8px;
  
  }
  .col{
  width: 11.1111%;
  }

测试结果：

5、练习（导航条）

（1）初始化数据：

前面的一个数组存储的是对象，作为导航栏的信息，后面的一个数组存储的是文本信息

 data: {
    t:[{
           name:"全部",
           sub:1
         },
         {
          name:"精华",
          sub:2
        },
        {
          name:"分享",
          sub:3
        },
        {
          name:"问答",
          sub:4
        },
        {
          name:"招聘",
          sub:5
        }
       ],
      arr :['《将进酒·君不见黄河之水天上来》',
            ' 君不见黄河之水天上来，奔流到海不复回',
            ' 君不见高堂明镜悲白发，朝如青丝暮成雪。',
            '人生得意须尽欢，莫使金樽空对月。',
            '天生我材必有用，千金散尽还复来。',
            '烹羊宰牛且为乐，会须一饮三百杯。',
            '岑夫子，丹丘生，将进酒，杯莫停。',
            '与君歌一曲，请君为我倾耳听。',
            '钟鼓馔玉不足贵，但愿长醉不复醒。',
            '古来圣贤皆寂寞，惟有饮者留其名。',
            '陈王昔时宴平乐，斗酒十千恣欢谑。',
            '主人何为言少钱，径须沽取对君酌。',
            '五花马，千金裘，',
            '呼儿将出换美酒，与尔同销万古愁。'
          ],
       currentIndex:1
  },

判断点击位置的函数：

  tabchange(e){
   this.setData({
    currentIndex:e.currentTarget.dataset.num
})
},

（2）界面

先通过列表渲染展示导航条的数据，通过判断当前点击的位置来显示不同的样式，如果某一处被点击了，就用tab 和current样式，否则只用tab，这里用三目运算符来处理

下面的一个view通过列表渲染完成数据的显示

<view clsss="main">
    <view class="header">
        <block wx:for="{{t}}">
        <view class="tab {{currentIndex==item.sub ? 'current':''}}" bindtap="tabchange" data-num="{{item.sub}}">{{item.name}}</view>
        </block>
    </view>
</view>


    <view wx:for="{{arr}}" class="poetry">
     {{item}}
    </view>

（3）页面样式

.tab{
  font-size: 32rpx ;
  color:#86C811 ;
}
.current{
  color:#fff;
  background-color:#86C811;
  padding:6rpx 8rpx;
}
.main{
  width:95%;
  background-color:■#fff;
  margin:40rpx auto;
  border-radius:6rpx 6rpx 0 0;
  font-size:28rpx;
}
.header{
  width:100%;
  height:120rpx;
  background-color:#F6F6F6;
  display:flex;
  align-items:center;
  justify-content:space-around;
  font-size:32rpx;
}
.poetry{
  font-size: 30rpx;
  background-color: #EDEFF0;
}