微信小程序基础 --模板语法（4）

news2024/11/15 23:46:48

模板语法

1、wxml视图结构

1.1 概述

开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当
前这个页面的结构， CSS 用来描述页面的样子， JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开
pages/index/index.wxml，你会看到以下的内容：
在这里插入图片描述

和 HTML 非常相似， WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一
下：

  • 1）标签名字有点不一样
  • 2）多了一些 wx:if 这样的属性以及 {{表达式}} 的表示方式

提示：

  • 微信小程序 借鉴了vue.js框架的一些优秀理念

1.2 数据绑定

开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

数据绑定使用 Mustache 语法（双大括号：{{ }}）将变量包起来 – 胡子语法

WXML 中的动态数据均来自对应 js文件Page函数 的 data 对象 ,这样实现了wxml与 JavaScript之间的
数据传递，即数据绑定

小程序提倡把渲染和逻辑分离，简单来说就是不要再让 js 直接操控 DOM ， js 只需要管理状态即可，然
后再通过一种模板语法来描述状态和界面结构的关系即可。

WXML语法：
<标签>{{变量名}}</标签>
常见的数据绑定形式
1).内容:
<view> {{ message }} </view>
Page({
	data: {
		message: 'Hello 双11!'
	}
})
2).组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>
Page({
	data: {
		id: 0
	}
})
3).控制属性(需要在双引号之内)
<view wx:if="{{condition}}"> 条件判断</view>
Page({
	data: {
		condition: true
}
})

关键字(需要在双引号之内)
true ：boolean 类型的 true，代表真值。
false ： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> 男 </checkbox>

特别注意：不要直接写 checked=“false” ，其计算结果是一个字符串，转成 boolean 类型后代表真值。

4).运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算
<view hidden="{{num>5 ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({
	data: {
		a: 1,
		b: 2,
		c: 3
	}
})

view中的内容为 3 + 3 + d 。

逻辑判断
<view wx:if="{{weight >70}}"> 超重</view>
Page({
	data: {
		weight: 60
	}
})
字符串运算
<view>{{"hello" + name}}</view>
Page({
	data:{
		name: 'MINA'
	}
})
5).对象
<view>{{student.name}}</view>
Page({
	data: {
		student: {
			name: "张三",
			age: 20,
			gender: "男"
		}
	}
})
1.3 列表渲染

开发文档https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

语法：
<标签名 wx:for="{{变量名}}" [wx:for-index="自定义名称" wx:for-item="自定义名称"
wx:key="自定义名称"]>

说明：

  • wx:for-index 可以指定数组当前下标的变量名，默认名为：index
  • wx:for-item 可以指定数组当前元素的变量名，默认名为：item
  • wx:key 可以定义也可以不定义，唯一的标识符
示例：

1.首先在 index.js 后缀的文件中设定数组数据

Page({
	data: {
	// 定义变量
		userData: [{
			name: "小微",
			age: 18,
			height: 169
		},
		{
			name: "小红",
			age: 28,
			height: 165
		},
		{
			name: "小花",
			age: 16,
			height: 155
		}]
},

2.然后在 index.wxml 为后缀的模板文件中使用列表渲染相当于循环遍历出userData的数据

<view class="container">
	<label>遍历方式1</label>
	<view wx:for="{{userData}}">
		下标:{{index}} 姓名:{{item.name}} 年龄: {{item.age}}
	</view>
	<label>遍历方式2</label>
		<block wx:for="{{userData}}" wx:for-index="position" wx:for-item="user">
			<view> 下标:{{position}} 姓名:{{user.name}} 年龄: {{user.age}}
			</view>
		</block>
</view>

3.效果如下图所示
在这里插入图片描述

注意1：当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
{{item}}
</view>
等同于
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>

注意2：花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[10,20,30]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[10,20,30] + ' '}}">
{{item}}
</view>
1.4 条件渲染

开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

语法：
<标签名 wx:if="{{condition}}">

在框架中，使用 wx:if=“{{condition}}” 来判断是否需要渲染该代码块，也可以用 wx:elif 和wx:else 来添加一个 else 块。

示例：

1.在 *.js 文件中添加一个数据变量
在这里插入图片描述
2.然后直接在 *.wxml 模板页面中使用条件渲染

<!--pages/users/users.wxml-->
<view>
	<block wx:if="{{score>=90}}">
		<view>分数：{{score}}</view>
		<view>等级：优秀</view>
	</block>
	<block wx:elif="{{score>=80}}">
		<view>分数：{{score}}</view>
		<view>等级：良好</view>
	</block>
	<block wx:elif="{{score>=70}}">
		<view>分数：{{score}}</view>
		<view>等级：合格</view>
	</block>
	<block wx:elif="{{score>=60}}">
		<view>分数：{{score}}</view>
		<view>等级：及格</view>
	</block>
	<block wx:else>
		<view>分数：{{score}}</view>
		<view>等级：不及格</view>
	</block>
</view>

3.效果如下图所示
在这里插入图片描述

综合案例：分类导航界面 ：

1.创建wxml页面，且准备好图片素材
在这里插入图片描述

2.mywxml.wxml

<!-- 导航 开始 -->
<view class="index_cate">
<navigator
wx:for="{{catesList}}"
>
<image mode="widthFix" src="{{item}}" ></image>
</navigator>
</view>
<!-- 导航 结束 -->

3.mywxml.wxss

.index_cate {
display: flex;
}
.index_cate navigator {
padding: 20rpx;
flex: 1;
}
.index_cate navigator image {
width: 100%;
}
.index_cate navigator image {
width: 100%;
}

4.mysxml.wxjs

Page({
/**
* 页面的初始数据
*/
data: {
	catesList:
	["/images/icon/cate1.png","/images/icon/cate2.png","/images/icon/cate3.png","/im
	ages/icon/cate4.png"]
	},
})

5.效果图如下
在这里插入图片描述

2、wxss样式

开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

2.1、概述

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对CSS 进行了扩充以及修改。

1）新增了尺寸单位

WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可

2）提供了全局的样式和局部样式

我们可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss仅对当前页面生效。

3）此外 WXSS 仅支持部分 CSS选择器

2.2、内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

      <view style="color:{{color}};" />

  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上 . ，样式类名之间用空格分隔。

      <view style="color:{{color}};" />

注意：静态的样式文件建议统一写到 .wxss 后缀文件中。
示例：
wxml：

<!--pages/users/users.wxml-->
<view>
<!-- 动态加载的样式 -->
<view style="color:{{mycolor}}">广州
</view>
<!-- 静态引用的样式 -->
<view class="normal">深圳</view>
</view>

wxjs：

// pages/users/users.js
Page({
/**
* 页面的初始数据
*/
data: {
mycolor:"#f00"
},
})

wxss：

.normal{
color: blue;
font-size: 64rpx;
}

提示：在wxss中设置颜色，无需添加引号
在这里插入图片描述

2.3、选择器

目前支持的选择器有：
在这里插入图片描述

示例：

1.wxml:

<!--pages/users/users.wxml-->
<view>
<!-- 动态加载的样式 -->
<view style="color:{{mycolor}}">广州
</view>
</view>
<!-- 静态引用的样式 -->
<view class="normal">东莞</view>
<!-- 选择器使用 -->
<!-- id选择器 -->
<button id="submit_btn">提交</button>
<!-- 分组选择器 -->
<text>姓名：xxx</text>
<!-- 层级选择器 -->
<view>
<text>层级选择器</text>
</view>
<!-- 全局样式与局部样式 -->
<view class="container user_view c1">我是一个容器</view>

2.wxss

/* pages/users/users.wxss */
/* 类选择器 ， 分组选择器 */
.normal,text{
color: blue;
font-size: 64rpx;
}
/* id选择器 */
#submit_btn{
color: #ff0;
}
/* 层级选择器 */
view text{
background: pink;
}
.user_view{
color: red;
font-size: 20rpx;
}

3.效果图
在这里插入图片描述

2.4、尺寸单位

rpx(responsive pixel)：可以根据屏幕宽度进行自适应。

规定屏幕宽为 750rpx。例如在 iPhone6上，屏幕宽度为 375px，共有750个物理像素，则750rpx =375px = 750物理像素，1rpx = 0.5px = 1物理像素。
在这里插入图片描述

建议：开发微信小程序时设计师可以用 iPhone6作为视觉稿的标准。
注意：在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况
在日后的小程序开中，我们的统一的单位是 rpx
不要使用 px 作为单位

2.5、全局样式与局部样式

2.5.1、全局样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面
在这里插入图片描述

2.5.2、局部样式

在 pages 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

3、wxjs事件

3.1、事件的使用方式

开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

直接在组件中绑定一个事件处理函数，如果是非自定义模板，则使用 bindtap 或bind:tap ，如果是自定义的，则使用 bind:tap 。

注意：无论是自定义还是非自定义，都推荐使用 bind:tap方式

示例：展示为标签绑定点击事件

1.新创建一个小程序页面
在这里插入图片描述

2.在 tap 页面中 tap.wxml 文件中构建如下标签代码，并且为该标签绑定一个点击事件

<button bind:tap="tapFun">点我呀</button>

3.接着需要在页面的 tap.js 文件中创建出相应的处理函数，代码如下

Page({
	/**
	* 页面的初始数据
	*/
	data: {
		imgStyle: "img_middle"
	},
	onLoad() {
	},
	tapFun: function () {
		console.log("你没事点我干嘛?")
	}
})

3.2、事件分类

小程序中事件分为冒泡和非冒泡
冒泡事件( bind )：当一个节点事件被触发后，该事件会向父节点传递。
非冒泡事件( catch )：当一个节点事件被触发后，该事件不会向父节点传递。
wxml 的公共事件类型：
在这里插入图片描述

案例：测试冒泡与非冒泡事件

1.tap.wxml 中绑定事件

<!-- 冒泡事件 -->
<view bind:tap="parent_tap">
	<button bind:tap="son_tap">冒泡事件</button>
</view>
<!-- 非冒泡事件 -->
<view bind:tap="parent_tap">
	<button catch:tap="son_tap">非冒泡事件</button>
</view>

2.在 tap.js 中创建两相应的绑定函数

// pages/tap/tap.js
Page({
	/**
	* 页面的初始数据
	*/
	// 父节点绑定的函数
	parent_tap: function () {
		console.log("父控件: 点击事件")
	},
	// 子节点绑定的函数
	son_tap: function () {
		console.log("子控件: 点击事件")
	}
})

3.最后测试结果
在这里插入图片描述

3.3、事件绑定

绑定的方式： key:type=“value”
例如：点击事件
参数说明：
key 相当于 bind|catch
type 相当于tap、longpress
value 相当于 tapFun

1.key的值为 bind 或 catch

2.type即事件类型

3.value是一个字符串，绑定时 value 是什么字符串，则相应的必须要在当前页面的 js 文件中定义同名的函数

案例：实现长按 图片变大

1 tap.wxml添加image标签 ,且绑定长按事件

<!-- 长按事件 ：长按图片放大 -->
<image class="{{imgStyle}}}" src="/images/icon/cart-o.png"
bind:longpress="scaleImg"></image>

2 tap.wxss 设置样式

.img_middle {
width: 50rpx;
height: 50rpx;
}
.img_big {
width: 100rpx;
height: 100rpx;
}

3 tap.js 数据绑定及添加长按事件

Page({
/**
* 页面的初始数据
*/
	data: {
		imgStyle:"img_middle"
	},
	scaleImg:function(){
		this.setData({
			imgStyle:"img_big"
		})
	}
})

3.4、事件对象
如无特殊说明，当节点触发事件时，绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表：
在这里插入图片描述

注意：事件对象最大的作用在于给触发执行的函数传递参数。而参数需要在标签中通过“data-参数名=参数值”的方式来指定。

在tap.js 事件中去事件对象的值

scaleImg:function(event){
	// 事件类型
	console.log(event.type);
	// 事件的属性值
	console.log(event.target)
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【热门话题】Debian常用命令指南

【热门话题】Debian常用命令指南

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Debian常用命令指南引言1. 文件与目录操作lscdmkdirrmcpmv 2. 包管理aptdpkg 3.…
阅读更多...
WSL安装CentOS系统

WSL安装CentOS系统

1.首选找一个linux系统&#xff0c;执行docker命令 docker run -it --rm centos:7 bash 2.开一个新窗口&#xff0c;将系统导出 docker export e0ee25406703 -o centos.tar 3.切换到wsl命令&#xff0c;导入tar包 wsl --import centos D:\wsl\centos D:\wsl\centos.tar cen…
阅读更多...
FFmpeg+QT播放器实战1---UI页面的设计

FFmpeg+QT播放器实战1---UI页面的设计

1、播放器整体布局的设计 该部分使用QT的UI工具&#xff0c;进行整体页面设置&#xff0c;如下图1所示&#xff1a; 2、控制布局的设计 创建ctrBar的UI页面并进行页面布局设置&#xff0c;如下图2所示&#xff1a; 将图1中ctrBarWind对象提升为ctrBar类(该界面替代原先的控…
阅读更多...
简单好用的文本识别方法--付费的好用，免费的更有性价比-记笔记

简单好用的文本识别方法--付费的好用，免费的更有性价比-记笔记

文章目录 先说付费的进入真题&#xff0c;免费的来喏&#xff01;PixPin微信 先说付费的 直达网址!!! 进入真题&#xff0c;免费的来喏&#xff01; PixPin 商店里就有 使用示例&#xff1a; 可以看到&#xff1a;贴在桌面上的图片可以复制图片中的文字&#xff0c;真的很…
阅读更多...
香橙派AIpro使用SSH远程登录

香橙派AIpro使用SSH远程登录

香橙派AIpro可以连接HDMI显示器使用&#xff0c;也可以远程登录。这里采用MobaXterm软件远程登录开发板。 首先要使得控制电脑和香橙派开发板连接到同一个局域网&#xff0c;两者的IP地址能够ping通。在Windows 下可以使用MobaXterm 远程登录开发板&#xff0c;首先新建一个ss…
阅读更多...
Imperva 导致的ORAbase 乱码

Imperva 导致的ORAbase 乱码

DBCA Failing Because Of Garbage Characters In ORACLE_BASE Variable (Doc ID 2947963.1)​编辑To Bottom In this Document Symptoms Changes Cause Solution APPLIES TO: Oracle Database Configuration Assistant - Version 19.14.0.0.0 and later Oracle Database - E…
阅读更多...
分享活动规划

分享活动规划

前两天去参加菁英学院的一些辅导&#xff0c;是关于苏州久富农业机械的发展&#xff0c;看了他们企业的故事&#xff0c;我觉得我们农机很有前景和发展空间&#xff0c;我希望重新经过一次分享活动来分享我的感触&#xff0c;希望能够再次把我学到的内容传输到其他班的同学们 请…
阅读更多...
软件需求规范说明模板

软件需求规范说明模板

每个软件开发组织都会为自己的项目选用一个或多个标准的软件需求规范说明模板。有许多软件需求规范说明模板可以使用(例如ISO/IEC/IEEE2011;Robertson and Robertson2013)。如果你的组织要处理各种类型或规模的项目&#xff0c;例如新的大型系统开发或是对现有系统进行微调&…
阅读更多...
「YashanDB迁移体验官」Mysql生产环境迁移至YashanDB数据库深度体验

「YashanDB迁移体验官」Mysql生产环境迁移至YashanDB数据库深度体验

「YashanDB迁移体验官」Mysql生产环境迁移至YashanDB数据库深度体验 1. 前言1.1 产品介绍1.2 产品架构1.3 产品规格1.3.1 数据库版本支持1.3.2 数据类型支持 2. YMP安装2.1 环境说明2.2 执行安装2.3 访问YMP2.3.1 YMP登录界面2.3.2 YMP迁移流程 3. YMP数据迁移3.1 创建数据源3.…
阅读更多...
创新实训2024.05.26日志：落地基于硬盘的数据库服务

创新实训2024.05.26日志：落地基于硬盘的数据库服务

1. 需求任务列表 以下描述易学大模型软件的web应用的功能。 用户注册 用户邮箱&#xff0c;密码&#xff0c;验证码开启官方邮箱&#xff0c;用来发验证码&#xff08;QQ 网易都支持开启smtp协议&#xff0c;找教程&#xff0c;用邮箱不用手机号是为了省买发短信云服务的钱&a…
阅读更多...
初识C语言——第二十四天

初识C语言——第二十四天

函数的基本使用和递归 1.函数是什么 2.库函数 3.自定义函数 4.函数参数 5.函数调用 6.函数的嵌套调用和链式访问 7.函数的声明和定义 函数是什么 C语言中函数的分类 1.库函数 2.自定义函数 库函数&#xff1a; 简单的总结,C语言常用的库函数都有&#xff1a; #includ…
阅读更多...
关于数据库和数据表的基础SQL

关于数据库和数据表的基础SQL

目录 一. 数据库的基础SQL 1. 创建数据库 2. 查看当前有哪些数据库 3. 选中数据库 4. 删除数据库 5. 小结 二. 数据表的基础SQL 1. 创建数据表 2. 查看当前数据库中有哪些表 3. 查看指定表的详细情况(查看表的结构) 4. 删除表 5. 小结 一. 数据库的基础SQL 1. 创建…
阅读更多...
YOLOv10 | 手把手教你利用yolov10训练自己数据集（含环境搭建 + 参数解析 + 数据集查找 + 模型训练、推理、导出）

YOLOv10 | 手把手教你利用yolov10训练自己数据集（含环境搭建 + 参数解析 + 数据集查找 + 模型训练、推理、导出）

一、前言 本文内含YOLOv10网络结构图 各个创新模块手撕结构图 训练教程 推理教程 参数解析 环境搭建 数据集获取等一些有关YOLOv10的内容&#xff01; 目录 一、 前言 二、整体网络结构图 三、空间-通道分离下采样 3.1 SCDown介绍 3.2 C2fUIB介绍 3.3 PSA介绍 …
阅读更多...
【QT八股文】系列之篇章3 | QT的多线程以及QThread与QObject

【QT八股文】系列之篇章3 | QT的多线程以及QThread与QObject

【QT八股文】系列之篇章3 | QT的多线程 前言4. 多线程为什么需要使用线程池线程池的基础知识python中创建线程池的方法使用threading库队列Queue来实现线程池使用threadpool模块&#xff0c;这是个python的第三方模块&#xff0c;支持python2和python3 QThread的定义QT多线程知…
阅读更多...
【kubernetes】探索k8s集群中金丝雀发布后续 + 声明式资源管理yaml

【kubernetes】探索k8s集群中金丝雀发布后续 + 声明式资源管理yaml

目录 一、K8S常见的发布方式 1.1蓝绿发布 1.2灰度发布&#xff08;金丝雀发布&#xff09; 1.3滚动发布 二、金丝雀发布 三、声明式管理方法 3.1YAML 语法格式 3.1.1查看 api 资源版本标签 3.1.2查看资源简写 3.2YAML文件详解 3.2.1Deployment.yaml 3.2.2Pod.yaml …
阅读更多...
数据结构（五）

数据结构（五）

数据结构&#xff08;五&#xff09; 常见的排序算法内部排序交换插入选择归并基数 外部排序基于归并的 常见的排序算法 内部排序 交换 冒泡&#xff1a;每一次运行总会将最小的或者最大的放到前面&#xff0c;如果需要交换&#xff0c;一直在交换 快速排序*&#xff1a;经过…
阅读更多...
《C++ Primer Plus》第十一章复习题和编程练习

《C++ Primer Plus》第十一章复习题和编程练习

这里写目录标题 一、复习题二、编程练习 一、复习题 1. 使用成员函数为Stonewt类重载乘法运算符&#xff0c;该运算符将数据成员与double类型的值相乘。注意&#xff0c;当用英石和磅表示时&#xff0c;需要进位。也就是说&#xff0c;将10英石8磅乘以2等于21英石2磅。 答&am…
阅读更多...
Python语言基础学习（下）

Python语言基础学习（下）

目录 一、顺序语句 二、条件语句 (1) if (2) if - else (3) if - elif - else 缩进和代码块 空语句 pass 三、循环语句 while 循环 for 循环 continue break 四、函数 创建函数 调用函数 函数返回 函数变量 函数递归 关键字参数 五、列表和元组 创建列表 …
阅读更多...
创新实训2024.05.25日志：Web应用技术选型

创新实训2024.05.25日志：Web应用技术选型

我们的web应用使用python web的fastapi框架&#xff0c;通过uvicorn开启web服务。 1. refs 官网文档&#xff1a;FastAPI (tiangolo.com) github&#xff1a;https://github.com/tiangolo/fastapi 2. 环境配置 python:3.11 uvicorn:0.29.0 pip install "uvicorn[stan…
阅读更多...
【启程Golang之旅】基本变量与类型讲解

【启程Golang之旅】基本变量与类型讲解

欢迎来到Golang的世界&#xff01;在当今快节奏的软件开发领域&#xff0c;选择一种高效、简洁的编程语言至关重要。而在这方面&#xff0c;Golang&#xff08;又称Go&#xff09;无疑是一个备受瞩目的选择。在本文中&#xff0c;带领您探索Golang的世界&#xff0c;一步步地了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023