微信小程序（WXML模板文件一）

页面根元素

根元素page
每一个页面都具备一个根元素：<page></page>
页面根元素可以在控制台的WXML选项卡中看到
允许在wxss文件中对page根元素进行样式设置

简介

全称：
WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言

对比：
网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。wxss–→css

WXML标签

WXML 文件后缀名是 .wxml，语句在语法上同 HTML 非常相似

标签：
一个完整的 WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML 语句，这一点上同 HTML 是一致的
标签闭合编译：
WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。


标签写法：
单标签双标签等

解析结果

WXML中的选择器是大小写敏感：

<view class="mainArea"></view>
<view class="mainraea"></view>

.mainArea{
   
  width: 200rpx;
  height: 200rpx;
  background-color: red;
  margin: 0 auto;
}
.mainraea{
   
  width: 200rpx;
  height: 200rpx;
  background-color: blue;
  margin: 0 auto;
  margin-top: 10px
}

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），提倡把渲染和逻辑分离。
数据

数据的定义：data选项里—键值对
数据操作：this.setData({})
数据获取：this.data.属性名
视图容器标签<view>
先介绍最基础的一个容器标签
功能：基本视图容器，类似于页面开发时的

标签

文本标签<text>

<text></text>

功能：基本文本信息，类似于<span></span>标签
（2）属性不一致
数据绑定案例。