20200928李权
微信小程序:
WXML语法参考:
数据绑定:
wxml中的动态数据都来子对应单页面Page的data。
简单绑定:
数据绑定使用Mustache语法(双大括号)将变量包起来
<!--在WXML中-->
<view>{{msg}}</view>
<!--在WXS中-->
page({
dataL{
msg:"hello world"
}
})
绑定事件属性:
需要写在双引号内,用双大括号包起来
<view id="item-{{msg}}"></view>
page({
data:{
msg:0
}
})
控制属性(wx:if)
也需要写在双引号内
<view wx:if="{{msf}}"></view>
page({
data:{
msf:true
}
})
关键字(需要写在双引号内)
<checkbox checked="{{true}}"><checkbox>
特别注意:如果我们不加双大括号,比如checked="false",会默认是一个字符串,转换为Boolean为真
运算:
在插值符号里面可以写简单的运算,支持以下几种
三元运算:
<view>{{1>2?true:false}}</view>
算数运算:
<view>{{1+1}}</view>
逻辑判断:
<view wx:if="{{4>3}}"></view>
字符串运算:
<view>li+{{name}}</view>
page({
data:{
name:'quan'
}
})
组合:
可以在{{}}直接进行组合,构建成新的对象或数组
<view wx:for="{{[zer0,1,2,3]}}">{{item}}</view>
page({
data:{
zero:0
}
})
对象:
<template is="tab" data="{{name:name,age:age}}">
page({
data:{
name:'liquan',
age:18
}
})
上面的数据就会组合成一个对象{name:'liquan',age:18}
也可以使用展开语法...来将一个对象展开
注意:上述的方式可以随意组合,但是如果变量名相同,后面的会覆盖前面的
注意:花括号和引号之间如果有空格,将会被解析为字符串,最好不要留空格
列表渲染wx:for
列表渲染就跟我们的for循环一样,
在组件上,wx:for控制属性绑定的是一个数组,,即可使用数组中的各项值重复渲染该组件
默认数组的当前的下标变量默认是index,默认当前的项是item
写法
<block wx:for="{{[1,2,3,4,5]}}">
<template is = "{{item%2==0?'odd':'even'}}"></template>
</block>
使用wx:for-item:可以指定数组当前元素的变量名
使用wx:for-index:可以指定数组当前元素的下标名
注意:wx:for可以嵌套for循环
注意:如果wx:for的值为字符串时,会将字符串解析成字符串数组
条件渲染:
在框架中,使用wx:if来判断是否要渲染该模块
也可以用wx:elif或者wx:else来添加else模块
block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 `标签将多个组件包装起来,并在上边使用
wx:if` 控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意:
wx:if
vs hidden
wx:if如果为假,不会被渲染,也不会占据页面空间,hidden已经渲染了,只是把它隐藏起来
模块:
WXML提供模块(template),它可以在模块中定义代码片段,然后再不同地方调用
定义模版:
使用name属性给模块命名,作为模板的名字,然后在定义代码片段
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
使用模板:
使用is属性,声明需要使用的模板,然后将模板data(数据)传入
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
page({
data:{
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
模板的作用域
模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的
引用:
wxml提供了两种饮用方法:import 和include
import:
import可以在该文件中引入目标文件定义的template模板
import的作用域:
import可以调用在该文件中引入的目标文件,但是不能调用目标文件中import文件的模板
include:
引用除了和
button的绑定事件:
bindtab相当于js中click事件,冒泡事件
catchtab:也相当于click事件,不冒泡事件
页面跳转:
wx.navigateTo,保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回
wx.redirectTo():
关闭当前页面,跳转到非tabBar的某个页面
wx.switchTab()
跳转带tabBar的某个页面,不能跳转到非tabBar之外的页面组件
弹窗的提示信息:
1.模态窗口:
wx.showModal({
title:提示,
content:'提示信息‘,
success(msg){
if(res.confirm){
console.log('弹框后确定')
}else{
console.log('弹窗后消失')
}
}
})
icon:sucess是成功的标志,loading:是加载的状态,none,取消标志的状态。
3.隐藏消息的提示框:
wx.showToast({
title: '加载中',
icon:'loading',
duration:10000
})
setTimeout(function(){
wx.hideToast()
},2000)
评论留言