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

模板语法

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)
}

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

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

相关文章

2010-2024年别克维修手册和电路图线路接线图资料更新

2010-2024年别克维修手册和电路图线路接线图资料更新

经过整理&#xff0c;2010-2024年别克汽车全系列已经更新至汽修帮手资料库内&#xff0c;覆盖市面上99%车型&#xff0c;包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对照表…
阅读更多...
类的内存对齐位段位图布隆过滤器哈希切割一致性哈希

类的内存对齐位段位图布隆过滤器哈希切割一致性哈希

文章目录 一、类的内存对齐1.1规则1.2原因 二、位段2.1介绍2.2内存分配问题2.3跨平台问题2.4使用的注意事项 三、位图的应用3.1 给40亿个不重复的无符号整数&#xff0c;找给定的一个数。&#xff08;int的范围可以到达42亿多&#xff09;3.2 给定100亿个整数&#xff0c;设计算…
阅读更多...
Linux文件系统原理

Linux文件系统原理

Linux文件系统 冯诺依曼在1945年提出计算机的五大组成部分 运算器&#xff1a;CPU 控制器&#xff1a;CPU 存储器&#xff1a;内存和硬盘 输入设备&#xff1a;鼠标、硬盘 输出设备&#xff1a;显示器一、硬盘结构 机械硬盘结构 扇区&#xff1a;硬盘的最小存储单位&#xff…
阅读更多...
【JAVASE】抽象类

【JAVASE】抽象类

1、抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类。比如&#xff1a; 说明&a…
阅读更多...
基础IO用户缓冲区 、inode、硬软链接【Linux】

基础IO用户缓冲区 、inode、硬软链接【Linux】

文章目录 用户缓冲区磁盘磁盘分区EXT2文件系统的存储方案 inode软链接硬链接 用户缓冲区 代码一&#xff1a; 1 #include<stdio.h>2 #include<unistd.h>3 #include<string.h> 4 int main()5 {6 const char * fstr &…
阅读更多...
Linux下的调试器 ： gdb指令详解

Linux下的调试器 ： gdb指令详解

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 gdb是什么 gdn是linu…
阅读更多...
SQL注入:原理及示例讲解，配置mysql环境变量，pikachu靶场搭建

SQL注入:原理及示例讲解，配置mysql环境变量，pikachu靶场搭建

SQL注入原理 SQL注入&#xff08;SQL Injection&#xff09;是一种代码注入技术&#xff0c;攻击者通过将恶意的SQL代码插入到应用程序的输入字段中&#xff0c;诱使后台数据库执行这些恶意代码&#xff0c;从而对数据库进行未授权的操作。常见的操作包括获取敏感数据、篡改数…
阅读更多...
Liunx基本指令以及权限（个人笔记）

Liunx基本指令以及权限（个人笔记）

Linux指令和权限 1.指令1.1ls指令1.2pwd命令1.3cd指令1.4touch指令1.5mkdir指令1.6rm指令1.7man指令1.8cp指令1.9mv指令1.10cat指令1.11less指令1.12head指令1.13tail指令1.14date显示1.15Cal指令1.16find指令1.17grep指令1.18zip/unzip指令1.19tar指令1.20bc指令1.21uname -r指…
阅读更多...
Python数据可视化（五）

Python数据可视化（五）

实现GUI效果 借助 matplotlib&#xff0c;除可以绘制动画内容外&#xff0c;还可以实现用户图形界面的效果&#xff0c;也就是 GUI 效果。 GUI是用户使用界面的英文单词首字母的缩写。接下来&#xff0c;我们就以模块widgets中的类RadioButtons、 Cursor 和 CheckButtons 的使用…
阅读更多...
属于程序员的浪漫，一颗会跳动的心！！！

属于程序员的浪漫，一颗会跳动的心！！！

绘制一颗会跳动的心❤ 嘿嘿 可以说是程序员的专属浪漫了吧&#xff0c;就像点燃一颗LED灯一样&#xff1f;&#xff08;我瞎说的啊&#xff0c;大家别当真&#xff0c;我很菜的&#xff01;&#xff01;&#xff01;&#xff01;&#xff09; 程序就在下面啦&#xff0c;然…
阅读更多...
​✨聚梦AI绘图插件-for photoshop（基于ComfyUI） 内测版V0.1发布

​✨聚梦AI绘图插件-for photoshop（基于ComfyUI） 内测版V0.1发布

&#x1f388;背景 photoshop本身是有AI生成能力的&#xff0c;不过限于种种原因&#xff0c;国内使用很不方便。 photoshop也是有AI插件的&#xff0c;不过大多安装起来比较复杂&#xff0c;或者&#xff0c;干脆就会收费。 所以我们做了一个免费的AI插件&#xff0c;期望能…
阅读更多...
Vue.js条件渲染与列表渲染指南

Vue.js条件渲染与列表渲染指南

title: Vue.js条件渲染与列表渲染指南 date: 2024/5/26 20:11:49 updated: 2024/5/26 20:11:49 categories: 前端开发 tags: VueJS前端开发数据绑定列表渲染状态管理路由配置性能优化 第1章&#xff1a;Vue.js基础与环境设置 1.1 Vue.js简介 Vue.js (读音&#xff1a;/vju…
阅读更多...
如同“水生态”的存储引擎｜OceanBase数据转储合并技术解读（一）

如同“水生态”的存储引擎｜OceanBase数据转储合并技术解读（一）

本系列文章主要围绕 OceanBase数据库存储引擎中的转储合并进行解读&#xff0c;涉及到数据存储、转储合并、数据校验等方面的内容&#xff0c;旨在让读者了解OceanBase数据库的存储引擎中与转储合并有关的各种概念&#xff0c;帮助读者更好地理解OceanBase数据库的存储技术原理…
阅读更多...
20240526怎样将windows的屏幕复制到第二屏

20240526怎样将windows的屏幕复制到第二屏

百度&#xff1a;WIN10 第二显示器 COPY https://zhidao.baidu.com/question/761454546683111004.html 20240526怎样将windows的屏幕复制到第二屏  我来答 分享 举报 2个回答#热议# 海关有哪些禁运商品&#xff1f;查到后怎么办&#xff1f; 华硕服务 2022-07-05 百度认证:…
阅读更多...
C++模板——函数模板和类模板

C++模板——函数模板和类模板

目录 泛型编程 函数模板 函数模板概念 函数模板的定义和语法 函数模板的工作原理 函数模板的实例化 隐式实例化 显示实例化 函数模板的匹配原则 类模板 类模板的定义格式 类模板的实例化 泛型编程 什么是泛型编程&#xff1f; 泛型编程&#xff08;Generic Pr…
阅读更多...
Sam Altman微软Build 2024最新演讲：AI可能是下一个移动互联网

Sam Altman微软Build 2024最新演讲：AI可能是下一个移动互联网

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…
阅读更多...
gfast：基于全新Go Frame 2.3+Vue3+Element Plus构建的全栈前后端分离管理系统

gfast：基于全新Go Frame 2.3+Vue3+Element Plus构建的全栈前后端分离管理系统

gfast&#xff1a;基于全新Go Frame 2.3Vue3Element Plus构建的全栈前后端分离管理系统 随着信息技术的飞速发展和数字化转型的深入&#xff0c;后台管理系统在企业信息化建设中扮演着越来越重要的角色。为了满足市场对于高效、灵活、安全后台管理系统的需求&#xff0c;gfast应…
阅读更多...
人工智能+量子计算：飞跃现实边界还是科技幻想？

人工智能+量子计算：飞跃现实边界还是科技幻想？

人工智能量子计算&#xff0c;这是一种可能改变世界的伙伴关系。 在科技的前沿&#xff0c;两大革命性技术——人工智能&#xff08;AI&#xff09;和量子计算——正站在合作的十字路口。人工智能&#xff0c;以其强大的数据分析能力和模式识别&#xff0c;正在改变着我们生活…
阅读更多...
MOS选型及其参数解析

MOS选型及其参数解析

背景&#xff1a; 整理现有常用元器件选型&#xff0c;日后使用时针对性观看&#xff0c;生成列表链接如下&#xff1a; https://blog.csdn.net/caozhaokun/article/details/126069701 作者&#xff1a;Cayden 时间&#xff1a;2024/05/26 一、MOS选用现状 MOS是电路设计…
阅读更多...
【软件设计师】面向对象技术

【软件设计师】面向对象技术

1.面向对象基础 1.1 基本概念 方法重载是函数名字相同&#xff0c;参数列表不同 组成 即组合&#xff0c;指整体与部分的关系&#xff0c;整体与部分生命周期相同 聚合 关联关系的一个特例&#xff0c;是体现整体与部分&#xff0c;即使has-a的关系&#xff0c;此时整体与部分…
阅读更多...
最新文章

Copyright @ 2022~2023