微信小程序基础02–WXML,WXSS基础

时间:2020-9-11 作者:admin


1.WXML语法参考

1.1数据绑定

WXML 中的动态数据均来自对应 Page 的 data。数据绑定,js文件里的data属性,在wxml中直接使用{{ }}进行绑定。与vue的写法十分相似。
特别注意:bool类型不要直接写 checked=“false”,其计算结果是一个字符串,转成 boolean 类型后代表真值。
注意:花括号和引号之间如果有空格,将最终被解析成为字符串
微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础

1.2运算

{{}}数据绑定可以是简单的运算表达式,包括数字的加减,字符串拼接,三元表达式。
微信小程序基础02--WXML,WXSS基础

1.3列表渲染

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

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

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供
1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
2. 保留关键字 *this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。

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

微信小程序基础02--WXML,WXSS基础

1.4 block标签占位

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素,只是占位符的一个标签,不代表实际含义。
微信小程序基础02--WXML,WXSS基础

1.5条件渲染

类似vue的v-if,v-else-if,v-else。
wx:if在框架中,使用 wx:if=”” 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elifwx: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>

注意:
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

wx:if vs hidden 控制显示

频繁切换用hidden,不常使用时用wx:if
wx:if是直接把标签从结构中移除,而hidden是通过display:none;样式来控制显示。

微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础

1.6模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

微信小程序基础02--WXML,WXSS基础

使用模板

微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础

引用

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

微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础
示例
注意引用路径,data传值时是单引号

微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础

2.事件的绑定

⼩程序中绑定事件,通过bind关键字来实现。如bindtap,bindinput,bindchange等
不同的组件⽀持不同的事件,具体看组件的说明即可。
js中赋值使用setData({ }),与vue的用法不同。事件传值要用标签自定义属性 data-xxx=””
获取输入框的值为e.detail.value
获取传入的值为e.currentTarget.dataset

handleInput:function(e)里的e为事件源,是一个对象,通常会console.log(e)来查看我们所需要的值的具体位置。

微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础
绑定点击事件,使用的是bindtap
微信小程序基础02--WXML,WXSS基础
微信小程序基础02--WXML,WXSS基础

3.WXSS样式

WXSS(WeiXin Style Sheets)是⼀套样式语⾔,⽤于描述WXML的组件样式。与CSS相⽐,WXSS扩展的特性有:响应式⻓度单位rpx,样式导⼊。

3.1尺寸单位

rpx是微信小程序特有的自适应单位。
微信小程序基础02--WXML,WXSS基础
计算数值时,记得使用calc(),直接写数值的运算无效
微信小程序基础02--WXML,WXSS基础

3.2样式导入

微信小程序基础02--WXML,WXSS基础

3.3选择器

微信小程序基础02--WXML,WXSS基础

3.4小程序中使用less

使用VSCODE可以安装Easy LESS插件,不过默认.less文件保存后编译生成对应的css文件。所以需要加入配置,使得编译成.wxss文件。
微信小程序基础02--WXML,WXSS基础

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。