04--WXML

news/2024/3/28 21:59:16/文章来源:https://blog.csdn.net/hqwest/article/details/129201371

1、什么是WXML

什么是Wxml呢?我们首先要介绍一下Html,Html的全称为HyperTextMarkup Language,翻译过来就是超文本标记语言,这种语言目前已经普遍用于前端开发,而wxml正是从html演变而来,它基于微信这个平台,在很多方面变得更加简洁易用,更加适合微信小程序的开发。Wxml依然是标签语言,在小程序中,它可以结合基础组件、事件系统,可以构建出页面的结构。

2、wxml与html的区别

WXML,就可以理解为我们传统页面中的HTML,它是微信为我们提供的一套标签语言,可以说它就是我们小程序的脸面(虽然没经过CSS装饰前不一定光鲜亮丽),开发中 WXML 页面就作为我们一些逻辑行为的入口,以及效果展示的承载者。

再大白话一点:你所看到的小程序页面长什么样,就是 WXML(主要) + WXSS (美化) 实现的。

3、wxml语法

网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml,你会看到以下的内容:

从上边的例子可以看到,小程序的 WXML 用的标签是 view, button, text 等等,这些标签就是小程序给开发者包装好的基本能力,我们还提供了地图、视频、音频等等组件能力。

语法是:

view 类似html div标签 块级元素,换行,比如:<view>我是view标签,会换行</view>

所有组件都有以下属性:

4、数据绑定

WXML 中的动态数据均来自对应 Page 的 data,数据绑定功能使得程序在运行过程中,具备动态改变渲染界面的能力,从而达到了更好的用户体验效果。

数据绑定使用 Mustache 语法(双大括号)将变量包起来

在index.js中的page,加入以下代码:

在index.wxml中的代码:

然后点击“编译”按钮,看到效果如上图

具体看文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

5、列表渲染

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index ,数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名,

使用 wx:for-index 可以指定数组当前下标的变量名:

index.js代码

index.wxml代码:

详情看文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

6、条件渲染

在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:

<viewwx:if="{{condition}}"> True </view>

也可以用 wx:elifwx:else 来添加一个 else 块:

<viewwx:if="{{length > 5}}"> 1 </view><viewwx:elif="{{length > 2}}"> 2 </view><viewwx:else> 3 </view>

block wx:if

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

<blockwx:if="{{true}}"><view> view1 </view><view> view2 </view></block>

注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

7、模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,如:

<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template>

使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

<template is="msgItem" data="{{...item}}"/>

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

<template name="odd"><view> odd </view>
</template>
<template name="even"><view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

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

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

相关文章

SQL server设置用户只能访问特定数据库、访问特定表或视图

在实际业务场景我们可能需要开放单独用户给第三方使用&#xff0c;并且不想让第三方看到与业务不相关的表或视图&#xff0c;我们需要在数据库中设置一切权限来实现此功能&#xff1a; 1.设置用户只能查看数据库中特定的视图或表 1.创建用户名 选择默认数据库 服务器角色默认…

__stack_chk_fail问题分析

一、问题进程收到SIGABRT信号异常退出&#xff0c;异常调用栈显示__stack_chk_fail*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** Build fingerprint: Pico/A7H10/PICOA7H10:10/5.5.0/smartcm.1676912090:userdebug/dev-keys Revision: 0 ABI: arm64 Times…

Web前端学习:一

编辑器的基础使用 编辑器推荐使用&#xff1a; HBuilderx&#xff08;免费中文&#xff09;&#xff08;建议使用&#xff09; Sublime&#xff08;免费英文&#xff09; Sublime中文设置方法&#xff0c;下载语言插件&#xff1a; 1、进入Sublime后&#xff0c;ShiftCtrlP…

wait/notify方法 等待唤醒机制

线程正在运行&#xff0c;调用这个线程的wait()方法&#xff0c;这个线程就会进入一个集合进行等待(这个集合的线程不会争抢cpu)&#xff0c;此时线程的状态就是waiting 当有线程调用notify()方法的时候&#xff0c;就会从集合中挑选一个线程进入到排队队列里面 notifyAll就是…

【样式】轮播图样式 uview 版本 : “2.0.31“

![在这里插入图片描述](https://img-blog.csdnimg.cn/6cd568ce932b4ea7ae52f10365979680.png html <view class"addSwiperdiv"><image src"/static/66.png" mode"aspectFill" class"titleimg"></image><view c…

VC++ 解决dll库动态库加载失败问题(调用LoadLibrary加载失败)(附源码)

目录 1、动态加载dll库去调用库中的函数 1.1、调用系统dll库中未公开的接口 1.2、调用控件库中的注册接口向系统中注册该控件 2、LoadLibrary动态加载dll库失败的场景 2.1、自制安装包中遇到的LoadLibrary加载dll库失败问题 2.2、主程序底层模块调用LoadLibrary加载dll库…

秒杀测试案例 Java Redis Mysql

基于redis和MySQL乐观锁实现秒杀优惠券场景&#xff0c;一人一单。MySQL乐观锁改良控制不出现超卖和少卖问题&#xff0c;使用redisson分布式锁在用户维度加锁控制一人一单。 源码&#xff1a;https://github.com/hanhanhanxu/SeckillTest 文中图片看不清的地方可以鼠标右键-&…

谷歌外推留痕,谷歌搜索留痕快速收录怎么做出来的?

本文主要分享谷歌搜索留痕的收录效果是怎么做的&#xff0c;让你对谷歌留痕技术有一个全面的了解。 本文由光算创作&#xff0c;有可能会被修改和剽窃&#xff0c;我们佛系对待这样的行为吧。 谷歌搜索留痕快速收录怎么做出来的&#xff1f; 答案是&#xff1a;通过谷歌蜘蛛…

C语言-结构体对齐

详细说明参考博客 (1条消息) C语言结构体对齐&#xff0c;超详细&#xff0c;超易懂_haozigegie的博客-CSDN博客 (1条消息) #pragma pack详解_OuJiang2021的博客-CSDN博客_#pragma pack 以下个人理解总结 出现结构体对齐考虑的根本原因就是&#xff1a;【数据存取执行效率】…

Openwrt中动态IPV6 防火墙的正确设置方法

环境&#xff1a;光猫桥接公网IPV6 问题&#xff1a;动态IPV6地址不知道怎么设置防火墙 解决办法&#xff1a;模糊匹配前缀&#xff0c;特定后缀 背景&#xff1a;将家中光猫桥接后&#xff0c;获得了公网的IPV6地址&#xff0c;可以从外部用IPV6访问家中的设备&#xff0c;但I…

【AI写作】 机器人流程自动化 介绍 - Robotic Process Automation (RPA) Introduction

写一篇文章介绍RPA技术,未来的发展。使用markdown格式,有3级索引,超过3000字。 某位大师说过的: 任何行业、任何部门都有大量的场景,涉及重复、有规则逻辑的工作,都可以用 RPA 开发一个软件机器人帮助完成。 文章目录 机器人过程自动化(RPA)简介RPA的定义RPA的好处Robo…

【centos7下部署mongodb】

一.安装环境 CentOS7MongoDB4.0.13正式版。 二.下载MongoDB 1.1 官网下载地址&#xff1a;https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.13.tgz 1.2 将压缩包通过xftp上传到服务器/opt目录&#xff0c;然后解压、改名 三. 配置环境变量及配置文件 3.1配置系…

有限差分法求解不可压NS方程

网上关于有限差分法解NS方程的程序实现不尽完备&#xff0c;这里是一些补充注解 现有的优秀资料 理论向 【1】如何从物理意义上理解NS方程&#xff1f; - 知乎 【2】NS方程数值解法&#xff1a;投影法的简单应用 - 知乎 【3】[计算流体力学] NS 方程的速度压力法差分格式_…

pytorch1.2.0+python3.6

一、说明 pytorch1.2.0python3.6CUDA10.0cudnn7.4.1.5 二、步骤 在conda中创建一个新的虚拟环境 查看一下自己的所有环境 激活虚拟环境 conda activate torch1.2.0 关于cuda和cudnn 1、查看自己电脑系统是10.2版本 http://链接&#xff1a;https://pan.baidu.com/s/1v5cN6…

自学前端,你必须要掌握的3种定时任务

当你看到这篇博客的时候&#xff0c;一定会和狗哥结下不解之缘&#xff0c;因为狗哥的博客里不仅仅有代码&#xff0c;还有很多代码之外的东西&#xff0c;如果你可以看到最底部&#xff0c;看到投票环节&#xff0c;我相信你一定感觉到了&#xff0c;狗哥的真诚&#xff0c;狗…

DateTimeParseException

前端请求为字符串的时间格式2023-02-16 19:19:51&#xff0c;服务端用LocalDateTime类型接收时报解析异常java.time.format.DateTimeParseException: Text 2023-02-16 19:19:51 could not be parsed at index 10方法一&#xff1a;JsonFormat(shape Shape.STRING, pattern &q…

Redis 主从复制-服务器搭建【薪火相传/哨兵模式】

Redis 安装参考文章&#xff1a;Centos7 安装并启动 Redis-6.2.6 注意&#xff1a;本篇文章操作&#xff0c;不能在 静态IP地址 下操作&#xff0c;必须是 动态IP地址&#xff0c;否则最后主从服务器配置不成功&#xff01; 管道符查看所有redis进程&#xff1a;ps -ef|grep re…

Linux->父子进程初识和进程状态

目录 前言&#xff1a; 1. 父子进程创建 2. 进程状态 R(running)状态&#xff1a; S(sleep)状态&#xff1a; D(disk sleep)状态&#xff1a; T(stopped)状态&#xff1a; X(dead)和Z(zombie)状态&#xff1a; 孤儿进程&#xff1a; 前言&#xff1a; 本篇主要讲解关…

同事每天早下班,原来是用了这8个开发工具

引言 工欲善其事必先利其器&#xff0c;说的就是工匠要想更加高效的做事情&#xff0c;就得先将工具变得锋利。那么对于程序员来说同样也是如此&#xff0c;如果要想每天早点下班&#xff0c;就必须借助于一些开发工具来提高自己的工作效率&#xff0c;今天慕枫就给大家总结一…

365智能云打印怎么样?365小票无线订单打印机好用吗?

365智能云打印怎么样&#xff1f;365智能云打印是有赞官方首推的订单小票打印机&#xff0c;荣获2016年有赞最佳硬件服务商。可以实现远程云打印&#xff0c;无需连接电脑&#xff0c;只需通过GPRS流量或者WIFI即可连接&#xff0c;不受地理位置和距离限制。365小票无线订单打印…