WXML语法

WXML语法

  • 1.数据绑定
  • 2.条件和列表渲染
  • 3.模板
  • 4.事件绑定
    • 4.1 事件分类
    • 4.2 事件绑定方式
    • 4.3 参数传递
  • 5.WXS语法

1.数据绑定

  • 将数据仓库data中的数据绑定显示在页面中。
  • 语法:{{ 变量 }},称为“Mustache”语法,也称为插值表达式
  • 作用:用于在页面中插入值,进行数据的绑定显示,且当值发生变化时页面会重新渲染加载,称为响应式特性,即数据状态同步。

wxml示例代码:

<!--数据绑定
-->
<view class="title">数据绑定</view>
<view>{{ name }}</view>
<!-- 可以为属性绑定值 -->
<view id="{{ name }}">姓名</view>
<view>{{ age }}</view>
<view>{{ bool }}</view>
<view>{{ str }}</view>
<view>{{ arr }}</view>
<!-- 自定义对象会显示为object -->
<view>{{ user }}</view>
<view>{{ time }}</view>
<!-- 当值为undefined或变更不存在时,显示空字符串 -->
<view>{{ hobby }}</view>
<view>{{ address }}</view>
<view>---------------------------------</view>
<!--简单的运算操作
-->
<view>{{ age + 2 }}</view>
<view>{{ bool && false }}</view>
<view>{{ age < 18 }}</view>
<view>{{ age >= 18 ? '成年人' : '未成年人' }}</view>
<view>{{ user.name }}</view> 
<view>{{ arr[2] }}</view> 
<view>---------------------------------</view>
<!--直接定义值
-->
<view>{{ 'rick' }}</view>
<view>{{ 38 }}</view>
<view>{{ true }}</view>
<view>{{ [1,2,3,4,5] }}</view>
<view>{{ {username:'leo',password:'xxxxxx'} }}</view>  <!-- 直接定义对象时两边必须有空格 -->
<!-- 不能在插值表达{{}}中调用JS内置对象 -->
<!-- <view>{{ new Date() }}</view> -->

js示例代码:

Page({data:{name:'rick',age:18,bool:true,str:null,arr:[1,3,5,7,9],user:{id:9527,name:'周星驰',age:27},time:new Date(),hobby:undefined}
})

2.条件和列表渲染

  • 条件渲染:语法 wx:if=“”,判断是否需要渲染组件,取值可以是任意类型,最终都会转换为boolean,根据boolean结果,执行元素的创建和删除操作,控制元素的显示隐藏
  • 列表渲染:语法 wx:for=“”,循环多次渲染组件,取值为Array|Object|number|string,会基于数据重复渲染组件,用于循环数据,循环时默认使用index和item表示当前元素的下标变量名和元素变量名

wxml示例代码:

<!-- 条件和列表渲染 -->
<view class="title">条件和列表渲染</view>
<view style="width:100rpx;height:100rpx;background: red;" wx:if="{{ bool }}"></view>
<!-- 使用wx:elif 和 wx:else -->
<view wx:if="{{ age <= 6 }}">童年</view>
<view wx:elif="{{ age <= 18 }}">少年</view>
<view wx:elif="{{ age <= 60 }}">中年</view>
<view wx:else>老年</view>
<view>---------------------------------</view>
<!-- 可以使用<block>标签将多个组件包装起来,不控制页面结构 -->
<block wx:if="{{ name == 'rick' }}"><text>aaa</text><text>bbb</text><text>ccc</text>
</block><!--列表渲染1.循环时默认使用index和item表示当前元素的下标变量名和元素变量名2.可以指定wx:key属性,作用:1)提升性能 2)跟踪每个节点的身份状态
-->
<!-- 循环数组 -->
<view wx:for="{{ arr }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<view wx:for="{{ arr }}" wx:for-item="num" wx:for-index="i" wx:key="index">{{ i }} = {{ num }}</view>
<view>---------------------------------</view>
<!-- 循环对象 -->
<view wx:for="{{ user }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环数字 -->
<view wx:for="{{ 4 }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环字符串 -->
<view wx:for="{{ name }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环对象数组:二重循环 -->
<view wx:for="{{ users }}" wx:for-item="u" wx:key="u"><text wx:for="{{ u }}" wx:for-index="k" wx:for-item="v" wx:key="k">{{ k }} = {{ v }}</text>
</view>
<view>---------------------------------</view>
<!-- 使得block标签装饰组件包装起来 -->
<block wx:for="{{ user }}"><view>{{ index }}</view><view>{{ item }}</view>
</block>

js示例代码:

Page({users:[{id:1001,name:'a001',age:18},{id:1002,name:'a002',age:28},{id:1003,name:'a003',age:38}]}
})

3.模板

使用模板template可以定义代码片段,然后在不同的地方调用,实现页面代码结构的复用。
使用步骤:

  • 定义模板,通过name属性指定模板名称
  • 调用模板,通过is属性指定要调用的模板

wxml示例代码:

<!-- 模版的基本用法--><view class="title">模版的基本用法</view><!-- 1.定义模版 --><template name="hello"><view>abcd</view><view>1234</view><view>{{ name }}</view><view>{{ age }}</view></template><!-- 2.调用模版 --><!-- 模版中不能直接访问页面的数据,需要在调用模版时使用data属性将数据传入(有点类似与调用函数时的传参) --><!-- 传入多个数据以逗号隔开 --><template is="hello" data="{{ name,age }}"></template><view>----------------------------------------</view><!-- 使用展开运算符,直接将user对象展开 --><template is="hello" data="{{ ...user }}"></template>
<!-- 使用wx:for循环调用模版--><view class="title">使用wx:for循环调用模版</view><template name="hello2"><view>用户信息</view><text>用户ID:{{ usr.id }},</text><text>用户名称:{{ usr.name }},</text><text>用户年龄:{{ usr.age }}</text></template> <template is="hello2" wx:for="{{ users }}" wx:for-item="usr" data="{{ usr }}"></template><!-- 外部模版调用:使用import引用外部文件模版样式加载:1.加载全局样式2.加载引用模版页面的局部样式3.对于独立的外部模版样式文件,可以在引用该模版的页面中通过import导入-->
<view class="title">外部模版调用</view>
<!-- 引入外部模版文件,需要指定模版文件的命名 -->
<import src="/template/product/product"></import>
<template is="productA" data="{{ ...user }}"></template>
<view>----------------------------------------</view>
<template is="productB" data="{{ name }}"></template>
<!-- 动态调用模版-->
<view class="title">动态调用模版</view>
<template is="{{ product }}" data="{{ ...user }}"></template>
<!-- 使用include引用文件相当于将引用文件拷贝到include的位置-->
<view class="title">使用include引用文件</view>
<include src="/template/header/header.wxml"></include>
<view>body</view>
<include src="/template/footer/footer.wxml"></include>

wxss示例代码:

.temp-icon {color:red;
}@import "/template/product/product.wxss";

js示例代码:

Page({/*** 页面的初始数据*/data: {name:'jack',age:43,user:{id:1001,name:'rose',age:23},users:[{id:'0001',name:'1号',age:10},{id:'0002',name:'2号',age:20},{id:'0003',name:'30号',age:30}],product:'productA'}
})

单独模版文件.wxml

<!-- 该文件用来定义模版内容 -->
<template name="productA"><text>产品id:{{ id }}</text><text class="iconfont icon-cart temp-icon product-icon"></text>
</template><template name="productB"><text>产品名称:{{ name }}</text>
</template>

单独模版文件.wxss

.product-icon {font-size: 30px;
}

4.事件绑定

4.1 事件分类

  • 普通事件
  • 组件内置事件

4.2 事件绑定方式

  • bin事件名=“函数名” 或 bind:事件名=“函数名”,触发事件昌泡
  • catch事件名=“函数名” 或 catch:事件名=“函数名”,阻止事件昌泡

4.3 参数传递

  • 在组件标签上,以 data-参数名=“参数值” 方式进行参数传递
  • 在事件回调函数中,接收 event 事件对象为参数,通过 event.currentTarget.dataset 获取传递的参数变量

wxml示例代码:

<!-- 普通事件-->
<view class="title">普通事件</view>
<button type="primary" id="myButton" size="default" bindtap="onClick">点击</button>
<viwe bind:tap="onClick">点击</viwe>
<!-- 事件昌泡(bind绑定事件:触发事件昌泡,catch绑定事件:阻止事件昌泡) -->
<view class="box1" bindtap="tapBox1">box1<view class="box2" bindtap="tapBox2">box2<!-- <view class="box3" bindtap="tapBox3">box3</view> --><view class="box3" catchtap="tapBox3">box3</view></view>
</view><!-- 组件内置事件-->
<view class="title">组件内置事件</view>
<view><view>昵称:{{ user.nickName }}</view><image src="{{ user.avatarUrl }}"></image><button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
</view><!-- 事件传参-->
<view class="title">事件传参</view>
<view><button type="primary" bindtap="onParam" data-info="信息1">参数传递</button><!-- 参数命名两种方式:1.驼峰式命名会自动转换为小写字母 2.连字符会转换为驼峰式 --><!-- 例如:data-infoName 参数在后台识别为 infoname,data-info-name 参数在后台识别为 infoName --><button type="primary" bindtap="onParam2" data-infoName="信息2" data-info-name="信息A">参数传递2</button>
</view>
<!-- 循环传递参数 -->
<view wx:for="{{ arr }}" wx:key="index" bindtap="onParam2" data-num="{{ item }}">{{ item }}</view><!-- 表单数据获取-->
<view class="title">表单数据获取</view>
<view>{{ inputValue }}</view>
<!-- 双向数据绑定 -->
<input bindinput="onInput" value="{{ inputValue }}"></input>
<!-- 单选框和复选框 -->
<checkbox-group bindchange="onCheckBox"><checkbox wx:key="index" wx:for="{{ countrys }}" checked="{{ item.checked }}" value="{{ item.name }}">{{ item.value }}</checkbox>
</checkbox-group>
<!-- picker -->
<pickermode="selector"range="{{ countrys }}"range-key="value"bindchange="onPicker"
>{{ countrys[index].value }}</picker>

js示例代码:

Page({data:{user:null,arr:[1,2,3,4,5],inputValue:null,countrys:[{name:'CHN',value:'中国',checked:'true'},{name:'USA',value:'美国'},{name:'JPN',value:'日本'},{name:'ENG',value:'英国'}],index:0},onClick(e){ // 参数 e 表示事件对象console.log('被点击了',e)},tapBox1(){console.log('点击了box1')},tapBox2(){console.log('点击了box2')},tapBox3(){console.log('点击了box3')},getUserInfo(e){this.setData({user:e.detail.userInfo})},onParam(e){console.log(e.currentTarget.dataset.info); // 获取传递的参数},onParam2({currentTarget:{dataset}}){ // 通过es6的解构赋值console.log(dataset)},onInput(e){console.log(e.detail.value); // 获取表单元素的值this.setData({inputValue:e.detail.value})},onCheckBox(e){console.log(e.detail.value)},onPicker(e){console.log(e)this.setData({index:e.detail.value})}
})

wxss示例代码:

.box1,.box2,.box3 {border: 1px solid #ccc;
}
.box1 {height: 300px;width: 300px;
}
.box2 {height: 200px;width: 200px;
}
.box3 {height: 100px;width: 100px;
}
input {background: #999999;border-radius: 10px;padding: 20rpx;
}
page {margin-bottom: 500rpx;
}

5.WXS语法

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
WXS与JavaScript不同,可以在wxml页面中完成JS脚本嵌套,为插值表达式提供脚本方法调用,实现数据的包装处理。
用法:

  • 局部脚本:定义在对应页面的wxml文件中,只能在当前页面使用
  • 全局脚本:使用独立的.wxs文件进行定义,在需要使用的页面中进行导入

wxml示例代码:

<!-- 在微信小程序中,不能在插值表达式中调用JS内置对象,所以无法在页面上直接对数据进行包装处理-->
<view>{{ num }}</view>
<!-- <view>{{ num.toFixed(2) }}</view> --><!-- 局部脚本1.wxs区域是一个封闭的语法环境,默认定义的成员都是私有的,只能在wxs区域内调用2.必须使用module.exports = { } 向外暴露要共享的变量和函数3.对外共享的成员,将存储于module属性所指定的模块对象中4.为了语法兼容,wxs区域中只能使用ES5语法,且只支持部份js语法-->
<view class="title">局部脚本</view>
<wxs module="myModule">var name = 'rick'; // let age = 20; // 不支持ES6语法var age = 22;function round(num,len){len = len || 2;if (typeof num == 'number'){return num.toFixed(len);}return num;}module.exports = {name:name,age:age,round:round}
</wxs>
<!-- 通过 模块名.成员 方式访问 -->
<view>{{ myModule.name }}</view>
<view>{{ myModule.age }}</view>
<view>{{ myModule.round(num) }}</view>
<view>{{ myModule.round(num,2) }}</view>
<view>{{ myModule.round(num,3) }}</view>
<view>{{ myModule.round(num,1) }}</view><!-- 全局脚本-->
<view class="title">全局脚本</view>
<!-- 引入时只能使用相对路径,不能使用绝对路径 -->
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
<view>{{ tools.round(num,4) }}</view>

js示例代码:

Page({data:{num:1.23456789}
})

wxs示例代码:

// 直接定义脚本代码
function round(num,len){len = len || 2;if (typeof num == 'number'){return num.toFixed(len);}return num;
}module.exports = {round:round
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/11632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java中Collection接口中方法的使用(初学者指南)

Java中Collection接口中方法的使用&#xff08;初学者指南&#xff09; 在Java中&#xff0c;Collection接口是集合框架的根基&#xff0c;它定义了一系列通用的方法&#xff0c;用于操作各种集合&#xff08;如List、Set等&#xff09;。对于初学者来说&#xff0c;理解这些方…

计算机网络 3.3OSI参考模型

第三节 OSI参考模型 一、认识OSI/RM 1.描述&#xff1a;定义了一个连接异种计算机的标准主体结构&#xff0c;给网络设计者提供了一个参考规范。 2.组织&#xff1a;国际标准化组织. 3.发展&#xff1a;1979年研究并提出了该国际标准。 4.分层原则&#xff1a; ①层次的划…

d17(154-168)-勇敢开始Java,咖啡拯救人生

目录 方法递归 字符集 编码-解码 IO流 字节流 字节输入流 InputSream FileInputStream 字节输出流 OutputSream FileOutputSream 释放资源的方式 try-catch-finallly try-with-resource 字符流 字符输入流 Reader FileReader 文件字符输出流 Writer FileWriter …

达梦数据库 报错 数据类型不匹配

达梦数据库 报错 数据类型不匹配 背景描述问题分析问题处理方案1&#xff1a;方案2&#xff1a;TO_CHAR(str)CAST(value AS type)CONVERT(type,value)DBMS_LOB 包TEXT_EQUAL(n1,n2) 写在最后 背景描述 本文写于初接触到达梦(DM)数据库&#xff0c;之前没有用过&#xff0c;因此…

电脑快速搜索文件及文件夹软件——Everything

一、前言 Everything是一款由voidtools开发的文件搜索工具&#xff0c;主要运行于Windows操作系统上。它的主要功能是快速、高效地搜索电脑上的文件和文件夹名称。Everything通过利用NTFS文件系统的MFT&#xff08;主文件表&#xff09;来索引文件&#xff0c;从而实现几乎实时…

基于SpringBoot + MySQL的宠物医院管理系统设计与实现+毕业论文+指导搭建视频

系统介绍 项目的使用者可以避免排队挂号&#xff0c;比较方便&#xff0c;也方便于宠物医院的管理。现在的宠物本系统根据华阳社区宠物医院管理工作流程将系统使用者划分为三类&#xff0c;分别为、宠物医生、宠物主人以及系统管理人员&#xff0c;以下是对该三类类用户的具体…

Jmeter内存溢出原因及解决办法

现在越来越多的小伙伴在压力测试过程中选择使用Jmeter&#xff0c;原因是这个工具开源且小巧&#xff0c;而且还支持二次开发。 但是事情都有两面性&#xff0c;利弊共存啊&#xff0c;对比商业软件Loadrunner&#xff0c;Jmeter在高并发&#xff0c;特别是大型项目的高并发&a…

浏览器执行渲染原理

一、事件循环 事件循环&#xff08;Event Loop&#xff09;是JavaScript的执行环境的核心概念之一&#xff0c;它负责处理JavaScript中的异步操作和执行顺序。事件循环使得JavaScript能够在单线程上有效地处理并发&#xff0c;同时保持编程模型的简单性。 以下是事件循环的一…

使用Eigen将经纬度、高程、偏北角转成变换矩阵

目录 1、前言 2、示例 3、代码解析 4、垂直于给定点的切平面变换 5、代码解析 1、前言 在地球表面进行刚体变换时候&#xff0c;要将具有经纬度、高程和偏北角的坐标信息转换为变换矩阵表达&#xff0c;首先需要了解坐标系之间的转换关系。 通常&#xff0c;我们会将经纬…

每天五分钟深度学习pytorch:tensor与python、numpy之间的转换

本文重点 前面我们学习了pytorch的默认数据类型是torch.FloatTensor,那么本节课程我们将学习如何将不同的数据类型之间进行数据转换?还会学习tensor中cpu和gpu的转换,以及tensor和numpy以及python之间的类型转换,在实际编程中,可能这些需要时刻使用的。 不同类型之间的转…

AI2024(64bit) Adobe Illustrator 软件安装包下载

AI2024(64bit) Adobe Illustrator 软件安装包下载地址&#xff1a; 百度网盘下载https://pan.baidu.com/s/1C10-2JVN1rxFF5VFRuV2Yw?pwdSIMS 在创意设计的浩瀚宇宙中&#xff0c;Adobe Illustrator 2024如同一颗璀璨新星&#xff0c;以其无与伦比的创新功能和优化体验&#x…

如何实现上拉加载,下拉刷新

上拉加载&#xff0c;下拉刷新这两种交互&#xff0c;经常出现在移动端中&#xff0c;本质上和PC网页的分页一样&#xff0c;只是交互形式不同而已。 开源社区中有很多的方案&#xff0c;比如&#xff1a;isscroll、better-scroll、pulltorefresh.js&#xff0c;这些第三方库使…

一、Hive优化

1-1 分桶采样 当表的数据量比较庞大的时候, 在编写SQL语句后, 需要首先测试 SQL是否可以正常的执行, 需要在表中执 行查询操作, 由于表数据量比较庞大, 在测试一条SQL的时候整个运行的时间比较久, 为了提升测试效率, 可以整个表 抽样出一部分的数据, 进行测试 校验数据的可行…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (七)

LlaMA 3 系列博客 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (三) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (四) 基于 LlaMA…

快团团新人怎么找供货团长?免费教程一学就会!

作为快团团的新手&#xff0c;想要寻找供货团长&#xff0c;可以按照以下步骤进行&#xff1a; 打开微信&#xff1a;首先&#xff0c;在您的手机上打开微信应用。 搜索快团团&#xff1a;在微信顶部的搜索框中输入“团长运营之家”&#xff0c;选择出现的“团长运营之家”公号…

搭建网站式个人网盘-超仿Windows界面

搭建网站式个人网盘-超仿Windows界面 效果图部分源码领取源码下期更新预报 效果图 一款网站式个人网盘源码-Windows界面相等于一个网站式电脑可以放照片&#xff0c;视频-支持在线播放&#xff08;你懂的&#xff09;我觉得式一款很不错的个人网盘提醒&#xff1a;千万不要升级…

论坛帖子数据抓取

要抓取论坛帖⼦数据&#xff0c;包括帖⼦标题、作者和发布⽇期&#xff0c;可以使⽤ requests 库获取⽹⻚内容&#xff0c;再⽤ BeautifulSoup 解析HTML。 由于直接抓取具体论坛的数据可能涉及到版权和隐私问题&#xff0c;这⾥将使⽤假定的元素和类名来说明如何实现这⼀过程。…

leetcode 918.环形子数组的最大和

思路&#xff1a;DP 其实和昨天做的哪个重复数组差不多&#xff0c;按顺序来说先做这个题目其实更好。 这里需要分两种情况&#xff1a;第一个&#xff0c;就是数组不越界的时候&#xff0c;这个时候最大子数组和就是leetcode 53题的题解。 如果说越界了&#xff0c;我们还需…

Java基础知识(六) 字符串

六 字符串 6.1 String字符串 1、String类对象创建 定义String类对象格式&#xff1a;** 1&#xff09;String 字符串变量名“字符串常量”&#xff1b; 2&#xff09;String 字符串变量名new String(字符串常量); 3&#xff09;String 字符串变量名; 字符串变量名“字符串常…

【STM32HAL库】DAC输出0-3.3v

一、简要介绍一下DAC DAC也有分辨率&#xff0c;转换时间&#xff0c;精度等 分辨率常见为8或12位的 转换时间F1&#xff0c;F4,F7都是3us左右&#xff0c;而H7系列是1.7us 1.DAC框图 2.数据格式&#xff08;对齐方式&#xff09; 3.触发源 4.可以发送DMA请求 注意&#xff…