文章目录

小程序API的三大分类
WXML语法--数据绑定
- 使用Mustache语法
- Mustache语法的应用场景
WXML语法--事件绑定
- 事件类型：
- 事件属性：
- target和currentTarget的区别
- bindtap的语法格式
setData方法给data赋新值
事件传参
bindinput语法
应用-实现文本框和data之间的数据同步
条件渲染
- wx:if
- 结合< block >使用wx:if
- hidden
列表渲染
- wx:for
- wx:for-index和wx:for-item
- wx:key

小程序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值，警告消失

【小程序】WXML模板语法相关推荐

微信小程序---WXML 模板语法(附带笔记文档)
目录学习文档 WXML模板语法-数据绑定数据绑定基本原则在data中定义页面数据 Mustache语法的格式动态绑定属性三元运算算数运算 WXML模板语法-事件绑定什么是事件小程序中常 ...
微信小程序—WXML模板语法
1.数据绑定的基本原则在页面对应的.js 文件中,把数据定义到data对象中即可: Page({data: {//字符串类型的数据info: 'init data' ,//数组类型的数据 msgL ...
微信小程序 - WXML 模板语法 - 条件渲染
1.wx:if (1)在微信小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{conditio ...
微信小程序在模板语法中使用indexOf失效问题解决办法
失效问题: 小程序的mastache语法不支持js的方法. 即在页面标签中,使用以下js方法无效: Object.keys() toString() indexOf() 解决办法-wxs: WXS(W ...
（学习笔记）微信小程序 -- WXML模板、WXSS样式、JS逻辑交互
WXML是小程序框架下的标签语言,类似于网页开发中HTML WXML 和 HTML 的区别 1)使用的标签名不同 2)属性节点不同 3) 提供了类似于Vue中的模板语法数据绑定.列表渲染.条件 ...
微信小程序----------WXML模板文件一
一.页面根元素page 每一个页面都具备一个根元素:<page></page>. 页面根元素可以在控制台的WXML选项卡中看到. 允许在wxss文件中对page根元素进行样式设 ...
微信小程序基础学习（2）- 模板与配置：WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求
1. WXML 模板语法 1.1 数据绑定 (1) 数据绑定的基本原则 ① 在 data 中定义数据 ② 在 WXML 中使用数据 (2)在 data 中定义页面的数据在页面对应的 .js 文件中, ...
微信小程序2（WXML模板语法）
WXML模板语法-数据绑定数据绑定的基本原则在data中定义数据在WXML中使用数据在data中定义数据在页面对应的.js文件中,把数据定义到data对象中即可: Page({data: { ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
小程序开发——模板与配置
一.WXML 模板语法 1.数据绑定的基本原则 ① 在 data 中定义数据 ② 在 WXML 中使用数据 2.在 data 中定义页面的数据在页面对应的 .js 文件中,把数据定义到 data 对 ...

【小程序】WXML模板语法

文章目录

小程序API的三大分类

WXML语法–数据绑定

使用Mustache语法

Mustache语法的应用场景

WXML语法–事件绑定

事件类型：

事件属性：

target和currentTarget的区别

bindtap的语法格式

setData方法给data赋新值

事件传参

bindinput语法

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

条件渲染

wx:if

结合< block >使用wx:if

hidden

列表渲染

wx:for

wx:for-index和wx:for-item

wx:key

【小程序】WXML模板语法相关推荐

最新文章

热门文章