【小程序】WXML模板语法

小程序API的三大分类

---

WXML语法–数据绑定

---

先把app.json中的pages中index的顺序排在list前面

使用Mustache语法

index.wxml

<view>{{info}}view>
 
1
2
3

index.js
修改Page中data内容

data: {
    info: 'hello world'
  },
1
2
3

效果：

Mustache语法的应用场景

• 绑定内容
  同上一步操作

• 绑定属性
  index.wxml

<view>{{info}}view>
<image src="{{imgSrc}}" mode="widthFix">image>
1
2
3

index.js

data: {
    info: 'hello world',
    imgSrc: 'http://www.itheima.com/images/logo.png'
  },
1
2
3
4

• 三元运算
  index.wxml

<view>{{info}}view>
<image src="{{imgSrc}}" mode="widthFix">image>
<view>{{randomNum >= 5 ?'随机数大于等于5':'随机数小于5'}}view>
1
2
3
4

index.js

data: {
    info: 'hello world',
    imgSrc: 'http://www.itheima.com/images/logo.png',
    randomNum: Math.random() * 10 //生成10以内的随机数
  },
1
2
3
4
5

• 算数运算
  index.wxml

<view>生成100以内的随机数：{{randomNum * 100}}view>
1

index.js(data中)

randomNum: Math.random().toFixed(2) //生成一个带两位小数的随机数
1

WXML语法–事件绑定

---

事件类型：

事件属性：

target和currentTarget的区别

bindtap的语法格式

index.wxml

<button type="primary" bindtap="btnTapHandler">按钮button>

1
2
3

index.js

Page({
  btnTapHandler(e){ //按钮的 tap 事件处理函数
    console.log(e)  //事件参数对象 e
  },
  
1
2
3
4
5

写入console中

setData方法给data赋新值

---

index.wxml

<button type="primary" bindtap="btnTapHandler">按钮button>
<button type="primary" bindtap="CountChange">+1button>
1
2

index.js

  data: {
    count: 0
  },
  CountChange(){
    this.setData({
      count: this.data.count + 1
    })
  },
1
2
3
4
5
6
7
8

效果：

事件传参

---

错误示例

正确

{{2}}是传递数值2，直接2是传递字符2

写法：
index.wxml中使用data-参数，传参
index.js中使用e.target.dataset接受参数

index.wxml

<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2button>
1

index.js

  btnTap2(e){
    this.setData({
      count: this.data.count + e.target.dataset.info
    })
  },
1
2
3
4
5

效果：

bindinput语法

---

作用：通过input事件来响应文本框输入事件

index.wxml

<input bindinput="inputHandler">input>
1

注意：
wx中的< input >便签是对称的，但是不会同步显示 < /input >需要自己加上,否则报错

index.js

配合e.detail.value获取文本框输入数据

  inputHandler(e){
    console.log(e.detail.value)
  },
1
2
3

效果:

输入一个打印一次：

应用-实现文本框和data之间的数据同步

---

条件渲染

---

wx:if

<view wx:if="{{type === 1}}">男view>
<view wx:elif="{{type === 2}}">女view>
<vidw wx:else>保密vidw>
1
2
3
4

Page({
  data: {
    msg: '你好',
    type: 1
  },
1
2
3
4
5

可以在AppData中修改type值

结合< block >使用wx:if

<block wx:if="{{true}}">
  <view>view1view>
  <view>view2view>
block>
1
2
3
4
5

改为false后全部隐藏

hidden

<view hidden="{{false}}">条件为true隐藏，条件为false显示view>
1

列表渲染

---

wx:for

<view wx:for="{{array}}">
  索引是：{{index}}当前是:{{item}}
view>
1
2
3

Page({
  data: {
    msg: '你好',
    type: 1,
    array:['苹果','华为','小米']
  },

1
2
3
4
5
6
7

wx:for-index和wx:for-item

<view wx:for="{{array}}" wx:for-index="idx"
 wx:for-item="it">
  索引是：{{idx}} 当前项是：{{it}}
 view>
1
2
3
4

wx:key

<view wx:for="{{userList}}" wx:key="id" >
  {{item.name}}
view>
1
2
3

• 前面没加key值的控制台发出警告

为其加上key值，警告消失