微信小程序二、基础语法和常用样式

最新推荐文章于 2024-05-26 19:22:39 发布
最新推荐文章于 2024-05-26 19:22:39 发布
阅读量391 收藏 1
点赞数 2
分类专栏： WeChat 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44695727/article/details/118636556
版权
本文介绍了微信小程序的WXML基础语法，包括标签、数据绑定、列表遍历、条件判断和模板使用。同时，讲解了WXSS中的全局和局部样式设置，以及尺寸单位的应用。
摘要由CSDN通过智能技术生成

目录

WXML基础语法

标签

数据绑定

列表遍历

条件判断

模板（template）

WXSS常用样式

全局

局部设置以及效果 

WXML基础语法

标签

视图容器(View Container)

  • view        视图容器    
  • scroll-view    可滚动视图容器    
  • swiper    可滑动的视图容器

基础内容(Basic Content)

  • icon     图标
  • text    文字
  • progress    进度条

表单组件(Form)

  • button    按钮            
  • form        表单            
  • input    输入框        
  • checkbox    多项选择器    
  • radio    单项选择器    
  • picker    列表选择器    
  • slider    滑动选择器    
  • switch    开关选择器
  • label        标签

操作反馈组件(Interaction)

  • action-sheet    上拉菜单
  • modal    模态弹窗
  • progress    进度条
  • toast    短通知
了解本专栏 订阅专栏 解锁全文 超级会员免费看
瑶山
关注
专栏目录
订阅专栏
微信小程序开发文档——样式基础
Qjy_985211的博客
03-02 541
样式的基本使用 样式的属性 尺寸 背景 边框 边距 文本 其他（列表 、内容 、表格） 1. 尺寸 宽：weight : xxx rpx; 最小宽度 : min-weight : xxx rpx; 最大宽度 : max-weight : xxx rpx; 高：height : xxx rpx; 最小高度 ...
微信小程序 UI样式基础
xiaochun365的博客
04-15 3882
尺寸 /*width: 宽*/ /*height: 高*/ /*min-width: 最小宽度*/ /*max-width: 最大宽度*/ /*min-height: 最小高度*/ /*max-height: 最大高度*/ 背景  /*background-color: 背景颜色*/ /*background-image: 背景图片*/ /*background-rep
微信小程序——语法篇
热门推荐
官方推荐
09-10 4万+
掌握小程序语法快速上手实操一款小程序吧！
一位微信小程序萌新的学渣笔记(三）基础语法之常见组件
IntMain45的博客
02-19 435
@[TOC](文章目录) <hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1"> > 根据Python 3 教程菜鸟教程整理的个人学习笔记 # Python 3介绍 Python 是一种解释型、面向对象、动态数据类型的高级程序设计语言。 Python 由 Guido van Rossum 于 1989 年底发明，第一个公开发行版发行于 1991 年。 像 Perl 语言一样, Pyt
微信小程序基础学习（WXSS+组件）
Jenny_Ghost的博客
02-13 4606
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 与 CSS 相比，WXSS 扩展的特性有：单位尺寸和样式导入
微信小程序 实例汇总 完整项目源代码
11-01
1. **框架结构**：微信小程序基于一套自定义的XML-like语法，称为WXML（微信小程序标记语言）和WXSS（微信小程序样式语言），它们分别负责结构和样式。同时，JavaScript用于处理逻辑和数据绑定。 2. **页面生命周期...
微信小程序uniapp银行卡卡片样式组件
05-09
【微信小程序】是腾讯公司推出的一种轻量级的应用开发平台...通过这个项目，开发者不仅可以掌握微信小程序和uniapp的基础知识，还能深入理解组件化开发、样式设计和数据管理等技能，对于提升整体开发能力具有重要意义。
微信小程序模仿QQ音乐和商城
06-02
1. **微信小程序基础** 微信小程序的开发基于微信提供的开发工具，使用WXML（WeiXin Markup Language）作为结构层语言，WXSS（WeiXin Style Sheets）作为样式层语言，以及JavaScript来处理逻辑和数据。开发者需要...
原生微信小程序源码 - -豆瓣电影
05-01
综上所述，这个微信小程序项目涵盖了从基础的前端技术到微信小程序特有功能的多个知识点，通过学习和实践，开发者不仅可以掌握微信小程序的开发流程，还能深入理解如何构建一个实用的生活娱乐应用。
微信小程序样式源码
10-09
微信小程序官方样式源码； 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
微信小程序 JS动态修改样式的实现代码
10-20
主要介绍了微信小程序 JS动态修改样式的实现代码,原理是绑定数据，然后动态的修改数据，从而实现动态样式的改变而已,需要的朋友可以参考下
微信小程序聊天对话功能实现代码包含样式
06-22
完整的微信小程序实现 WebSocket 长链接聊天代码，包括聊天室界面的样式。可直接使用，有疑问可加微信13977284413询问。有时间的话我会第一时间回复。
微信小程序基本语法应用
小菜鸟的博客
12-29 833
微信小程序基本语法应用 for循环 dataObj循环对象，key最好带上，for-item后面是属性值也是属性值的别名，for-index后面的是属性名也是索引别名 <view wx:for="{{dataObj}}" wx:for-item="value" wx:for-index="key" wx:key="index"> {{value}} {{key}} </view> 简单的for循环 <view wx:for="{{dataObj}}" wx:key="
微信小程序CSS语法
流浪猫之家
06-07 1722
指定容器为flex容器（display: flex），容器可以嵌套使用；容器里面的元素为flex元素； 一，flex容器属性详解 1) flex-flow: 是 flex-direction 和 flex-wrap的简写，语法；flex-flow: row wrap; flex-direction: 决定元素的排列方向（默认主轴为横向排列: row，交叉轴为：column） ...
微信小程序基础 --模板语法（4）
囦不在地球的博客
05-26 1292
介绍了wxml，wxss，wxjs
微信小程序的样式
灵魂创作者的博客
12-02 250
微信小程序的各种样式 轮播图的点的样式{ width: 50rpx; height: 16rpx; border-radius: 40rpx; indicator-color="white" indicator-active-color="#FD7564" } 文本往后移{ text-indent: } 文本不换行{ text-overflow: ellipsis; overflow...
微信小程序–样式
无知者无畏
06-20 383
微信小程序–样式 1.布局小技巧 1.1 通过添加空标签，实现内容之间的间隔 <view class='height_20'></view> .height_20{ height: 20px; } 1.2 实现下划线 <view class='height_1 gray'></view> .gray{ background-color: #F0F0F0; } .height_1{ height: 1px; } 1.3 用一个空盒子，
微信小程序视图层语法基础
最新发布
09-15
微信小程序的视图层主要是由一系列WXML（微信小程序标记语言）和WXSS（微信小程序样式表语言）组成的。WXML负责描述页面结构，而WXSS则用于定义样式。以下是基本的语法基础： 1. **元素**: WXML的基本单位是元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑶山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值