wxml_wxml wxss - CSDN
精华内容
参与话题
  • wxml

    2019-07-24 06:48:55
    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 WXML的语法规则: 所有元素都必须闭合标签; <text>Hello World</text> 所有...

    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。

    • WXML的语法规则:
    • 所有元素都必须闭合标签
      <text>Hello World</text>
    • 所有元素都必须正确嵌套
      <view>(开始标签1)<text>(开始标签2)Hello World</text>(结束标签2)</view>(结束标签1)
    • 属性值必须使用引号包围
      <text id = "myText"(参数值必须使用引号包围) >myText</text>
    • 标签必须使用小写
      <text(小写)>Hello World</text>
    • WXML中连续多个空格会被合并为1个空格
      <text>Hello(此处7个空格)World</text>
      <text>Hello(合并为1个空格) World</text>
    • 共同属性:
      由于某些属性被几乎所有的组建使用,这些属性被抽离出来,形成了组件的共同属性。
    属性名描述注解
    id 组件唯一标识 页面内唯一
    class 组件样式类 在对应的wxss内定义
    style 组件的内联样式 常用语动态样式
    hidden: 组件是否显示 默认显示
    data-* 自定义数据 触发时会进行上报
    hide/catch 组件事件  


    转载于:https://www.cnblogs.com/duanzexun/p/10821321.html

    展开全文
  • 全称:WXML全称是WeiXin Markup Language,是小程序框架设计的标签语言。 WXML文件后缀名是.wxml,语句在语法上同HTMl非常相似 标签闭合编译: wxml要求标签必须是严格闭合的,没有闭合会导致编译错误。 标签写法: ...

    1.根元素page
    每一个页面都具备一个很元素:

    在这里插入图片描述
    全称:WXML全称是WeiXin Markup Language,是小程序框架设计的标签语言。
    WXML文件后缀名是.wxml,语句在语法上同HTMl非常相似
    标签闭合编译:
    wxml要求标签必须是严格闭合的,没有闭合会导致编译错误。
    在这里插入图片描述
    标签写法:
    在这里插入图片描述
    解析结果:
    在这里插入图片描述
    WXML中的属性是大小写敏感:
    在这里插入图片描述
    WXML标签
    (1)标签名不一致
    HTML经常会用到的标签是div、p、span;
    小程序的WXL用的标签是view、button、text等
    WXML属性
    (2)属性不一致
    属性:WXML多出wx:if、wx:for等一些属性及表达式。
    绑定数据案例:
    在这里插入图片描述
    (3)数据驱动案例
    wx:if属性决定是否渲染,注意wx:if后值通过{{}}绑定
    在这里插入图片描述
    添加按钮操作,控制隐藏
    在这里插入图片描述
    在原来基础上新增按钮文本切换
    在这里插入图片描述

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

    标签。
    文本标签

    功能:基本文本信息,类似于标签。
    WXML语法—数据绑定
    WXML 中的动态数据均来自对应 Page 的 data
    (1)文本绑定

    <view>{{message}}</view>
    

    data初始化数据中:message:“初始化数据data”
    渲染结果:<view>初始化数据</view>
    (2)属性绑定(class、id、style等属性动态绑定)

    <view class=“demo-0” id="demId">初始化数据data</view>
    

    data初始化数据中viewIdValue:“demoId”,num:0
    渲染结果:<view class=“demo-0” id="demId">初始化数据data</view>
    (3)算木运算
    WXML的文本插值可以进行算木运算<view>文本内容{{}a+b}</view>
    data初始化数据中:a:2,b:6
    渲染结果:<view>文本内容8</view>
    (4)三目运算

    <view>{{2>3?"one":"two"}}</view>
    

    渲染结果:<view>two</view>
    (5)字符串运算

    <view{{"你好,"+name}}</view>
    

    data初始化数据name:"二蛋"
    渲染结果:<view>你好,二蛋</view>
    WXML语法—列表渲染

    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
    默认:数组的当前项的下标默认为 index,当前项默认为 item
    案例:用户名单
    在这里插入图片描述
    指定变量名:
    wx:for-item 可以指定数组当前元素的变量名
    wx:for-index 可以指定数组当前下标的变量名
    在这里插入图片描述
    渲染结果:
    在这里插入图片描述
    列表渲染案例:
    9*9乘法表
    在这里插入图片描述
    ata初始化数据
    在这里插入图片描述
    在这里插入图片描述

    <block>标签
    

    如果不想要标签多层嵌套,可以在外层使用
    标签进行嵌套,block不会渲染读取出来
    在这里插入图片描述
    wx:key属性
    wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符。
    如果不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
    wx:key属性
    在这里插入图片描述
    初始化数据data
    在这里插入图片描述
    每个switch按钮都被view嵌套者,如果不想用嵌套语法,可以在外层用block标签
    在这里插入图片描述
    添加操作按钮
    在这里插入图片描述
    添加操作按钮
    在这里插入图片描述
    点击添加按钮后发现,之前给开关1绑定的开属性被新开关取代,没有实时跟踪到自身,所以需要添加key,给每个元素添加身份识别。
    在这里插入图片描述

    展开全文
  • 微信小程序(四)-wxml详解

    千次阅读 热门讨论 2018-03-21 14:11:11
    数据绑定wxml中的动态数据均来自对应js文件中page的data在js中访问page的data用this.data 改变data中某个属性的值用setdata方法简单绑定数据绑定使用mustache语法(双大括号)将变量包起来.可以作用于以下区域:1.作用...

    数据绑定

    wxml中的动态数据均来自对应js文件中page的data
    在js中访问page的data用this.data 改变data中某个属性的值用setdata方法

    简单绑定

    数据绑定使用mustache语法(双大括号)将变量包起来.可以作用于以下区域:

    1.作用于内容

    <view>{{message}}</view>
    Page({
    	data:{
    		message:"Hello Wolrd!"
    	}
    })
    

    2.作用于组件属性

    <view id="item-{{id}}"></view>
    Page({
    	data:{
    		id:0
    	}
    })
    

    3.作用于控制属性

    <view wx:if="{{condition}}"></view>
    Page({
    	data:{
    		condition:true
    	}
    })

    运算

    可以在{{}} 内进行简单的运算,支持的有如下几种方式:

    1.三元运算

    <view hidden="{{flag> true :false}}" >Hidden</view>

    2.算数运算

    <view>{{a+b}} +{{c}} +d</view>
    Page({
    	data:{
    	 a:1,
    	 b:2,
    	 c:3
    	}
    })

    3.逻辑判断

    <view wx:if="{{length >5}}"></view>

    4.字符串运算

    <view>{{"hello"+name}}</view>
    Page({
    	data:{
    		name:'MINA'
    	}
    })

    组合

    可以在mustache内直接进行组合,构成新的对象或者数组


    数组组合

    <view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>
    Page({
    	data:{}
    })

    最终组合数组:0,1,2,3,4

    对象组合

    <template is="objectCombine"data="{{for :a ,bar: b}}"</template>
    Page({
    	data:{
    		a:1,
    		b:2
    	}
    })

    也可以用扩展运算符 … 来将一个对象展开

    <template is="objectCombine" data="{{…obj1,…obj2,e:5}}"></template>
    Page({
    	data:{
    		obj1:{
    			a:1,
    			b:2
    		},
    		obj2:{
    			c:3,
    			d:4
    		}
    		
    	}
    })

    最终组合成的对象是(a:1,b:2,c:3,d:4,e:5)


    条件渲染

    wx:if

    在框架中,我们用

    wx:if="{{condition}}">true</view>
    也可以用wx:elif和wx:else来添加一个else块
    <view wx:if="{{length>5}}">1</view>
    <view wx:elif="{{length>2}}">2</view>
    <view wx:else>3</view>
    block wx:If

    因为wx:if 是一个控制属性,需要将她添加到一个标签上,但是如果我们想一次判断多个组件标签,我们可以使用一个</block>标签将多个组件包装起来,并在上班使用wx:if 控制属性

    <block wx:if="{{true}}">
     <view> view1 </view>
     <view> view2</view>
    </block>
    <block/> 不是一个组件,仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性

    列表渲染

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


    <view wx:for="{{items}}">
    	{{index}}:{{item.message}}
    </view>
    Page({
    	data:{
    		items:[{
    			message:'foo',
    		},{
    			message:'bar'
    		}]
    	}
    })
    
    使用wx:for-item 可以指定数组当前元素的变量名

    使用wx:for-index可以指定数组当前下标的变量名

    模板

    wxml提供模板template 可以在模板中定义代码片段,然后在不同的地方调用
    1.定义模板

    使用name属性,作为模板的名字,然后在<template/>内定义代码片段

    <template name="msgItem">
       <view>
    	<text>{{index}}:{{msg}}</text>
    	<text>Time:{{time}}</text>
       <view>
    </template>

    2.使用模板

    使用is属性,声明需要的使用的模板,然后将模板所需要的data传入

    <template is="msgItem" data="{{…item}}"/>
    Page({
    	data:{
    		item:{
    			index:0,
    			msg:'this is a template',
    			time:'2016-09-15'
    		}
    	}
    })

    事件

    事件概述

    事件:用户对界面操作的相应
    绑定事件: 以bind或catch开头,然后跟上事件的类型,如bindtap catchtouchstart
    bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡

    事件对象

    Type 通用事件类型
    Timestamp 该页面打开到触发事件所经历的毫秒数
    Target 触发事件的源组件

    currentTarge 事件绑定的当前组件

    wxml详解

    Dataset 在组件中可以定义数据,这些数据将会通过事件传递给service 书写方式:以data-开头,多个单词由连字符-链接, 不能有大写(大写会自动转成小写),如data_element-type,最终在event.target.dataset中会将字符转成驼峰elementType


    Touches 一个触摸点的数组

    Detail 特殊事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息


    事件分类

    冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递

    非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递


    除上表之外的其他组件自定义事件都是非冒泡事件,如<form/>的submit事件,<input/>的input事件


    引用

    wxml提供两种文件引用方式import 和include 
    import: 可以在该文件中使用目标文件定义的template
    include:可以将目标文件除了<template/>的整个代码引入,相当于拷贝到include位置


    展开全文
  • 微信小程序WXML语法介绍

    千次阅读 2019-03-24 19:48:39
    WXML 介绍 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。 打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 ...

    WXML 介绍

    全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。

    打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件。模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxml 文件,

     

    2.2.1 介绍

    WXML 文件后缀名是 .wxml ,打开 pages/wxml/index.wxml 文件,有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式,简单的 WXML语句在语法上同 HTML 非常相似。

     

    不带有任何逻辑功能的 WXML 基本语法如下:

    <!-- 在此处写注释 -->

     

    <标签名 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签名>

     

    除了一些特殊的属性外,其余属性的格式都是key="value" 的方式成对出现

     

    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

     

    带有属性的图片标签

    <image class="userinfo-avatar" src="./image/a.png" ></image>

     

     

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

     

     

    2.2.2 数据绑定

    WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。

     

    <!--

    {

      time: (new Date()).toString()

    }

    -->

    <text>当前时间:{{time}}</text>

     

    属性值也可以动态的去改变,有所不同的是,属性值必须被包裹在双引号中,如下:

     

     

    需要注意的是变量名是大小写敏感的,也就是说 {{name}} 和 {{Name}} 是两个不同的变量。

     

     

    还需要注意,没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中,如代码2-10所示。

     

     

    2.2.3 逻辑语法

    通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力,除此外还可以在 {{ }} 内进行简单的逻辑运算和算数运算,字符串的拼接,

    {{ }}中还可以直接放置数字、字符串或者是数组

     

     

    2.2.4 条件逻辑

    WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:使用 wx:elif 和 wx:else 来添加一个 else 块:

     

    列表渲染(看不懂在讲什么)

    wx:if 是一个控制属性

     

    2.2.5 列表渲染

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

     

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

     

     

     

    类似 block wx:if ,也可以将 wx:for 用在 <block/> 标签上,以渲染一个包含多节点的结构块。例如:

     

     

    如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容, <switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

    wx:key 的值以两种形式提供:

    1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
    2. 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

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

     

     

    2.2.6 模板

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段,如:

     

    使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如代码2-17所示。

     

    is可以动态决定具体需要渲染哪个模板,如代码2-18所示。

     

    2.2.7 引用

    WXML 提供两种文件引用方式import和include。

    import 可以在该文件中使用目标文件定义的 template,如:

    在 item.wxml 中定义了一个叫 item的 template :

     

    需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。

     

    include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,

     

    2.2.8 共同属性

    所有wxml 标签都支持的属性称之为共同属性,如表所示。

     

     

     

     

     

    展开全文
  • -- 显示文本信息,文本信息保存在全局变量motto里&lt;view class="usermotto"&gt; &...-- 组件 按钮的使用*.WXML &lt;button class="new-btn" bindtap="n
  • WXML——引用

    2018-06-13 21:05:44
    WXML 提供两种文件引用方式import和include。import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的template:&lt;!-- item.wxml --&gt; &lt;template ...
  • -- index.wxml --> <view > <text >hello,</text> <text data-title="{{title}}">{{name}}</text> <view >{{"welcome " + name}}</view> </view> // index....
  • WXML

    万次阅读 2018-04-21 18:03:28
    在小程序中,WXML充当的就是类似HTML的角色。标签名字与HTML有点不同,小程序WXML用的标签是view,button,text等等,这些标签就是小程序给开发者包装好的基本能力,还提供了地图、视频、音频等等组件能力。小程序...
  • 今天系统的记录一下wxml的数据绑定功能。 首先给出wxss样式文件 /* pages/wxml/wxml.wxss */ .wxml-container{ padding: 0 20rpx ; align-items: center; } .topic-group{ background: pink; width: 100%; ...
  • 微信小程序WXML

    千次阅读 2018-04-28 15:05:55
    原文地址:WXML 一、说明 二、数据绑定 2.1 简单绑定 2.2 在 {{}} 内进行简单的运算 2.3 组合 三、列表渲染 3.1 wx:for 3.2 block wx:for 3.3 wx:key 四、条件渲染 4.1 wx:if 4.2 block wx:if 4.3 wx:if vs ...
  • WXML 相关知识点补充

    2020-01-09 19:40:58
    1、WXML 的基本格式 2、Mustache {{ }}语法 3、逻辑判断一wx:if-wx:elif-wx:else 4、逻辑判断二 hidden 属性 5、列表渲染 - wx:for &&block标签 5、模板用法 1、WXML 的基本格式 WXML 类似于 HTML ...
  • 1.事件定义 · 事件是视图层到逻辑层的通讯方式。 · 事件可以将用户的行为反馈到逻辑层进行处理。 · 事件可以绑定在组件...(1)首先在wxml的组件中为button绑定一个事件处理函数 跳转到更多示例(2)在js文件中定义
  • 小程序wxml

    千次阅读 2018-06-26 14:25:18
    微信小程序的html的内容写在了wxml里面。他是用的是封装好的标签view button text数据绑定&lt;view&gt;{{}message}&lt;/view&gt;page({ data:{ message:'hello' }})判断 wx:if wx:elif wx:else&...
  • WXML怎么换行

    万次阅读 2020-04-18 23:54:23
    三种换行方法的结果一样,所以只放一次 ... 换行,但是小程序 wxml 中使用 <br /> 无效,可以换成\n 一定要注意,text中\n才能生效,view里边直接写\n不行 <text>写不完这个小程序,\n要...
  • 微信小程序wxml和wxss样式

    万次阅读 多人点赞 2017-04-18 16:42:51
    微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件...
  • 列表渲染在之前的demo中已经应用过,在这里系统的记录一下。 1.wx:for的使用 (1)首先在js声明两个数组lipsticks和lipsticks2Page({ data: { lipsticks:["YSL13","Dior999"...
  • WXML的详解

    2020-07-24 23:30:16
    WXML 是一种基于Web服务的工作流标志语言 ....
  • 背景:去年小程序很火的时候,有个需求是把官网搬到小程序,然后后来直接放弃官网,有新产品页面的时候直接写到小程序里,但是我明白,终有一天,会把这些页面全部补充到官网中的,作为前端的我,要求自己不仅要快...
  • 背景:我们有时候需要在wxml中使用一些运算,包括但不限于四则运算、三目运算等,我们如果想要使用自定义的一些方法,就需要使用wxs来实现了,下面代码简单介绍了列表中倒计时的实现方法,以及使用wxs把时间戳转换为...
  • wxml解析

    2019-06-28 01:21:36
     wxml中的动态数据均来自于对应js文件中的Page的data,在js中访问Page的data用this.data, 改变data中某个属性的值用setData()方法。  Page({  data: {  id: 0,  message: "hello",  condition:true  }...
1 2 3 4 5 ... 20
收藏数 34,610
精华内容 13,844
关键字:

wxml