微信小程序----------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模板文件一_第1张图片

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.属性名


  
    
  
  
 /*案例一     点击图片切换操作*/
  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的作用

  
    
      {{item.name}} 
    

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

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

**

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

**

你可能感兴趣的