精华内容
下载资源
问答
  • WXML简介 标签闭合、敏感性 数据驱动 数据绑定 列表渲染 页面根元素 根元素page 每一个页面都具备一个根元素:page 页面根元素可以在控制台的WXML选项卡中看到 允许在wxss文件中对page根元素进行样式设置 全称:...

    页面根元素
    WXML简介
    标签闭合、敏感性
    数据驱动
    数据绑定
    列表渲染

    页面根元素
    根元素page
    每一个页面都具备一个根元素:page
    页面根元素可以在控制台的WXML选项卡中看到
    允许在wxss文件中对page根元素进行样式设置
    在这里插入图片描述
    全称:WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言
    对比:网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。
    同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。

    WXML标签
    WXML 文件后缀名是 .wxml,语句在语法上同 HTML 非常相似
    标签:一个完整的 WXML语句由一段开始标签和一段结束标签组成,在标签中可以是内容,也可以是其他的 WXML 语句,这一点上同 HTML 是一致的

    标签闭合编译:
    WXML 要求标签必须是严格闭合的,没有闭合将会导致编译错误。
    在这里插入图片描述
    在这里插入图片描述
    标签写法:
    单标签双标签等
    单标签和双标签的解析结果一样
    在这里插入图片描述
    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),提倡把渲染和逻辑分离。
    MVVM模式:简单来说就是不要再让 JS 直接操控 DOM,JS 只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
    小程序的框架也是用到了这个思路,例如数据绑定案例。
    数据data初始化:
    ①页面需要显示动态数据必须要定义到data对应的变量中;
    ②如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,语法为this.setData({属性名:属性值})
    ③获取data数据语法为this.data.属性名

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

    标签

    文本标签<text
    text
    功能:基本文本信息,类似于span标签

    WXML属性
    数据绑定案例
    home.wxml
    在这里插入图片描述
    在这里插入图片描述
    home.js
    在这里插入图片描述
    在这里插入图片描述
    数据驱动案例
    wx:if属性决定是否渲染,注意wx:if后值通过{{}}绑定
    在这里插入图片描述
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    添加按钮操作,控制显隐
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    此时便可以通过按钮控制显隐

    在原来基础上新增按钮文本切换
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    WXML属性
    数据绑定:
    通过Mustache 即双大括号{{}}语法把变量绑定到界面上,称为数据绑定。

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

    WXML语法—数据绑定
    WXML 中的动态数据均来自对应 Page 的 data
    (1)文本绑定

    (2)属性绑定(class、id、style等属性动态绑定)
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (2)属性绑定(class、id、style等属性动态绑定)
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (3)算术运算
    WXML的文本插值可以进行算术运算
    在这里插入图片描述
    data数据初始化中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (4)三目运算/三元运算
    在这里插入图片描述
    data数据初始化中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (5)字符串运算
    在这里插入图片描述
    data数据初始化中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述

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

    案例:用户名单
    在这里插入图片描述
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    指定变量名
    wx:for-item 可以指定数组当前元素的变量名
    wx:for-index 可以指定数组当前下标的变量名

    列表渲染案例
    9*9乘法表
    在这里插入图片描述
    在这里插入图片描述
    block标签
    如果不想要标签多层嵌套,可以在外层使用
    block标签进行嵌套,block不会渲染读取出来
    在这里插入图片描述
    data数据初始化中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    wx:key属性
    wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符
    注意:
    如果不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
    当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

    结合switch开关按钮,体会下wx:key的作用
    在这里插入图片描述

    data数据初始化
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    在这里插入图片描述
    wx:key属性
    此时,每个switch按钮都被view嵌套者,如果不想用嵌套语法,可以在外层用block标签
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    在这里插入图片描述
    wx:key属性
    添加操作按钮
    在这里插入图片描述
    在这里插入图片描述
    注意:小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果

    wx:key属性
    添加操作按钮
    在这里插入图片描述
    点击添加按钮
    在这里插入图片描述
    点击添加按钮后发现,之前给开关1绑定的开属性被新开关取代,没有实时跟踪到自身,所以需要添加key,给每个元素添加身份识别。
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    以上是 微信小程序WXML模板文件

    展开全文
  • (2)WXML简介 (3)标签闭合、敏感性 (4)数据驱动 (5)数据绑定{{}}—{{}} (6)列表渲染v-for----wx:for 页面根元素 根元素page 每一个页面都具备一个根元素: 页面根元素可以在控制台的WXML选项卡中看到 允许...

    大纲

    (1)页面根元素
    (2)WXML简介
    (3)标签闭合、敏感性
    (4)数据驱动
    (5)数据绑定{{}}—{{}}
    (6)列表渲染v-for----wx:for

    页面根元素

    根元素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中的选择器是大小写敏感:
    在这里插入图片描述
    WXML和 HTML 非常相似,WXML 由标签、属性等等构成。但是也有很多不一样的地方,下面来一一阐述一下:
    (1)标签名不一致
    HTML 经常会用到的标签是 div, p, span,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如弹窗等等。既然都需要这些组件,那干脆把这些常用组件包装起来,大大提高开发效率。
    小程序的 WXML 用的标签是 view, button, text ,map等等,这些标签就是小程序给开发者包装好的,此外还提供了地图、视频、音频等等组件。

    WXML属性

    (2)属性不一致
    属性:WXML多出wx:if、wx:for等一些属性及表达式
    在网页的一般开发流程中,通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化响应用户的行为。
    MVVM模式:用户点击某个按钮的时候,可以通过JS操作DOM。当项目越来越大的时候,代码会充斥着非常多的界面交互逻辑,这显然不是一个很好的开发模式,因此就有了 MVVM 开发模式(例如 React, Vue),提倡把渲染和逻辑分离。
    MVVM模式:简单来说就是不要再让 JS 直接操控 DOM,JS 只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
    小程序的框架也是用到了这个思路,例如数据绑定案例。

    数据data初始化:
    ①页面需要显示动态数据必须要定义到data对应的变量中;
    ②如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,语法为this.setData({属性名:属性值})
    ③获取data数据语法为this.data.属性名
    数据

    数据的定义:data选项里—键值对
    数据操作:this.setData({})
    数据获取:this.data.属性名

    WXML基本标签

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

    标签

    文本标签

    功能:基本文本信息,类似于标签

    WXML属性

    (2)属性不一致
    数据绑定案例。
    在这里插入图片描述

    WXML属性操作

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

    按钮点击操作
    单击:bindtap
    事件绑定:
    在这里插入图片描述
    添加按钮操作,控制显隐

    在这里插入图片描述
    此时便可以通过按钮控制显隐
    (4)数据驱动案例
    在原来基础上新增按钮文本切换
    在这里插入图片描述

    WXML属性

    数据绑定:
    通过Mustache 即双大括号{{}}语法把变量绑定到界面上,称为数据绑定。

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

    WXML语法—数据绑定

    WXML 中的动态数据均来自对应 Page 的 data

    (1)文本绑定
    在这里插入图片描述
    data初始化数据中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (2)属性绑定(class、id、style等属性动态绑定)
    在这里插入图片描述
    data初始化数据中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    3)算术运算
    WXML的文本插值可以进行算术运算
    在这里插入图片描述
    data初始化数据中
    在这里插入图片描述
    (4)三目运算/三元运算
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (5)字符串运算
    在这里插入图片描述
    data初始化数据
    在这里插入图片描述

    WXML语法—列表渲染

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

    案例:用户名单
    在这里插入图片描述
    指定变量名
    wx:for-item 可以指定数组当前元素的变量名
    wx:for-index 可以指定数组当前下标的变量名
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    列表渲染案例
    9*9乘法表
    在这里插入图片描述
    data初始化数据
    在这里插入图片描述
    在这里插入图片描述
    标签
    如果不想要标签多层嵌套,可以在外层使用
    标签进行嵌套,block不会渲染读取出来
    在这里插入图片描述
    wx:key属性
    wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符

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

    当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
    接下来结合switch开关按钮,体会下wx:key的作用
    在这里插入图片描述
    初始化数据data
    在这里插入图片描述
    此时,每个switch按钮都被view嵌套者,如果不想用嵌套语法,可以在外层用block标签
    在这里插入图片描述
    添加操作按钮
    在这里插入图片描述
    注意:小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果
    添加操作按钮
    在这里插入图片描述
    点击添加按钮后发现,之前给开关1绑定的开属性被新开关取代,没有实时跟踪到自身,所以需要添加key,给每个元素添加身份识别。
    在这里插入图片描述

    展开全文
  • 微信小程序(WXML模板文件一)

    千次阅读 2019-11-13 17:30:09
    (2)WXML简介 (3)标签闭合、敏感性 (4)数据驱动 (5)数据绑定{{}}—{{}} (6)列表渲染v-for----wx:for 一、页面根元素 每一个页面都具备一个根元素:。 页面根元素可以在控制台的Wxml选项卡中看到。 允许在...

    课程大纲

    (1)页面根元素
    (2)WXML简介
    (3)标签闭合、敏感性
    (4)数据驱动
    (5)数据绑定{{}}—{{}}
    (6)列表渲染v-for----wx:for

    一、页面根元素

    1. 每一个页面都具备一个根元素:。
    2. 页面根元素可以在控制台的Wxml选项卡中看到。
    3. 允许在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中的选择器是大小写敏感

    在这里插入图片描述

    WXML与HTML的区别

    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),提倡把渲染和逻辑分离。
    • MVVM模式:简单来说就是不要再让 JS 直接操控 DOM,JS 只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
    • 小程序的框架也是用到了这个思路,例如数据绑定案例。
    • 数据data初始化:
      ①页面需要显示动态数据必须要定义到data对应的变量中;
      ②如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,语法为this.setData({属性名:属性值})
      ③获取data数据语法为this.data.属性名
    • 数据
      ①数据的定义:data选项里—键值对
      ②数据操作:this.setData({})
      ③数据获取:this.data.属性名
      在这里插入图片描述

    WXML基本标签

    视图容器标签

    功能:基本视图容器,类似于页面开发时的

    标签

    文本标签

    功能:基本文本信息,类似于标签

    WXML属性操作

    数据驱动案例

    在这里插入图片描述
    添加按钮操作,控制显隐,此时便可以通过按钮控制显隐
    在这里插入图片描述
    在原来基础上新增按钮文本切换
    在这里插入图片描述

    拓展

    按钮点击操作→单击:bindtap→事件绑定:
    在这里插入图片描述

    WXML属性

    数据绑定:

    通过Mustache 即双大括号{{}}语法把变量绑定到界面上,称为数据绑定

    属性:

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

    WXML语法—数据绑定

    WXML 中的动态数据均来自对应 Page 的 data

    1. 文本绑定
    <view>{{message}}</view>
    

    data初始化数据中

    data: {
        message: '初始化数据data'
      }
    

    渲染结果

    <view>初始化数据data</view>
    
    1. 属性绑定(class、id、style等属性动态绑定)
    <view id="{{viewIdValue}}" class="demo-{{num}}">{{message}}</view>
    

    data初始化数据中

      data: {
        message: '初始化数据data',
        viewIdValue: 'demoId',
        num: 0
      }
    

    渲染结果

    <view id="{{viewIdValue}}" class="demo-{{num}}">初始化数据data</view>
    
    1. 算数运算
      WXML的文本插值可以进行算术运算
    <view>小明一共{{a+b}}分,小红一共{{c+d}}分</view>
    

    data初始化数据中

      data: {
        a: 80,
        b: 66,
        c: 92,
        d: 98
      }
    

    渲染结果

    <view>小明一共146分,小红一共190分</view>
    
    1. 三目运算符/三元运算
    <view>{{2>3?"结果一":"结果二"}}</view>
    

    渲染结果

    <view>结果二</view>
    
    1. 字符串运算
    <view>{{"你好,"+name}}</view>
    

    data初始化数据中

      data: {
        name: '二狗'
      }
    

    渲染结果

    <view>你好,二狗</view>
    

    WXML语法—列表渲染

    • 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
    • 默认:数组的当前项的下标默认为 index,当前项默认为 item
    • 案例:用户名单
    <view wx:for="{{personList}}">
    {{index}}-{{item.name}}-{{item.sex}}-{{item.age}}
    </view>
    
      data: {
        personList:[
          { name: '熊大', sex: '雄', age: 18 },
          { name: '熊二', sex: '雄', age: 15 },
          { name: '光头强', sex: '男', age: 26 }
        ]
      }
    
    <view>0-熊大-雄-18</view>
    <view>1-熊二-雄-15</view>
    <view>2-光头强-男-26</view>
    

    指定变量名

    wx:for-item 可以指定数组当前元素的变量名
    wx:for-index 可以指定数组当前下标的变量名

    <view wx:for="{{personList}}" wx:for-item="person" wx:for-index="personIndex">
    {{personIndex}}-{{person.name}}-{{person.sex}}-{{person.age}}
    </view>
    
    <view>0-熊大-雄-18</view>
    <view>1-熊二-雄-15</view>
    <view>2-光头强-男-26</view>
    

    列表渲染案例:9*9乘法表

    在这里插入图片描述

    <view wx:for="{{numList}}" wx:for-item="i">
      <view wx:for="{{numList}}" wx:for-item="j">
        <view wx:if="{{i <= j}}">
        {{i}} * {{j}} = {{i*j}}
        </view>
      </view>
    </view>
    
      data: {
        numList:[1,2,3,4,5,6,7,8,9]
      }
    

    标签

    如果不想要标签多层嵌套,可以在外层使用
    标签进行嵌套,block不会渲染读取出来

    <block wx:for="{{numList}}" wx:for-item="i">
      <block wx:for="{{numList}}" wx:for-item="j">
        <view wx:if="{{i <= j}}">
        {{i}} * {{j}} = {{i*j}}
        </view>
      </block>
    </block>
    

    在这里插入图片描述

    wx:key属性

    • wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符
    • 如果不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
    • 当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
    <view wx:for="{{switchList}}">
    {{item.name}}-<switch></switch>
    </view>
    
      data: {
        switchList:[
          {name: '开关1'},
          { name: '开关2' },
          { name: '开关3' }
        ]
      }
    

    在这里插入图片描述
    此时,每个switch按钮都被view嵌套者,如果不想用嵌套语法,可以在外层用block标签
    在这里插入图片描述
    添加按钮操作

    <block wx:for="{{switchList}}" wx:key="name">
    {{item.name}}-<switch></switch>
    </block>
    <button bindtap="addSwitch">添加</button>
    
    // 添加switch按钮
    addSwitch(){
      const newArr = [{
        name: '新开关' + (this.data.switchList.length+1)
      }];
      this.setData({
        switchList:newArr.concat(this.data.switchList)
      })
    }
    

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

    点击添加按钮后发现,之前给开关1绑定的开属性被新开关取代,没有实时跟踪到自身,所以需要添加key,给每个元素添加身份识别。

    <block wx:for="{{switchList}}" wx:key="name">
    {{item.name}}-<switch></switch>
    </block>
    

    在这里插入图片描述

    展开全文
  • (2)WXML简介 (3)标签闭合、敏感性 (4)数据驱动 (5)数据绑定{{}}—{{}} (6)列表渲染v-for----wx:for 页面根元素 根元素page 每一个页面都具备一个根元素: 页面根元素可以在控制台的WXML选项卡中看到 允许...

    微信小程序(WXML模板文件一)

    (1)页面根元素
    (2)WXML简介
    (3)标签闭合、敏感性
    (4)数据驱动
    (5)数据绑定{{}}—{{}}
    (6)列表渲染v-for----wx:for

    页面根元素

    根元素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中的选择器是大小写敏感:
    在这里插入图片描述
    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),提倡把渲染和逻辑分离。

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

    数据data初始化
    ①页面需要显示动态数据必须要定义到data对应的变量中;
    ②如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,语法为this.setData({属性名:属性值})
    ③获取data数据语法为this.data.属性名

    数据
    数据的定义:data选项里—键值对
    数据操作:this.setData({})
    数据获取:this.data.属性名

    WXML基本标签

    在这里插入图片描述
    (2)属性不一致
    数据绑定案例。
    在这里插入图片描述
    (3)数据驱动案例
    wx:if属性决定是否渲染,注意wx:if后值通过{{}}绑定
    在这里插入图片描述
    (3)数据驱动案例
    在这里插入图片描述
    (3)拓展

    按钮点击操作
    单击:bindtap
    事件绑定:

    在这里插入图片描述
    (3)数据驱动案例
    添加按钮操作,控制显隐
    在这里插入图片描述
    此时便可以通过按钮控制显隐

    (4)数据驱动案例
    在原来基础上新增按钮文本切换

    在这里插入图片描述
    在这里插入图片描述

    WXML属性

    数据绑定:
    通过Mustache 即双大括号{{}}语法把变量绑定到界面上,称为数据绑定。

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

    接下来介绍下WXML属性

    WXML语法—数据绑定

    WXML 中的动态数据均来自对应 Page 的 data

    (1)文本绑定
    在这里插入图片描述
    data初始化数据中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (2)属性绑定(class、id、style等属性动态绑定)
    在这里插入图片描述
    data初始化数据中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (3)算术运算
    WXML的文本插值可以进行算术运算

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

    WXML语法—列表渲染

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

    案例:用户名单
    在这里插入图片描述
    在这里插入图片描述
    指定变量名
    wx:for-item 可以指定数组当前元素的变量名
    wx:for-index 可以指定数组当前下标的变量名
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    列表渲染案例
    9*9乘法表

    在这里插入图片描述
    data初始化数据
    在这里插入图片描述
    在这里插入图片描述
    < block>标签
    如果不想要标签多层嵌套,可以在外层使用
    < block>标签进行嵌套,block不会渲染读取出来
    在这里插入图片描述
    在这里插入图片描述
    wx:key属性
    wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符

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

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

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

    在这里插入图片描述
    初始化数据data
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    wx:key属性
    此时,每个switch按钮都被view嵌套者,如果不想用嵌套语法,可以在外层用block标签
    在这里插入图片描述
    wx:key属性
    添加操作按钮

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

    wx:key属性
    添加操作按钮

    在这里插入图片描述
    点击添加按钮后发现,之前给开关1绑定的开属性被新开关取代,没有实时跟踪到自身,所以需要添加key,给每个元素添加身份识别。
    在这里插入图片描述

    如有问题或者疑问请留言联系小编!!!!

    感谢来访!!!!

    展开全文
  • 一、页面根元素page 每一个页面都具备一个根元素:<...二、WXML简介 全称: WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言。 对比: 网页编程采用的是 HTML + CSS + JS 这样的组合。 在...
  • wxml引用介绍

    2018-10-26 17:44:04
    WXML 提供两种文件引用方式import和include。   import import在该文件中使用目标文件定义的template中如: ...在 item.wxml 中定义了一个叫item的template: ...在 index.wxml 中引用了 item.wxml,就可以使用ite...
  • WXML的详解

    2008-01-27 12:24:08
    WXML 是一种基于Web服务的工作流标志语言 ....
  • 微信小程序----WXML

    2019-08-15 19:43:39
    简介 全称: WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言。 WXML 文件后缀名是 .wxml,语句在语法上同 HTML 非常相似 标签闭合编译: WXML 要求标签必须是严格闭合的,没有闭合将会导致编译...
  • 网页编程的多种方式中,HTML + CSS + JavaScript 算是... 微信小程序也采用类似的方式,只是 WXML 充当的就是 HTML 的角色,而 WXSS 承担 CSS 的职责。 今天的内容小程序构成的第二篇,介绍 WXML 页面文件和 WXSS...
  • 简介2.安装3.主要用法3.1启动/切换Outline预览3.2编辑视图切换3.3图形操作3.3.1基本图元3.3.2基础操作3.3 搜索与代码跳转3.4 Wxml文件刷新 1.简介 今天向大家推荐一个微信小程序可视化预览插件Outline For Wxml。 ...
  • 微信小程序WXML语法介绍

    千次阅读 2019-03-24 19:48:39
    WXML 介绍 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。 打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 ...
  • 简介 WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言 对比: 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来...
  • 微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解,主要是由八大类基础...
  • 一、简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构...
  • 根据微信官方小程序文档注释 https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html ...Mustache 语法 简介https://blog.csdn.net/liangtaox8/article/details/100697480 内容 <view>
  • 微信开发者工具&WXML+WXSS学习笔记

    千次阅读 多人点赞 2020-07-31 00:17:44
    WXML+WXSS学习笔记 by wyc 小程序下载以及使用 浏览器搜索微信小程序api即可找到官网 在设置/外观设置 中可以调整开发者工具的颜色以及主题,推荐深色,搭配浅色的语法高亮 文件介绍 pages、app.js都是必不可少的 ...
  • 1.单击开发----开发工具---开发者工具---下载---选择对应自己电脑系统版本下载应用 2.将下载好的应用双击,接受用户协议,安装目录可自愿修改,之后进行安装。 3....想要了解更多微信工具的使用&#...
  • 微信小程序文档里看不到的小Tips 前几天折腾了下。然后列出一些实验结果,供大家参考。...0. 使用开发工具模拟的和真机差异还是比较大的。...1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的。
  • 一、wxml文本介绍 此处只列举了一些常用的标签 具体可查阅 微信小程序开放文档 1、<text> text 相当于 web 的 span 标签 行内元素 不会换行 小程序 只有 text能长按复制 <!-- 1 长按文字复制 selectable ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,273
精华内容 509
关键字:

wxml简介