营销型网站建设用途,门户网站产品设计方案,互联网项目计划书,外贸模板网站WXML#xff08;WeiXin Markup Language#xff09;是框架设计的一套标签语言#xff0c;可以与各种组件相结合#xff0c;进行页面构建。
一 常用标签
wxml的语法结构与我们熟悉的html很像#xff0c;但在细节处略有不同#xff0c;我们可以参考html标签对比记忆。wxm…WXMLWeiXin Markup Language是框架设计的一套标签语言可以与各种组件相结合进行页面构建。
一 常用标签
wxml的语法结构与我们熟悉的html很像但在细节处略有不同我们可以参考html标签对比记忆。wxml中最经常使用的标签无异于是view标签它就相当于html中的div标签可以进行区域的分隔同样是块级元素。
我们可以新建一个页面尝试添加如下两行代码
view我是第一句话/view
view我是第二句话/view 可以看到在页面上这两行话分别出现在了两行里由此可见view是一个块级元素会自动换行。
接下来是我们之前已经见到过的text标签它相当于span标签是一个行内元素。我们尝试把上面两行代码中的标签换成text。 可以看到这两行文字出现在了同一行。
同样wxml里也有checkbox、radio、img等标签基础用法与html一样这里我们先不做过多讲解在后面的组件部分再进行其扩展功能的详细介绍。
二 数据类型
wxml支持的数据类型也很常见如字符串、数字、布尔、对象、表达式等我们直接用几个例子进行说明。 !-- 1 字符串 --view{{msg}}/view!-- 2 数字类型 --view{{num}}/view!-- 3 boolean类型 --view是否为空{{isEmp}}/view!-- 4 对象类型 --view{{person.name}}/viewview{{person.age}}/view!-- 5 在标签的属性中使用 --view data-num{{num}}自定义/view!-- 6 使用Boolean类型充当属性默认被选中 --viewcheckbox checked//view!-- 7 表达式 --!-- 可以在{{}}中加入表达式数字运算字符串拼接逻辑运算三元表达式.... --view{{1 1}}/viewview{{10 % 2}}/viewview{{11 22}}/viewview{{10 % 2 0 ? 偶数 : 奇数}}/view 这里的{{}}和vue语法中的用法相同表示插值{{}}的值将会被替代为对应 data 对象上对应属性的值。无论何时绑定的数据对象属性发生了改变插值处的内容都会更新。也就是说我们需要在data数组中存放对应的属性具体代码如下
data: {msg:hello mina,num:10000,isEmp:false,person:{age:72,height:123,name:张三},list:[{id:0,name:zhangsan},{id:1,name:lisi},{id:2,name:wangwu},{id:3,name:zhaoliu}]}
效果如下 三 循环 列表渲染
我们可以在组件上使用 wx:for 控制属性绑定一个数组从而使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index数组当前项的变量名默认为 item。 wx:for{{数组或对象}} wxfor-item循环项的名称 wxfor-index循环项的索引 wx:key唯一值 view数组循环/view
view wx:for{{list}} wx:for-itemitem wx:for-indexindex wx:keyid索引{{index}}值{{item.name}}/viewview对象循环/view
view wx:for{{person}} wx:for-itemvalue wx:for-indexkey属性{{key}}值{{value}}
/view
我们也可以使用wxfor进行嵌套如下代码功能为写一个九九乘法表
view wx:for{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}} wx:for-itemiview wx:for{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}} wx:for-itemjview wx:if{{i j}}{{i}} * {{j}} {{i * j}}/view/view
/view四 判断条件渲染
我们可以在组件中使用 wx:if来判断是否需要渲染该代码块也可以用 wx:elif 和 wx:else 来添加一个 else 块。 语法wx:if {{true/false}} !-- wx:if {{true/false}} --viewview条件渲染/viewview wx:if{{true}}显示/viewview wx:if{{false}}隐藏/viewview wx:if{{false}}1/viewview wx:elif{{false}}2/viewview wx:else3/view/view 在wxml中还可以使用hidden来控制组件的显示与否。具体用法为 1在标签上直接加上hidden view hidden 01/view 2使用hidden“{{true}}” view hidden {{true}} 01/view
我们可以看到wxif与hidden都可以实现隐藏元素的功能那么它们有什么区别呢 wx:if 以动态创建和移除元素的方式控制元素的展示与隐藏 hidden 以切换样式的方式display: none/block;控制元素的显示与隐藏 由于hidden是以设置display来实现功能的因此hidden与display样式不能同时使用。
在实现业务时我们也可以根据两者的特性来选择优先使用哪种方式来隐藏元素。 当标签不是频繁的切换显示优先使用wxif直接把标签从页面移除掉否则优先使用hidden通过切换样式的方式切换显示 五 数据绑定
在wxml中数据绑定可以分成两步 1.在 data中定义数据 2.在WXML中使用数据 有没有觉得很眼熟我们在学习数据类型的时候其实就已经用到了数据绑定。
具体而言就是要把我们需要的数据首先在页面对应的 .js 文件中定义到 data 对象中之后到wxml页面中进行渲染在需要使用该变量的地方使用 Mustache 语法{{}}将变量名包起来即可。 通过数据绑定我们可以绑定内容、属性还可以做一些简单的运算字符串拼接、数字运算、三元运算符。
在wxml页面中添加如下代码
viewview绑定内容{{content}}/view view绑定属性img src{{src}} //viewview绑定运算{{num1}}1/view
/view
在data中添加如下数据
data: {num:1,content:我是要绑定的内容~,src:https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?riksQ%2fKoYAcr%2bOwswriuhttp%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpgehkHxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3drislpidImgRawr0},
可以看到效果如下 六 事件绑定
事件就是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理。例如鼠标点击时可以添加事件输入框输入文本时也可以添加事件。我们经常见到的点击提交按钮出现弹框提示“提交成功”就是通过事件实现的。 我们接下来通过一个小案例来完成对事件绑定的学习。 为页面添加一个输入框要求用户在输入框输入数字后可以立刻在页面上显示出来用户输入的内容。 这是一个非常常见的事件绑定案例 实现思想就是在文本框上绑定输入事件当有文本输入时就调用事件函数通过事件源对象获取输入内容并赋值给data中的数据再通过数据绑定将其显示在页面上。
首先我们先搞一个输入框和负责回显数字的view标签并为输入框绑定输入事件bindinput这里补充一下另两个事件点击事件bindtap和状态改变时事件bindchange。事件函数名为handleInput。
input typetext bindinputhandleInput/
view{{num}}/view
之后就是在data中添加num数据以及完善我们handleInput函数的内部逻辑了。 data: {num:0}
首先在data中添加变量num赋初值为0。
handleInput(e){// console.log(e.detail.value);this.setData({num:e.detail.value})}
然后在与data并列的位置添加函数handleInput 将事件源对象获取的输入内容赋值给num。这里需要额外注意一下赋值的方式是通过setData进行赋值的而不是我们常用的this.data.num xx或this.num xx 。
可以看到我们的页面刚开始是左边这样的当我们在上方的文本框中输入数字后下面的数字就会跟着改变了 那么问题升级你能否在页面上添加两个按钮实现点击按钮就能数字的加一减一功能呢
button bindtaphandleTap data-operation{{1}}/button
button bindtaphandleTap data-operation{{-1}}-/button
首先我们先加入两个按钮增加我们之前提到过的点击事件bindtap绑定事件函数。这里需要额外注意我们不能通过函数名的形式直接传参但是可以用自定义属性的方式进行参数传递这里我们定义属性data-operation。在函数中使用const关键字定义常量operation接受传递过来的值。
handleTap(e){// 获取自定义属性operationconst operation e.currentTarget.dataset.operation;this.setData({num:this.data.num operation})}
这里的核心思路就是将num的值改为当前值加上传递过来的参数值。 关于wxml的基础语法介绍就介绍这么多啦老规矩更多的内容可以到官方文档WXML 语法参考 / 介绍 (qq.com) 中查看。下一篇我们一起学习样式的设计和更多的标签~
