前端（小程序）学习笔记（CLASS 2）：WXML模板语法与WXSS模板样式

news2025/5/24 11:46:15

1、数据绑定

数据绑定的基本原则

1、在data中定义数据

在页面对应的.js文件中，把数据定义到data对象中即可：

Page({
    data: {
        //字符串类型的数据
        info: 'init data',
        //数组类型的数据
        msgList: [{msg: 'hello'}, {msg: 'world'}]
    }
})
2、在WXML中使用数据(Mustache语法）

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：

<view>{{ 要绑定的数据名称 }}</view>
3、Mustache语法的应用场景

Mustache语法的主要应用场景如下：

1、动态绑定内容

如上一条内容所示，

2、动态绑定属性

和动态绑定数据的方式一样，通过使用两个大括号就行，此处与vue有所不同

3、运算（三元运算、算术运算等）

三运运算：

页面的数据如下图：

Page({
    data: {
        randomNum: Math.random()*10
    }
})

页面的结构如下：

<view>{{ randomNum >=5 ? '随机数字大于5' : '随机数字小于5' }}</view>

算术运算：

页面数据如上

页面结构如下图：

<view>{{ randomNum*100 }}</view>

2、事件绑定

概念：事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

常用的事件：

类型绑定方式事件描述
tapbindtap或bind:tap手指触摸后马上离开，类似于HTML中的click事件
inputbindinput或bind:input文本框的输入事件
changebindchange或bind:change状态改变时触发

事件对象的属性列表：
当事件回调触发时，会收到一个事件对象event，它的详细属性如下表所示：

属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息数组
* target和currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数

此时，对于外层的view来说：

1、e.target指向的是触发事件的源头组件。因此，e.target是内部的按钮组件

2、e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件

* bindtap的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为

1、通过bindtap，可以为组件绑定tap触摸事件，语法如下：

<button type="primary" bindtap="btnTapHandler">按钮</button>

2、在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：

Page({
    btnTapHandler(e) {
        console.log(e)
    }
})
 * 在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

Page({
    data: {
        count: 0
    },
    
    changeCount() {
        this.setData({
            count: this.data.count + 1
        })
    }
})
* 事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

因为小程序会把事件的属性值，统一当作事件名称来处理

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下：

<button bindtap="btnHandler" data-info="{{ 2 }}">事件名称</button>

最终，info会被解析为参数的名字，数值2会被解析为参数的值

* bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

1、通过bindinput，可以为文本框绑定输入事件：

<input bindinput="inputHandler"></input>

2、在页面的.js文件中定义事件处理函数：

inputHandler(e) {
    console.log(e.detail.value)
}
* 实现文本框和data之间的数据同步

实现步骤：

1、定义数据

只需在data中添加一个数据

2、渲染结构

<input value="{{ msg }}" bindinput="iptHandler"></input>

3、美化样式

在wxss中对其进行美化

4、绑定input事件处理函数

iptHandler(e) {
    this.setData({
        msg: e.detail.value
    })
}

3、条件渲染

1、wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块：

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

也可以用wx:elif和wx:else来添加else判断：

<view wx:if="{{type === 1}}" >男 </view>
<viwe wx:elif="{{type === 2}}" > 女 </view>
<view wx:else> 保密 </view>
2、结合<block>使用wx:If

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，示例如下：

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

注意：<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

3、hidden

在小程序中，直接使用hidden="{{condition}}" 也能控制元素的显示与隐藏

<view hidden="{{ condition }}"> 条件为true隐藏，条件为false显示</view>
4、wx:if和hidden的对比

1、运行方式不同

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

        hidden以切换样式的方式(display:none/block)，控制元素的显示与隐藏

2、使用建议

        频繁切换时，建议使用hidden

        控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

4、列表渲染

1、wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{array}}">
    索引是：{{index}} 当前是：{{item}}
</view>

默认情况下，当前循环项的索引用index表示；当前循环项用item表示

2、手动指定索引和当前项的变量名*

使用wx:for-index可以指定当前循环项的索引的变量名

使用wx:for-item可以指定当前项的变量名

示例代码如下：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    索引是：{{idx}} 当前项是：{{itemName}}
</view>
3、wx:key的使用

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

data: {
    userLiset: [
        {id:1,name:'1'},
        {id:2,name:'2'},
        {id:3,name:'3'}
    ]
}

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

5、WXSS模板语法

1、什么是WXSS

WXSS（WeiXin Style Sheets）是一套样式语言，用于美化WXML的组件样式，类似与网页开发中的CSS

2、WXSS和CSS的关系

WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发

与CSS相比，WXSS扩展的特性有：

1、rpx尺寸单位

rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位

实现原理为：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分了750份（即当前屏幕总宽度为750rpx）

在较小的设备上，1rpx所代表的宽度较小

在较大的设备上，1rpx所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位进行渲染，从而实现屏幕适配

建议：开发小程序是，设计师可以用iPhone6作为视觉稿的标准

750rpx=375px=750物理像素

1rpx=0.5px=1物理像素

2、@import样式导入

使用WXSS提供的@import语法，可以导入外联的样式表

语法格式：@import后根需要导入的外联样式表的相对路径，用；表示语句结束。示例如下：

@import "common.wxss"
.middle p {
    padding:15px
}
3、全局样式与局部样式
1、全局样式

定义在app.wxss中的样式为全局样式，作用于每一个页面

全局配置文件及常用的配置项：

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：

1、pages：记录当前小程序所有页面的存放路径

2、window：全局设置小程序的窗口的外观

小程序窗口分成了：导航栏区域）navigationBar、背景区域（background）、页面的主体区域（用来显示wxml的布局）

window节点常用的配置项

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色
navigationBarTextStyleStringwhite导航栏标题颜色
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉loading的样式，仅支持dark/light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上啦触底事件触发时距页面底部距离，单位为px

3、tabBar：设置小程序底部的tabBar效果

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换，小程序中通常将其分为：

底部tabBar、顶部tabBar

注意：

tabBar中只能配置最少2个、最多5个tab页签

当渲染顶部tabBar时，不显示icon，只显示文本

tabBar的6个组成部分：

backgroundColor：tabBar的背景色

selectedIconPath：选中时的图片路径

borderStyle：tabBar上边框的颜色

iconPath：未选中时的图片路径

selectedColor：tab上的文字选中时的颜色

color：tab上文字的默认（未选中）颜色

使用tabBar则需要在app.json中于window平级添加一个tabBar

其中的配置项有：

属性类型必填默认值描述
positionString否bottomtabBar的位置，仅支持bottom/top
borderStyleString否blacktabBar上边框的颜色，仅支持black/white
colorHexColor否tab上文字的默认（未选中）颜色
selectedColorHexColor否tab上的文字选中时的颜色
backgroundColorHexColor否tabBar的背景色
listArray是

tab页签的列表

每个tab项的配置选项

属性类型必填描述
pagePathString是页面路径，页面必须在pages中预先定义
textString是tab上显示的文字
iconPathString否未选中是的图标路径；当posting为top时不显示icon
selectedIconPathString否选中时的图标路径

4、style：是否启用新版的组件样式

2、局部样式

在页面.wxss文件中定义的样式为局部样式，只作用于当前页面

注意：

1、当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

2、当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

6、页面配置

1、页面配置文件的作用

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置

2、页面配置和全局配置的关系

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

页面配置常用的配置项：

属性类型默认值描述
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色
navigationBarTextStyleStringwhite导航栏标题颜色
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉loading的样式，仅支持dark/light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上啦触底事件触发时距页面底部距离，单位为px

7、网络数据请求

1、小程序中网络数据请求的限制

处于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制

1、只能请求HTTPS类型的接口

2、必须将接口的域名添加到信任列表中

2、配置request合法域名

需求描述：假设在自己的微信小程序中，希望请求https://www.xxx.cn/域名下的接口

配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项：

1、域名只支持https协议

2、域名不能使用IP地址或localhost

3、域名必须经过ICP备案

4、服务器域名一个月内最多可申请5次修改

3、发起GET请求

调用提供的wx.request()方法，可以发起GET数据请求，示例代码如下：

wx.request({
    url: 'xxx(地址)',
    method: 'GET',
    data: {xxx},
    success: (res) => {
        console.log(res)
    }
})
4、发起POST请求

与上述一致，只不过差了请求方式

wx.request({
    url: 'xxx(地址)',
    method: 'POST',
    data: {xxx},
    success: (res) => {
        console.log(res)
    }
})
5、在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：

onLoad: function(option) {
    this.getSwiperList()
    this.getGridList()
}

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

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

相关文章

Ubuntu20.04的安装（VMware）

Ubuntu20.04的安装（VMware）

1.Ubuntu20.04.iso文件下载 下载网址&#xff1a;ubuntu-releases-20.04安装包下载_开源镜像站-阿里云 2.创建虚拟环境 2.1打开VMware与创建新虚拟机 点击创建新虚拟机 如果没下好可以点击稍后安装操作系统 选择linux版本选择Ubuntu 64位然后点击下一步。 注意这里需要选择一…
阅读更多...
【论文阅读】LLaVA-OneVision: Easy Visual Task Transfer

【论文阅读】LLaVA-OneVision: Easy Visual Task Transfer

LLaVA-OneVision: Easy Visual Task Transfer 原文摘要 研究背景与目标 开发动机&#xff1a; 基于LLaVA-NeXT博客系列对数据、模型和视觉表征的探索&#xff0c;团队整合经验开发了开源大型多模态模型 LLaVA-OneVision。 核心目标&#xff1a; 突破现有开源LMM的局限&#xf…
阅读更多...
Spring Boot 项目多数据源配置【dynamic datasource】

Spring Boot 项目多数据源配置【dynamic datasource】

前言&#xff1a; 随着互联网的发展&#xff0c;数据库的读写分离、数据迁移、多系统数据访问等多数据源的需求越来越多&#xff0c;我们在日常项目开发中&#xff0c;也不可避免的为了解决这个问题&#xff0c;本篇来分享一下在 Spring Boot 项目中使用多数据源访问不通的数据…
阅读更多...
JAVA查漏补缺（2）

JAVA查漏补缺（2）

AJAX 什么是Ajax Ajax&#xff08;Asynchronous Javascript And XML&#xff09;&#xff0c;即是异步的JavaScript和XML&#xff0c;Ajax其实就是浏览器与服务器之间的一种异步通信方式 异步的JavaScript 它可以异步地向服务器发送请求&#xff0c;在等待响应的过程中&…
阅读更多...
【Web前端】JavaScript入门与基础(二)

【Web前端】JavaScript入门与基础(二)

Javascript对象 什么是对象&#xff1f;对象&#xff08;object&#xff09;是 JavaScript 语言的核心概念&#xff0c;也是最重要的数据类型。简单说&#xff0c;对象就是一组“键值对”&#xff08;key-value&#xff09;的集合&#xff0c;是一种无序的复合数据集合。 var…
阅读更多...
Electron+vite+vue3 从0到1搭建项目，开发Win、Mac客户端

Electron+vite+vue3 从0到1搭建项目，开发Win、Mac客户端

随着前端技术的发展&#xff0c;出现了所谓的大前端。 大前端则是指基于前端技术延伸出来的各种终端平台及应用场景&#xff0c;包括APP、桌面端、手表终端、服务端等。 本篇文章主要是和大家一起学习一下使用Electron 如何打包出 Windows 和 Mac 所使用的客户端APP&#xff…
阅读更多...
python打卡day34@浙大疏锦行

python打卡day34@浙大疏锦行

知识点回归&#xff1a; CPU性能的查看&#xff1a;看架构代际、核心数、线程数GPU性能的查看&#xff1a;看显存、看级别、看架构代际GPU训练的方法&#xff1a;数据和模型移动到GPU device上类的call方法&#xff1a;为什么定义前向传播时可以直接写作self.fc1(x) ①CPU性能查…
阅读更多...
SOC-ESP32S3部分：8-GPIO输出LED控制

SOC-ESP32S3部分：8-GPIO输出LED控制

飞书文档https://x509p6c8to.feishu.cn/wiki/OSQWwh95niobqUkKyDQcVgsbnFg 这节课&#xff0c;我们将会以ESP32S3外设GPIO的使用为例&#xff0c;带大家学习如何从零开始学会ESP32外设的使用。 例如&#xff0c;这节课我们的需求是&#xff0c;需要通过GPIO控制指示灯的亮灭&…
阅读更多...
05算法学习_59. 螺旋矩阵 II

05算法学习_59. 螺旋矩阵 II

05算法学习_59. 螺旋矩阵 II 05算法学习_59. 螺旋矩阵 II题目描述&#xff1a;个人代码&#xff1a;学习思路&#xff1a;第一种写法&#xff1a;题解关键点&#xff1a; 个人学习时疑惑点解答&#xff1a; 05算法学习_59. 螺旋矩阵 II 力扣题目链接: 59. 螺旋矩阵 II 题目描…
阅读更多...
Linux `＞`/`＞＞` 重定向操作符深度解析与高阶应用指南

Linux `＞`/`＞＞` 重定向操作符深度解析与高阶应用指南

Linux `>`/`>>` 重定向操作符深度解析与高阶应用指南 一、核心功能解析1. 基础重定向2. 标准流描述符二、高阶重定向技巧1. 多流重定向2. 文件描述符操作3. 特殊设备操作三、企业级应用场景1. 日志管理系统2. 数据管道处理3. 自动化运维四、安全与权限管理1. 防误操作…
阅读更多...
【自定义类型-联合和枚举】--联合体类型，联合体大小的计算，枚举类型，枚举类型的使用

【自定义类型-联合和枚举】--联合体类型，联合体大小的计算，枚举类型，枚举类型的使用

目录 一.联合体类型 1.1--联合体类型的声明 1.2--联合体的特点 1.3--相同成员的结构体和联合体对比 1.4--联合体大小的计算 1.5--联合体练习 二.枚举类型 2.1--枚举类型的声明 2.2--枚举类型的优点 2.3--枚举类型的使用 &#x1f525;个人主页&#xff1a;草莓熊Lotso…
阅读更多...
李宏毅《深度学习》：Self-attention 自注意力机制

李宏毅《深度学习》：Self-attention 自注意力机制

一&#xff0c;问题分析&#xff1a; 什么情况下需要使用self-attention架构&#xff0c;或者说什么问题是CNN等经典网络架构解决不了的问题&#xff0c;我们需要开发新的网络架构&#xff1f; 要解决什么问题《——》对应开发self-attention架构的目的&#xff1f; 1&#…
阅读更多...
C++初阶-list的使用1

C++初阶-list的使用1

目录 1.std::list简介 2.成员函数 2.1构造函数的使用 2.2list::operator的使用 3.迭代器 4.容量 4.1list::empty函数的使用 4.2list::size函数的使用 4.3list::max_size函数的使用 5.元素访问 6.修饰符 6.1list::assign函数的使用 6.2push_back和pop_back和push_fr…
阅读更多...
Python web 开发 Flask HTTP 服务

Python web 开发 Flask HTTP 服务

Flask 是一个轻量级的 Web 应用框架&#xff0c;它基于 Python 编写&#xff0c;特别适合构建简单的 Web 应用和 RESTful API。Flask 的设计理念是提供尽可能少的约定和配置&#xff0c;从而让开发者能够灵活地构建自己的 Web 应用。 https://andi.cn/page/622189.html
阅读更多...
分享｜16个含源码和数据集的计算机视觉实战项目

分享｜16个含源码和数据集的计算机视觉实战项目

本文将分享16个含源码和数据集的计算机视觉实战项目。具体包括&#xff1a; 1. 人数统计工具 2. 颜色检测 3. 视频中的对象跟踪 4. 行人检测 5. 手势识别 6. 人类情感识别 7. 车道线检测 8. 名片扫描仪 9. 车牌识别 10. 手写数字识别 11.鸢尾花分类 12. 家庭照片人脸检测 13. 乐…
阅读更多...
二十三、面向对象底层逻辑-BeanDefinitionParser接口设计哲学

二十三、面向对象底层逻辑-BeanDefinitionParser接口设计哲学

一、引言&#xff1a;Spring XML配置的可扩展性基石 在Spring框架的演进历程中&#xff0c;XML配置曾长期作为定义Bean的核心方式。虽然现代Spring应用更倾向于使用注解和Java Config&#xff0c;但在集成第三方组件、兼容遗留系统或实现复杂配置逻辑的场景下&#xff0c;XML配…
阅读更多...
[Vue]路由基础使用和路径传参

[Vue]路由基础使用和路径传参

实际项目中不可能就一个页面&#xff0c;会有很多个页面。在Vue里面&#xff0c;页面与页面之间的跳转和传参会使用我们的路由: vue-router 基础使用 要使用我们需要先给我们的项目添加依赖:vue-router。使用命令下载: npm install vue-router 使用路由会涉及到下面几个对象:…
阅读更多...
使用VGG-16模型来对海贼王中的角色进行图像分类

使用VGG-16模型来对海贼王中的角色进行图像分类

动漫角色识别是计算机视觉的典型应用场景&#xff0c;可用于周边商品分类、动画制作辅助等。 这个案例是一个经典的深度学习应用&#xff0c;用于图像分类任务&#xff0c;它使用了一个自定义的VGG-16模型来对《海贼王》中的七个角色进行分类&#xff0c;演示如何将经典CNN模型…
阅读更多...
WooCommerce缓存教程 – 如何防止缓存破坏你的WooCommerce网站？

WooCommerce缓存教程 – 如何防止缓存破坏你的WooCommerce网站？

我们在以前的文章中探讨过如何加快你的WordPress网站的速度&#xff0c;并研究过各种形式的缓存。 然而&#xff0c;像那些使用WooCommerce的动态电子商务网站&#xff0c;在让缓存正常工作方面往往会面临重大挑战。 在本指南中&#xff0c;我们将告诉你如何为WooCommerce设置…
阅读更多...
第J2周：ResNet50V2 算法实战与解析

第J2周：ResNet50V2 算法实战与解析

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 学习目标 ✅ 根据TensorFlow代码&#xff0c;编写出相应的Python代码 ✅ 了解ResNetV2和ResNet模型的区别 一、环境配置 二、数据预处理 三、创建、划分数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023