微信小程序----------WXML模板文件一

一、页面根元素page

每一个页面都具备一个根元素：。

页面根元素可以在控制台的WXML选项卡中看到。

允许在wxss文件中对page根元素进行样式设置。

二、WXML简介

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

对比：
网页编程采用的是 HTML + CSS + JS 这样的组合。
在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。wxss–→css

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

三、标签、标签闭合、敏感性

标签：
一个完整的 WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML 语句，这一点上同 HTML 是一致的

标签闭合编译：
WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。

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

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

WXML和 HTML不同点

（1）标签名不一致
HTML 经常会用到的标签是 div, p, span。
小程序的 WXML 用的标签是 view, button, text ,map等等，这些标签就是小程序给开发者包装好的，此外还提供了地图、视频、音频等等组件。

视图容器标签view
先介绍最基础的一个容器标签
功能：基本视图容器，类似于页面开发时的

标签

文本标签text
功能：基本文本信息，类似于标签

（2）属性不一致
属性： WXML多出wx:if、wx:for等一些属性及表达式。
在网页的一般开发流程中，会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。

MVVM模式： 用户点击某个按钮的时候，可以通过JS操作DOM，当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑，这显然不是一个很好的开发模式，因此就有了 MVVM 开发模式（例如 React, Vue），提倡把渲染和逻辑分离。

MVVM模式： 简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
小程序的框架也是用到了这个思路，例如数据绑定案例。

wx:if属性决定是否渲染，注意wx:if后值通过{{}}绑定

拓展：按钮点击操作（单击：bindtap）

四、数据data初始化

（1）页面需要显示动态数据必须要定义到data对应的变量中。
（2）如果该数据在操作过程中发生变化，需要将新数据重新绑定到该变量中，语法为this.setData({属性名：属性值})
（3）获取data数据语法为this.data.属性名

  
    
  
  {{name}}

 /*案例一     点击图片切换操作*/
  change(){
  //第一种方法
    // this.setData({
    //   status:!this.data.status
    // })
   
     //第二种方法 
    const status = this.data.status;
    const name = this.data.name;
    if(status){
      this.setData({status:false,name:'显示'})
    }else{
      this.setData({status:true,name:'隐藏'})
    }
 },

五、数据绑定{{}}—{{}}

if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达

 /**
   * 页面的初始数据
   */
  data: {
    info:'欢迎进入此页面',
    status:true,
    name:'隐藏',
    a:3,
    b:2,
    ss:'数据绑定---文本绑定',
    sa:'demoId',
    num:0
  },

WXML语法一---数据绑定
    
    {{ss}}

    
     

    
    a+b的和为：{{a+b}}

    
     {{a

    
    {{"哈哈，"+info}}

六、列表渲染v-for----wx:for

/**
   * 页面的初始数据
   */
  data: {
    area:[
      { mz: '依依', age: 10 },
      { mz: '诺诺', age: 12 },
      { mz: '中中', age: 8 },
      { mz: '生生', age: 6 }
    ],
    goods:[1,2,3,4,5,6,7,8,9],
    add:"点击添加",
    books:[
      { name: "开关1" },
      { name: "开关2" },
      { name: "开关3" }
    ]

  },

WXML语法二---列表渲染

    
    
      {{index}}-----姓名：{{item.mz}}-----年龄:{{item.age}}
    
    
    
      {{bb}}-----姓名：{{aa.mz}}-----年龄:{{aa.age}}
    

 	
    

9*9乘法表 data初始化数据 标签进行嵌套，block不会渲染读取出来

 
      
        
          {{i}}*{{j}}={{i*j}}
        
          
    

接下来结合switch开关按钮，体会下wx:key的作用

  {{add}}
    
      {{item.name}} 
    

wx:key属性
wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符

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

**

★★★注意：小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果

**