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中快速添加注释的方法

    千次阅读 2019-04-08 03:41:56
    wxml中快速添加注释的方法 wxml中快速添加注释的方法 Ctrl+/ 快速添加/删除注释
  • Wxml,事件等

    2019-11-21 09:37:18
    App App只能声明在app.js中 onLaunch(){} //监听小程序的初始化 getApp()去获取全局唯一的app实例 通过getApp()获取实例...WXML Mustache语法 :{{ }} 公共属性:id,class,style,hidden,data-*,bind*/catch* ...
  • wxml引用介绍

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

    万次阅读 2018-04-21 18:03:28
    在小程序中,WXML充当的就是类似HTML的角色。标签名字与HTML有点不同,小程序WXML用的标签是view,button,text等等,这些标签就是小程序给开发者包装好的基本能力,还提供了地图、视频、音频等等组件能力。小程序...
  • 今天来讲解下循环输出元素 : 然后我们自己尝试构建一个for循环输出的小程序 app.js以及app.json app.wxss页面的构造就不放出来了,不会的童鞋可以看博主的第一个小程序文章 初步构造完成如下: ... ...
  • WXML怎么换行

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

    千次阅读 2018-10-26 18:05:39
    文章来源:https://www.shengli.me/wxxcx/124.html 注释 WXS 主要有 3 种注释的方法。 示例代码: ...上述例子中,所有 WXS 代码均被注释掉了。...方法三 和 方法二 的唯一区别是,没有 */ 结束符。... ...
  • 小程序运行报错:“WXML Runtime warning

    千次阅读 2018-10-25 17:56:47
    错误原因: 编译.wxml文件错误,可以在控制台查看信息。 解决方法: 请尝试在控制台输入openVendor() ,清除里面的wcsc wcsc.exe 然后重启工具  
  • 在微信小程序新建项目后会报“wxml文件错误,错误信息:未找到页面 pages/index/index对应的wxml文件”之前新建没有问题遇到这种情况,我是在新建项目时将项目目录选择在带有小程序的文件中,应该点击新建文件夹放在...
  • <text decode="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;整组数据</text>
  • 微信小程序引入模块中wxml、wxss、js

    万次阅读 2017-10-28 00:24:22
    先描述下目录结构,见下图 UI页面见下图 其中ok按键是引入的log模块,log模块非page页 indexButton是index页本身拥有的组件,index页直接导入Log模块中的组件,css,事件响应函数。 显示效果如下 ...
  • 微信小程序中wxml的标签说明

    千次阅读 多人点赞 2018-07-08 18:28:56
    其中wxml文件中的很多标签都需要慢慢的去熟悉,下面我就列出常用的标签及其分类。能够帮助之前没有经历过微信小程序前端开发的同学能够快速熟悉。一、视图容器(View Container):二、基础内容(Basic Content)标签名...
  • 微信小程序--在wxml中设置保留小数位数

    万次阅读 热门讨论 2018-01-04 01:19:31
    wxml中计算价格*数量小数出现问题。需要新建一个wxs文件var filters = { toFix: function (value) { return value.toFixed(2)//此处2为保留两位小数 } } module.exports = { toFix: filters.toFix }在wxml文件...
  • html转化为WXML时 https://vlily.github.io//originality/wxmlto.html
  • 问题描述:由于wxml 及 wxss文件不能直接被识别,因此在vscode中作为纯文本,可以在右下角纯文本出点击修改,然而!在几个页面编辑 需要来回切换,它就偶尔翻脸不认识了,又变回了纯文本,反复改了几次,决定解决掉...
1 2 3 4 5 ... 20
收藏数 31,730
精华内容 12,692
关键字:

wxml