微信小程序WXML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/WEB__QuShiLong/article/details/103051392

本文介绍了微信小程序的基础，特别是WXML的使用。WXML作为小程序的标记语言，与HTML有相似之处，如view、button、text等标签，但也有不同，如wx:if、wx:for等特有属性。文章详细讲解了数据绑定、条件渲染和循环渲染，并提供了实例展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【前言】2019.11.13
【内容】
根元素page
每一个页面都具备一个根元素：
页面根元素可以在控制台的WXML选项卡中看到
允许在wxss文件中对page根元素进行样式设置
在这里插入图片描述
WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言
WXML中的选择器是大小写敏感

WXML和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，下面来一一阐述一下：
（1）标签名不一致
HTML 经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如弹窗等等。既然都需要这些组件，那干脆把这些常用组件包装起来，大大提高开发效率。
小程序的 WXML 用的标签是 view, button, text ,map等等，这些标签就是小程序给开发者包装好的，此外还提供了地图、视频、音频等等组件。
（2）属性不一致
属性：WXML多出wx:if、wx:for等一些属性及表达式
在网页的一般开发流程中，通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。
MVVM模式：用户点击某个按钮的时候，可以通过JS操作DOM。当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑，这显然不是一个很好的开发模式，因此就有了 MVVM 开发模式（例如 React, Vue），提倡把渲染和逻辑分离。
WXML基本标签
视图容器标签
先介绍最基础的一个容器标签
功能：基本视图容器，类似于页面开发时的

标签

文本标签

功