【微信小程序】WXML的模板语法与WXSS模板样式

news2025/11/1 4:19:00

🖥️🖥️🖥️ 博主主页： 👉🏻 👉🏻 👉🏻 糖 －O－

🚩🚩🚩微信小程序专栏：微信小程序

👍👍👍 希望各位博主多多支持！！！🌹 🌹 🌹

    • WXML的模板语法
        • 数据绑定
        • 小程序常用事件
        • 事件对象的属性列表
        • 条件渲染
    • WXSS模板样式
        • wxss和css的关系
        • rpx
        • 样式导入
        • 全局配置
        • tarBar
        • 页面配置

WXML的模板语法

数据绑定

  • 数据绑定的基本原则

    • （1）在data中定义数据
    • （2）在WXML中使用数据
Page({
	data:{
		//字符串典型的数据
		info:'int data',
		//数据类型的数据
		msgList:[{msg:'hello'},{msg:'world'}]
	}
})
  • Mustache语法

    • 语法的格式

    • 应用场景

<view>{{要绑定的数据名称}}</view>

①绑定内容
②绑定属性
③运算（三元运算、算术运算）

  • 动态绑定内容
Page({
	data:{info:'int data'}
})

//页面结构
<view>{{info}}</view>
  • 动态绑定属性
Page({
	data:{imgSrc:'https://wx2.sinaimg.cn/mw690/006HhBxply1hjb88sv9dtj31tk10m14k.jpg'}
})

//页面结构
<image src='{{imgSrc}}'></image>
  • 三元运算
Page({
	data:{randomNum:Math.random()*10} //生成10以内的随机数
})

//页面结构
<view>{{randomNum >=5 ? '随机数字大于等于5 ':'随机数字小于5'}}</view>
小程序常用事件
类型绑定方式事件描述
tapbindtap或bind:tap手指触摸后马上离开，类似于HTML中的click事件
inputbindinput 或bind:input文本框的输入事件
changebindchange或bind:change状态改变时触发
事件对象的属性列表
属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetInteger触发事件的组件的一些属性值集合
currentTargetObject当前组建的一些属性值结合
detailObject额外的信息
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数据
changedTouchesArray触摸事件，当前变化的触摸点信息的数据
条件渲染

1、wx:if是否需要

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

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

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

<view wx:if="{{type===1}}">1</view>
<view wx:elif="{{type===2}}">2</view>
<view wx:else>4</view>

2、结合<block> 使用wx:if

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

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

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

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

<view hidden="{{condition}}">条件为true隐藏，条件为false显示</view>

4、wx:if 与hidden的对比

①运行方式不同
wx:if以动态创建和移除元素的方式，控制元素的显示与隐藏
hidden以切换样式的方式，控制元素的显示与隐藏
②使用建议
频繁切换时，建议使用hidden
控制条件复杂时，建议使用wx:if搭配wx:elif ,wx:else进行展示与隐藏

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

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

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

6、wx:key的使用

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

data:{
	userList:[
		{id:1,name:"2"},
		{id:2,name:"3"},
		{id:3,name:"5"}
	]
}

WXSS模板样式

wxss和css的关系

WXSS具有Css大部分特性，同时, WXSS还对css进行了扩充以及修改,以适应微信小程序的开发。
与CSS相比, WXSS扩展的特性有:
● rpx尺寸单位
● @import 样式导入

rpx

1、rpx的实现原理

rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同，
为了实现屏幕的自动适配，rpx把所有设备的屏幕。
在宽度上等分为750份(即:当前屏幕的总宽度为750rpx) .
  • 在较小的设备上， 1rpx 所代表的宽度较小
  • 在较大的设备上， 1rpx 所代表的宽度较大

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

2、rpx与px之间的单位换算

在iPhone6上，屏幕宽度为375px,共有750个物理像素，等分为750rpx。则:
750rpx = 375px= 750物理像素
1rpx=0.5px = 1物理像素

设备rpx换算px (屏莫竞度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx= 0.42px1px= 2.34rpx
iPhone61rpx=0.5px1px= 2rpx
iPhone6 Plus1rpx= 0.552px1px= 1.81px

官方建议:开发微信小程序时。设计师可以用iPhone6作为视觉稿的标准。

开发举例:在iPhone6上如果要给制宽100px。高20px的盒子。
换算成rpx单位，宽高分别为200rpx和40rpx。
样式导入
  • @import的语法格式

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

.small-p{
	padding:5px;
}

@import "common.wxss";
.middle-p{
	padding:15px;
}
  • 全局样式和局部样式

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

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

注意:

①当局部样式和全局样式冲突时,根据就近原则，局部样式会覆盖全局样式
②当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置

1、全局配置文件及常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下:
①pages----->记录当前小程序所有 页面的存放路径

②window----->全局设置小程序窗口的外观

③tabBar----->设置小程序底部的tabBar 效果

④style----->是否启用新版的组件样式

2、window部分的配置项

在这里插入图片描述
window节点常用配置项

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

使用这些配置项时，在app.json中进行配置

tarBar

1、什么是tarBar

1.什么是tabBar

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

  • 底部tabBar
  • 顶部tabBar

注意:

  • tabBar中只能配置最少2个、最多5个tab页签
  • 当渲染顶部tabBar时。不显示icon, 只显示文本

2、tarBar六个组成部分

backgroundColor: tabBar 的背景色
selectedlconPath: 选中时的图片路径
borderstyle: tabBar. 上边框的颜色
iconPath: 未选中时的图片路径
selectedColor: tab. 上的文字选中时的颜色
color: tab. 上文字的默认(未选中)颜色

3、3. tabBar节点的配置项

属性类型必填默认值描述
positionString否bottomtabBar的位置，仅支持bottom/top
borderStyleString否blacktabBar.上边框的颜色，仅支持black/white
colorHexColor否tab上文字的默认(未造中)颜色
selectedColorHexColor否tab上的文字选中时的颜色
backgroundColorHexColor否tabBar的背景色
listArray否tab页签的列表，最少2个、最多5个tab
页面配置

1、页面配置文件的作用

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

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

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

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

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

3、页面配置中常用的配置项

属性类型献认值描述
navigationBarBackgroundColorHexColor#00000当前页面导航栏背景颜色。 如#00000
navigationBarTextStyleStringwhite当前页面导航栏标题颜色，仅支持black 1 white
navigationBarTitleTextString当前页面导航栏标题文字内容
backgroundColorHexColor#fff当前页面窗口的背景色
backgroundTextsyleStringdark当前页面下拉loading的样式，仅支持dark 1 light
enablePullDownRefreshBooleanfalse是否为当前页面开启下拉刷新的效果
onReachBottomDistanceNumber50页面上拉触底事件触发时距页凰底部距离，单位为px

在实际开发中，不希望在全局开启下拉刷新，那个页面
要刷新，在每个页面单个配置面设置

网络数据请求

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

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

  • 只能请求HTTPS类型的接口
  • 必须将接口的域名添加到信任列表中

2、配置request合法域名

需求描述:假设在自己的微信小程序中，希望请求hts://www.escook.cn/域名下的接口
配置步骤:登录微信小程序管理后台>开发>开发设置>服务器域名>修改request合法域名

注意事项:

①域名只支持https协议
②域名不能使用IP地址或localhost
③域名必须经过ICP备案
④服务器域名一个月内最多可申请5次修改

3、发起GET请求
调用微信小程序提供的wx.request()方法，可以发起GET数据请求，示例代码如下:

 clickGet(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/get',
      method:'GET',
      data:{
        name:'zs',
        age:20
      },
      success:(res)=>{
        console.log(res.data);
      }
    })

  }

4、发起POST请求

调用微信小程序提供的wx.request()方法，可以发起POST数据请求,示例代码如下

   //发起post数据请求
  clickPost(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/post',
      method:'POST',
      data:{
        name:'ls',
        age:33
      },
      success:(res)=>{
        console.log(res.data);
      }
    })
  },

5、在页面刚加载时请求数据

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

6、关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”.

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

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

相关文章

聚量推客升级啦，加入了外卖cps、话费充值等

聚量推客升级啦，加入了外卖cps、话费充值等

“聚量推客”升级啦&#xff0c;加入了生活cps模块&#xff0c;包含美团外卖cps、滴滴打车出行cps、电影票推广、话费充值等cps推广场景&#xff0c;聚量推客不止是app地推拉新和网推拉新平台&#xff0c;更是一个 综合性推广平台&#xff0c;未来会接入越来越多的推广场景&…
阅读更多...
OpenCV官方教程中文版 —— Hough 直线变换

OpenCV官方教程中文版 —— Hough 直线变换

OpenCV官方教程中文版 —— Hough 直线变换 前言一、原理二、OpenCV 中的霍夫变换三、Probabilistic Hough Transform 前言 目标 • 理解霍夫变换的概念 • 学习如何在一张图片中检测直线 • 学习函数&#xff1a;cv2.HoughLines()&#xff0c;cv2.HoughLinesP() 一、原理…
阅读更多...
基础课13——数据异常处理

基础课13——数据异常处理

数据异常是指数据不符合预期或不符合常识的情况。数据异常可能会导致数据分析结果不准确&#xff0c;甚至是错误&#xff0c;因此在进行数据分析之前需要对数据进行清洗和验证。 常见的数据异常包括缺失值、重复值、异常值等。 缺失值是指数据中存在未知值或未定义的值&#…
阅读更多...
Winform 多语言化快速解析替换工具-1分钟一个界面

Winform 多语言化快速解析替换工具-1分钟一个界面

随着业务的扩展&#xff0c;有的软件有多语言化的需求。那么如果软件已经很多写死的文字内容如何快速进行语言化替换呢&#xff0c;一个一个去改工作量太大。 于是开发了个小工具用来替换现有内容并生成语音包&#xff0c;原理就是采用正则表达式进行匹配控件关键字以及中文进…
阅读更多...
使用MLC-LLM将RWKV 3B模型跑在Android手机上

使用MLC-LLM将RWKV 3B模型跑在Android手机上

0x0. 前言 这篇文章主要是填一下 MLC-LLM 部署RWKV World系列模型实战&#xff08;3B模型Mac M2解码可达26tokens/s&#xff09; 这里留下来的坑&#xff0c;这篇文章里面介绍了如何使用 MLC-LLM 在A100/Mac M2上部署 RWKV 模型。但是探索在Android端部署一个RWKV对话模型的ap…
阅读更多...
宇信科技：强势行业加速融入AIGC，同时做深做细

宇信科技：强势行业加速融入AIGC，同时做深做细

【科技明说 &#xff5c; 重磅专题】 大家可能没有想到&#xff0c;一向对外低调行事的宇信科技&#xff0c;在AIGC方面2023年就已经训练出了适配金融场景的垂直模型&#xff0c;并应用到了各产品线上&#xff0c;同时结合通用大模型预研了宇信金融系统编程大模型。宇信金融系…
阅读更多...
IOC课程整理-15 Spring 类型转换

IOC课程整理-15 Spring 类型转换

1. Spring 类型转换的实现 2. 使用场景 3. 基于 JavaBeans 接口的类型转换 4. Spring 內建 PropertyEditor 扩展 5. 自定义 PropertyEditor 扩展 6. Spring PropertyEditor 的设计缺陷 7. Spring 3 通用类型转换接口 8. Spring 內建类型转换器 9. Converter 接口的局限性 10. G…
阅读更多...
Azure - 机器学习：使用 Apache Spark 进行交互式数据整理

Azure - 机器学习：使用 Apache Spark 进行交互式数据整理

目录 本文内容先决条件使用 Apache Spark 进行交互式数据整理Azure 机器学习笔记本中的无服务器 Spark 计算从 Azure Data Lake Storage (ADLS) Gen 2 导入和整理数据从 Azure Blob 存储导入和处理数据从 Azure 机器学习数据存储导入和整理数据 关注TechLead&#xff0c;分享AI…
阅读更多...
深入理解Linux网络笔记（五）：深度理解本机网络IO

深入理解Linux网络笔记（五）：深度理解本机网络IO

本文为《深入理解Linux网络》学习笔记&#xff0c;使用的Linux源码版本是3.10&#xff0c;网卡驱动默认采用的都是Intel的igb网卡驱动 Linux源码在线阅读&#xff1a;https://elixir.bootlin.com/linux/v3.10/source 4、深度理解本机网络IO 1&#xff09;、跨机网络通信过程 …
阅读更多...
快速排序——及其改进

快速排序——及其改进

hoare版本&#xff08;原始版本&#xff09;&#xff1a; 思想&#xff1a;树的遍历思想&#xff0c;先把数组第一个数作为KEY,然后left从左到右&#xff0c;right从右到左一起走&#xff0c;当left找到比key大的值时停下来&#xff0c;当right找到比key小的值时停下来&#xf…
阅读更多...
通讯网关软件030——利用CommGate X2Modbus实现Modbus RTU访问Mysql服务器

通讯网关软件030——利用CommGate X2Modbus实现Modbus RTU访问Mysql服务器

本文介绍利用CommGate X2Modbus实现Modbus RTU访问Mysql数据库。CommGate X2MODBUS是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(http://wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;实现上位机通过Modbus RTU来获取Mysql数据库的数据。 【解…
阅读更多...
IOC课程整理-16

IOC课程整理-16

1. Java 泛型基础 Java中的泛型擦除&#xff08;Type Erasure&#xff09;是Java编译器为了兼容之前的非泛型代码而采用的一种机制。在编译过程中&#xff0c;Java编译器会将泛型类型转换为原始类型&#xff0c;并在必要时插入强制类型转换。 泛型擦除有以下几个主要特点&…
阅读更多...
深度学习_1 介绍；安装环境

深度学习_1 介绍；安装环境

深度学习 学习自李沐老师的课程。笔记主要以总结老师所讲解的内容以及我个人的想法为主&#xff0c;侵删&#xff01; 课程链接&#xff1a;课程安排 - 动手学深度学习课程 (d2l.ai) 介绍 AI地图&#xff1a; 我们以前写的非 AI 类程序基本都是人自己去想会遇到什么样的问题…
阅读更多...
【PyQt学习篇 · ③】：QObject - 神奇的对象管理工具

【PyQt学习篇 · ③】：QObject - 神奇的对象管理工具

文章目录 QObject类型判定常用的API应用场景&#xff1a;过滤筛选控件 QObject定时器常用API应用场景 QObject类型判定 常用的API isWidgetType()方法&#xff1a; 使用方式&#xff1a;obj.isWidgetType()作用&#xff1a;判断一个对象是否为QWidget及其子类的实例。QWidget…
阅读更多...
4.5 final修饰符

4.5 final修饰符

在Java中&#xff0c;final修饰符可以修饰类、属性和方法&#xff0c;final有“最终”、“不可更改”的含义&#xff0c;所以在使用final关键字时需要注意以下几点&#xff1a; 使用final修饰类&#xff0c;则该类就为最终类&#xff0c;最终类不能被继承。 使用final修饰方法…
阅读更多...
C++----模板进阶

C++----模板进阶

文章目录 非类型模板参数STL知识补充 类模板的特化函数模板特化类模板特化偏特化 模板的分离编译模板总结 非类型模板参数 模板参数分为类型形参与非类型形参。 类型形参&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名称。 非类型形参…
阅读更多...
Vue性能优化：加速你的应用

Vue性能优化：加速你的应用

目录 1. 使用虚拟DOM 2. 合理使用计算属性和侦听器 3. 懒加载组件 4. 合理使用v-if和v-show 5. 使用Key管理列表渲染 6. 避免不必要的Watcher 7. 缓存响应式数据 8. 使用异步组件 9. 使用Webpack进行代码优化 10. 监控性能并进行优化 Vue.js是一款流行的JavaScript框…
阅读更多...
东软集团：看似低调，却有了19年的AI坚持

东软集团：看似低调，却有了19年的AI坚持

【科技明说 &#xff5c; 重磅专题】 在AI领域的专注与研究&#xff0c;东软集团是一个低调的存在。 可能很多人不太了解东软集团对于AI的专心与专注以及专业。三专可以简单概括东软集团的AI雄心壮志。 专注在于&#xff0c;早在2004年&#xff0c;东软就开始启动人工智能技…
阅读更多...
【Apache Flink】流式分析的多种应用场景

【Apache Flink】流式分析的多种应用场景

文章目录 0. 前言1. 数据处理架构的演进2. 传统数据处理架构3. 事务型处理4. 分析型处理用于数据分析的传统数据仓架构 状态化流处理5. 事件驱动型应用什么是事件驱动型应用&#xff1f; 6. 数据管道什么是数据管道&#xff1f;Flink 如何支持数据管道应用&#xff1f;典型的数…
阅读更多...
二叉树三种遍历的递归与非递归写法

二叉树三种遍历的递归与非递归写法

目录 ​编辑 一&#xff0c;前序遍历 题目接口&#xff1a; 递归解法&#xff1a; 非递归解法&#xff1a; 二&#xff0c;中序遍历 题目接口&#xff1a; 递归解法&#xff1a; 非递归写法&#xff1a; 三&#xff0c;后序遍历 题目接口&#xff1a; 递归解法&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023