【小程序】WXML模板语法

小程序API的三大分类

---

WXML语法–数据绑定

---

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

使用Mustache语法

index.wxml

<!--index.wxml-->
<view>{{info}}</view>
 

index.js
修改Page中data内容

data: {
    info: 'hello world'
  },

效果：

Mustache语法的应用场景

• 绑定内容
  同上一步操作

• 绑定属性
  index.wxml

<!--index.wxml-->
<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>

index.js

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

• 三元运算
  index.wxml

<!--index.wxml-->
<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>
<view>{{randomNum >= 5 ?'随机数大于等于5':'随机数小于5'}}</view>

index.js

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

• 算数运算
  index.wxml

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

index.js(data中)

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

WXML语法–事件绑定

---

事件类型：

事件属性：

target和currentTarget的区别

bindtap的语法格式

index.wxml

<!--index.wxml-->
<button type="primary" bindtap="btnTapHandler">按钮</button>

index.js

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

写入console中

setData方法给data赋新值

---

index.wxml

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

index.js

  data: {
    count: 0
  },
  CountChange(){
    this.setData({
      count: this.data.count + 1
    })
  },

效果：

事件传参

---

错误示例

正确

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

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

index.wxml

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

index.js

  btnTap2(e){
    this.setData({
      count: this.data.count + e.target.dataset.info
    })
  },

效果：

bindinput语法

---

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

index.wxml

<input bindinput="inputHandler"></input>

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

index.js

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

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

效果:

输入一个打印一次：

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

---

条件渲染

---

wx:if

<!--index.wxml-->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<vidw wx:else>保密</vidw>

Page({
  data: {
    msg: '你好',
    type: 1
  },

可以在AppData中修改type值

结合< block >使用wx:if

<!--index.wxml-->
<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

改为false后全部隐藏

hidden

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

列表渲染

---

wx:for

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

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

wx:for-index和wx:for-item

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

wx:key

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

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

为其加上key值，警告消失