微信小程序新手入门教程三：基础语法介绍

WXML（WeiXin Markup Language）是框架设计的一套标签语言，可以与各种组件相结合，进行页面构建。

一 常用标签

wxml的语法结构与我们熟悉的html很像，但在细节处略有不同，我们可以参考html标签对比记忆。wxml中最经常使用的标签无异于是<view>标签，它就相当于html中的div标签，可以进行区域的分隔，同样是块级元素。

我们可以新建一个页面，尝试添加如下两行代码：

<view>我是第一句话</view>
<view>我是第二句话</view>

可以看到在页面上这两行话分别出现在了两行里，由此可见view是一个块级元素，会自动换行。

接下来是我们之前已经见到过的<text>标签，它相当于span标签，是一个行内元素。我们尝试把上面两行代码中的标签换成text。

可以看到这两行文字出现在了同一行。

同样，wxml里也有checkbox、radio、img等标签，基础用法与html一样，这里我们先不做过多讲解，在后面的组件部分再进行其扩展功能的详细介绍。

二 数据类型

wxml支持的数据类型也很常见，如字符串、数字、布尔、对象、表达式等，我们直接用几个例子进行说明。

    <!-- 1 字符串 -->
    <view>{{msg}}</view>
    <!-- 2 数字类型 -->
    <view>{{num}}</view>
    <!-- 3 boolean类型 -->
    <view>是否为空：{{isEmp}}</view>
    <!-- 4 对象类型 -->
    <view>{{person.name}}</view>
    <view>{{person.age}}</view>
     <!-- 5 在标签的属性中使用 -->
     <view data-num="{{num}}">自定义</view>
     <!-- 6 使用Boolean类型充当属性（默认被选中） -->
     <view><checkbox checked/></view>
     <!-- 7 表达式 -->
     <!-- 可以在{{}}中加入表达式（数字运算，字符串拼接，逻辑运算，三元表达式....） -->
    <view>{{1 + 1}}</view>
    <view>{{10 % 2}}</view>
    <view>{{'11' + '22'}}</view>
    <view>{{10 % 2 == 0 ? '偶数' : '奇数'}}</view>

 这里的{{}}和vue语法中的用法相同，表示插值，{{}}的值将会被替代为对应 data 对象上对应属性的值。无论何时，绑定的数据对象属性发生了改变，插值处的内容都会更新。也就是说我们需要在data数组中存放对应的属性，具体代码如下：

data: {
    msg:"hello mina",
    num:10000,
    isEmp:false,
    person:{
      age:72,
      height:123,
      name:"张三"
    },
    list:[
      {
        id:0,
        name:"zhangsan"
      },
      {
        id:1,
        name:"lisi"
      },
      {
        id:2,
      name:"wangwu"
      },
      {
        id:3,
        name:"zhaoliu"
      }

    ]
  }

效果如下：

三 循环 （列表渲染）

我们可以在组件上使用 wx:for 控制属性绑定一个数组，从而使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

wx:for="{{数组或对象}}"    wx：for-item="循环项的名称"    wx：for-index="循环项的索引"

wx:key="唯一值"  

<view>数组循环</view>
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    索引：{{index}}
    值：{{item.name}}
 </view>

<view>对象循环</view>
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key">
   属性：{{key}}
   值：{{value}}
</view>

我们也可以使用wx：for进行嵌套，如下代码功能为写一个九九乘法表：

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

 四 判断（条件渲染）

我们可以在组件中使用 wx:if来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。

语法：wx:if ="{{true/false}}

<!-- wx:if ="{{true/false}}" -->
    <view>
      <view>条件渲染</view>
      <view wx:if="{{true}}">显示</view>
      <view wx:if="{{false}}">隐藏</view>

      <view wx:if="{{false}}">1</view>
      <view wx:elif="{{false}}">2</view>
      <view wx:else>3</view>
    </view>

在wxml中，还可以使用hidden来控制组件的显示与否。具体用法为：

1）在标签上直接加上hidden

<view hidden> 01</view>

2）使用hidden=“{{true}}”

<view hidden ="{{true}}"> 01</view>

我们可以看到，wx：if与hidden都可以实现隐藏元素的功能，那么它们有什么区别呢？

wx:if ：以动态创建和移除元素的方式，控制元素的展示与隐藏

 

hidden ：以切换样式的方式（display: none/block;），控制元素的显示与隐藏

 由于hidden是以设置display来实现功能的，因此hidden与display样式不能同时使用。

在实现业务时，我们也可以根据两者的特性，来选择优先使用哪种方式来隐藏元素。

当标签不是频繁的切换显示，优先使用wx：if，直接把标签从页面移除掉；否则优先使用hidden，通过切换样式的方式切换显示

五 数据绑定

在wxml中，数据绑定可以分成两步

1.在 data中定义数据

2.在WXML中使用数据

  有没有觉得很眼熟？我们在学习数据类型的时候其实就已经用到了数据绑定。

具体而言，就是要把我们需要的数据首先在页面对应的 .js 文件中，定义到 data 对象中，之后到wxml页面中进行渲染，在需要使用该变量的地方使用 Mustache 语法（{{}}）将变量名包起来即可。

 通过数据绑定，我们可以绑定内容、属性，还可以做一些简单的运算（字符串拼接、数字运算、三元运算符）。

在wxml页面中添加如下代码：

<view>
    <view>绑定内容：{{content}}</view>  
    <view>绑定属性：<img src="{{src}}" /></view>
    <view>绑定运算：{{num+1}}+1</view>
</view>

在data中添加如下数据：

data: {
    num:1,
    content:"我是要绑定的内容！~",
    src:"https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0"
  },

可以看到效果如下：

 六 事件绑定

事件就是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。例如鼠标点击时可以添加事件，输入框输入文本时也可以添加事件。我们经常见到的点击提交按钮，出现弹框提示“提交成功”，就是通过事件实现的。

 我们接下来通过一个小案例来完成对事件绑定的学习。

为页面添加一个输入框，要求用户在输入框输入数字后，可以立刻在页面上显示出来用户输入的内容。

这是一个非常常见的事件绑定案例， 实现思想就是在文本框上绑定输入事件，当有文本输入时就调用事件函数，通过事件源对象获取输入内容并赋值给data中的数据，再通过数据绑定将其显示在页面上。

首先我们先搞一个输入框和负责回显数字的view标签，并为输入框绑定输入事件bindinput（这里补充一下另两个事件：点击事件bindtap和状态改变时事件bindchange）。事件函数名为handleInput。

<input type="text" bindinput="handleInput"/>
<view>{{num}}</view>

之后就是在data中添加num数据，以及完善我们handleInput函数的内部逻辑了。

 data: {
    num:0
  }

首先在data中添加变量num，赋初值为0。

handleInput(e){
    // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  }

然后在与data并列的位置添加函数handleInput（）， 将事件源对象获取的输入内容赋值给num。这里需要额外注意一下赋值的方式，是通过setData进行赋值的，而不是我们常用的this.data.num = xx或this.num = xx 。

可以看到我们的页面刚开始是左边这样的，当我们在上方的文本框中输入数字后，下面的数字就会跟着改变了：

 那么，问题升级，你能否在页面上添加两个按钮，实现点击按钮就能数字的加一减一功能呢？

<button bindtap="handleTap" data-operation="{{1}}">+</button>
<button bindtap="handleTap" data-operation="{{-1}}">-</button>

首先我们先加入两个按钮，增加我们之前提到过的点击事件bindtap，绑定事件函数。这里需要额外注意，我们不能通过函数名+（）的形式直接传参！但是可以用自定义属性的方式进行参数传递，这里我们定义属性data-operation。在函数中使用const关键字定义常量operation接受传递过来的值。

handleTap(e){
    // 获取自定义属性operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num + operation
    })
  }

这里的核心思路就是将num的值改为当前值加上传递过来的参数值。

关于wxml的基础语法介绍就介绍这么多啦，老规矩，更多的内容可以到官方文档WXML 语法参考 / 介绍 (qq.com) 中查看。下一篇我们一起学习样式的设计和更多的标签~

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

12.scala下划线使用总结

12.scala下划线使用总结

目录 概述实践变量初始化导包引入方法转变为函数用户访问Tuple元素简化函数参数传递定义偏函数变长参数 结束 概述 实践 变量初始化 在Scala中&#xff0c;变量在声明时需要显式指定初始值。可以使用下划线为变量提供初始值&#xff0c;但这种语法仅限于成员变量&#xff0c;…
阅读更多...
IDEA反编译Jar包

IDEA反编译Jar包

反编译步骤 使用IDEA安装decompiler插件 找到decompiler插件文件夹所在位置&#xff08;IDEA安装路径/plugins/java-decompiler/lib &#xff09;&#xff0c;将需要反编译的jar包放到decompiler插件文件夹下&#xff0c;并创建一个空的文件夹&#xff0c;用来存放反编译后的…
阅读更多...
前端玩Word：Word文档解析成浏览器认识的HTML

前端玩Word：Word文档解析成浏览器认识的HTML

前言 领导跟富文本编辑器杠上啦&#xff0c;领导有一个类似于某雀导入Word文档&#xff0c;解析内容后渲染到编辑器编辑的需求。某雀功能效果如下&#xff1a; 怎么搞定呢&#xff1f;自己写一个解析器&#xff1f; 本文分享Word文件转换成浏览器认识的HTML实战经验。 什么是…
阅读更多...
springboot项目引入redis数据库的简单使用案例

springboot项目引入redis数据库的简单使用案例

springboot项目引入redis数据库的简单使用案例&#xff01;很多项目都需要使用到redis数据库&#xff0c;这是一个内存型的&#xff0c;非关系型数据库。它的读取速度非常快。因为存在了内存中。不是在硬盘中。而且它可以解决很多棘手的问题&#xff0c;比如&#xff1a;解决一…
阅读更多...
Django的web框架Django Rest_Framework精讲（二）

Django的web框架Django Rest_Framework精讲（二）

文章目录 1.自定义校验功能&#xff08;1&#xff09;validators&#xff08;2&#xff09;局部钩子&#xff1a;单字段校验&#xff08;3&#xff09;全局钩子&#xff1a;多字段校验 2.raise_exception 参数3.context参数4.反序列化校验后保存&#xff0c;新增和更新数据&…
阅读更多...
项目开发 多行编辑

项目开发 多行编辑

问题 项目开发中&#xff0c;如何进行多行编辑 详细问题 笔者使用IDEA&#xff0c;Android Studio进行项目开发时&#xff0c;由于代码冗余&#xff0c;修改过程中若是逐一删除或编辑&#xff0c;效率相对低&#xff0c;如何进行多行删除或编辑 本文将提供IDEA&#xff0c;A…
阅读更多...
152基于matlab的GUI滚动轴承特征频率计算

152基于matlab的GUI滚动轴承特征频率计算

基于matlab的GUI滚动轴承特征频率计算&#xff0c;输入轴承参数&#xff0c;包括转速&#xff0c;节圆直径、滚子直径、滚子数、接触角&#xff0c;就可得滚动特征频率结果&#xff0c;程序已调通&#xff0c;可直接运行。 152 matlab 轴承特征频率 GUI (xiaohongshu.com)
阅读更多...
MongoDB的分片集群(一) : 基础知识

MongoDB的分片集群(一) : 基础知识

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 目录导读 1. 什么是MongoDB分片 2. MongoDB分片集群介绍 2.1 MongoDB分片集群架构 2.2 MongoDB分片集群优势 3. 分片键…
阅读更多...
排序（5）——归并排序

排序（5）——归并排序

六、归并排序 1.简介 归并排序也是一种很经典的排序算法&#xff0c;采用分治的思想方法进行数据的处理。归并讲究的是先拆后合&#xff0c;也就是分治中的分而治之。在拿到一组数据后&#xff0c;程序会将整个数据进行不断拆分直至有序&#xff0c;因为单个元素必然有序&…
阅读更多...
【类和对象】4

【类和对象】4

日期类的拓展 c语言中的printf函数只能打印内置类型&#xff0c;为了弥补这一不足&#xff0c;c利用运算符重载可以打印自定义类型。 void operator<<(ostream&out);//声明在date.h中void Date::operator<<(ostream& out)//定义在date.cpp中 {out<<…
阅读更多...
Flutter解析后台发来的jwt字段数据，了解jwt是否过期

Flutter解析后台发来的jwt字段数据，了解jwt是否过期

前言 了解JWT是什么可以看这一篇博文 JWT&#xff08;JSON Web Token&#xff09;详解以及在go-zero中配置的方法-CSDN博客 流程 采用jwt_decoder库 添加至pubspec.yaml jwt_decoder: ^2.0.1 解析字段 查看是否过期 获取过期时间和token颁发的年龄
阅读更多...
PythonStudio 控件使用常用方式（五）TListBox

PythonStudio 控件使用常用方式（五）TListBox

PythonStudio是一个极强的开发Python的IDE工具&#xff0c;它使用的是Delphi的控件&#xff0c;常用的内容是与Delphi一致的。但是相关文档并一定完整。现在我试试能否逐步把它的控件常用用法写一点点&#xff0c;也作为PythonStudio的参考。 TListBox是列表框 常用属性 col…
阅读更多...
【操作系统·考研】I/O管理概述

【操作系统·考研】I/O管理概述

1.I/O设备 1.1 块设备 信息交换以数据块为单位&#xff0c;它属于有结构设备。 块设备传输速率较高&#xff0c;可寻址&#xff0c;且可对该设备随机地的读写。 栗子&#x1f330;&#xff1a;磁盘。 1.2 字符设备 信息交换以字符为单位&#xff0c;属于无结构类型。 字符…
阅读更多...
LabVIEW叶片厚度远程监控

LabVIEW叶片厚度远程监控

LabVIEW叶片厚度远程监控 随着网络技术的高速发展&#xff0c;远程监控广泛应用在各个领域。本文介绍了一种基于LabVIEW的植物叶片厚度远程监控系统&#xff0c;旨在实现对植物生长状况的精准监测和分析。 该系统利用LabVIEW软件开发工具&#xff0c;通过TCP网络协议实现数据…
阅读更多...
关于反爬虫的的概述

关于反爬虫的的概述

目录 前言 一、验证码验证 二、IP限制 三、User-Agent限制 四、动态页面加载 总结 前言 反爬虫是一种防止网站被自动程序&#xff08;爬虫&#xff09;访问和抓取数据的技术手段。在网络爬虫的发展和使用过程中&#xff0c;有一部分爬虫是用于非法获取网站数据、侵犯隐私…
阅读更多...
删除有序数组中的重复项 II[中等]

删除有序数组中的重复项 II[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个有序数组nums&#xff0c;请你原地删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。不要使用额外的数组空间&#xff0c;你必须在原地修改输入数组并在使用O(1)额…
阅读更多...
Java基于SpringBoot+Vue的美容院管理系统，附源码，文档

Java基于SpringBoot+Vue的美容院管理系统，附源码，文档

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
20240202在Ubuntu20.04.6下使用whisper.cpp的显卡模式

20240202在Ubuntu20.04.6下使用whisper.cpp的显卡模式

20240202在Ubuntu20.04.6下使用whisper.cpp的显卡模式 2024/2/2 19:43 【结论&#xff1a;在Ubuntu20.04.6下&#xff0c;确认large模式识别7分钟中文视频&#xff0c;需要356447.78 ms&#xff0c;也就是356.5秒&#xff0c;需要大概5分钟&#xff01;效率太差&#xff01;】 …
阅读更多...
electron项目在内网环境的linux环境下进行打包

electron项目在内网环境的linux环境下进行打包

Linux需要的文件: electron-v13.0.0-linux-x64.zip appimage-12.0.1.7z snap-template-electron-4.0-1-amd64.tar.7z 下载慢或者下载失败的情况可以手动下载以上electron文件复制到指定文件夹下&#xff1a; 1.electron-v13.0.0-linux-x64.zip 复制到~/.cache/electron/目录下…
阅读更多...
web前端--------渐变和过渡

web前端--------渐变和过渡

线性渐变&#xff0c;是指颜色沿一条直线进行渐变&#xff0c;例如从上到下、从左到右。 当然&#xff0c;CSS中也支持使用角度来设置渐变的方向&#xff0c;角度单位为deg。 0deg&#xff0c;为12点钟方向&#xff0c;表示从下到上渐变。 90deg&#xff0c;为3点钟方向&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站