淘先锋技术网

首页 1 2 3 4 5 6 7

微信小程序（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>

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

<view class="main">
<view class="area">
{{info}}
</view>
</view>

.main{
  width: 100%;
  height: 300rpx;
  background-color: rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
  align-items: center
}
.area{
  width: 200rpx;
  height: 200rpx;
  background-color: #f00;
}

在这里插入图片描述
（3）数据驱动案例
wx:if属性决定是否渲染，注意wx:if后值通过{{}}绑定

<view class="main">
<view class="area" wx:if="{{stauts}}">
{{info}}
</view>
</view>

 info:'显示初始信息',
    stauts:true

在这里插入图片描述
（3）数据驱动案例

<view class="main">
<view class="area" wx:if="{{stauts}}">
{{info}}
</view>
</view>

  info:'显示初始信息',
    stauts:false

在这里插入图片描述
（3）拓展

按钮点击操作
单击：bindtap
事件绑定：
在这里插入图片描述
在这里插入图片描述
（3）数据驱动案例
添加按钮操作，控制显隐

<button bindtap="toggle">切换</button>
<view class="main">
<view class="area" wx:if="{{stauts}}"></view>
</view>

 info:'显示初始信息',
    stauts:true

 toggle(){
    this.setData({
      stauts: !this.data.stauts
    })
  },

在这里插入图片描述
（4）数据驱动案例
在原来基础上新增按钮文本切换

<button bindtap="toggle">{{btnFn}}</button>
<view class="main">
<view class="area" wx:if="{{stauts}}">{{info}}</view>
</view>

stauts:true,
   btnFn:'隐藏'

 toggle(){
    const stauts =this.data.stauts;
    const btnFn = this.data.btnFn;
    if (stauts){
      this.setData({ stauts: false, btnFn:'显示'})
     
    }else{
      this.setData({ btnFn: true, btnFn: '隐藏' })
    }
  },

在这里插入图片描述
数据绑定：
通过Mustache 即双大括号{{}}语法把变量绑定到界面上，称为数据绑定。

属性：
仅仅通过数据绑定还不够完整描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

接下来介绍下WXML属性
WXML语法—数据绑定
WXML 中的动态数据均来自对应 Page 的 data

（1）文本绑定
在这里插入图片描述
data初始化数据中
在这里插入图片描述

渲染结果
在这里插入图片描述
（2）属性绑定（class、id、style等属性动态绑定）
在这里插入图片描述
data初始化数据中

在这里插入图片描述
渲染结果
在这里插入图片描述
（3）算术运算
WXML的文本插值可以进行算术运算

在这里插入图片描述
data初始化数据中
在这里插入图片描述
（4）三目运算/三元运算
在这里插入图片描述
渲染结果
在这里插入图片描述
（5）字符串运算
在这里插入图片描述

WXML语法—列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认：数组的当前项的下标默认为 index，当前项默认为 item

案例：用户名单
在这里插入图片描述
在这里插入图片描述
渲染结果
在这里插入图片描述
指定变量名
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
在这里插入图片描述
在这里插入图片描述
列表渲染案例
9*9乘法表
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
wx:key属性
wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符

如果不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

wx:key属性
接下来结合switch开关按钮，体会下wx:key的作用
初始化数据data
案例

<view wx:for="{{switchList}}" wx:key="id">
{{item.id}}--<switch></switch>
</view>
<button bindtap="addList">添加</button>

 switchList:[
      { id: '开关1' },
      { id: '开关2' },
      { id: '开关3' },
      { id: '开关4' },
    ]

 addList(){
    const newArry =[{
      id:'开关'+(this.data.switchList.length+1)
    }];
    this.setData({
      switchList:newArry.concat(this.data.switchList)
    })
  },

在这里插入图片描述