w3h5

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11)

WXML(WeiXin Markup Language)

写法:<标签名 属性名="属性名"> </标签名>

注意:小程序是有大小写敏感的,书写的时候注意区分大小写

四个语言特性:

1.数据绑定、组件属性:Mustache

数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:

wxml:

<!--index.wxml-->
<view>
    <text>{{message}}</text>
</view>

js:

// index.js
page({
    data:{
        message: "Hello world"
    }
})

运行结果:

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11) 小程序 第1张

data绑定:

wxml:

<!--index.wxml-->
<view>
    <text data-name="{{theName}}"></text>
</view>

js:

// index.js
page({
    data:{
        theName: "Jack"
    }
})

运行结果:是在控制台查看

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11) 小程序 第2张

组件的属性:

id:组件的唯一标识

class:组件的样式类

style:组件的内联样式

hidden:组件是否显示

data-*:自定义属性

bind*/catch*:组件的事件

2.列表渲染

index:当前元素在数组的下标

items:数组中的当前元素

wx:key:唯一标识符

wx:for:在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

wxml:

<!--index.wxml-->
<view>列表渲染:</view>
<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
        <view>{{index}}:{{item.name}}</view>
    </block>
</view>

js:

// index.js
Page({
    data: {
        items:[
            { name: "商品A" },
            { name: "商品B" },
            { name: "商品C" },
            { name: "商品D" }
        ]
    },
})

运行结果:

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11) 小程序 第3张

3.条件渲染

wx:if / wx:elif / wx:else

Match.random :0-1随机数

Match.floor :向下去整

在框架中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:

wxml:

<!--index.wxml-->
<view>条件渲染:</view>
<view>我帅吗?</view>
<view wx:if="{{condition === 1}}">
  A:帅
</view>
<view wx:if="{{condition === 2}}">
  B:很帅
</view>
<view wx:if="{{condition === 3}}">
  C:非常帅
</view>

js:

// index.js
Page({
    data: {
        condition: Math.floor(Math.random()*3+1)
    },
})

也可以使用 hidden 控制元素的现实和隐藏:

wxml:

<!--index.wxml-->
<view hidden="{{isHidden}}">
    我是谁?
</view>

js:

// index.js
Page({
    data: {
        isHidden:true
    },
})

isHidden 变量是布尔值,通过 truefalse 来控制元素的显隐,这里的 false 就是 hidden="false" 所以元素是显示的。

最终运行结果:

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11) 小程序 第4张

wx:if 的 hidden 的区别:

因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

4.模板引用

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

定义模板

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

<!--index.wxml-->
<text>定义模板</text>
<template name="tempItem">
  <view>
    <view>收件人:{{name}}</view>
    <view>手机号:{{phone}}</view>
    <view>收件人:{{address}}</view>
  </view>
</template>

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

<!--index.wxml-->
<text>使用模板</text>
<template is="tempItem" data="{{...item}}"></template>

js:

// index.js
Page({
    data: {
        item:{
            name: "张三",
            phone: "18888888888",
            address: "中国"
        }
    },
})

运行结果:

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11) 小程序 第5张

模板引用一般有以下两种方式:

import引用:import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 importtemplate

如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

运行结果:

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11) 小程序 第6张

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

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

运行结果:

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11) 小程序 第7张

WXSS 

尺寸:rpx

外联样式导入:@import 

在 index.wxml 写一个 .container 标签,在 index.wxss 文件中 给 .container 设置字体颜色为 红色 ,引入 assets.wxss 文件,在 assets.wxss文件中给 .container 设置一个灰色的边框。

<!--index.wxml-->
<view>WXSS</view>
<view class='container'>
  Hello World!
</view>
<style>
/**index.wxss**/
@import './assets.wxss';
.container{
  color: red;
}
/** assets.wxss **/
.container{
  border-bottom: 2px solid #DDD;
}

可以看到两个文件的设置都起效了。

小程序学习笔记 数据绑定、条件渲染、模板引用(8.11) 小程序 第8张

选择器:

!important :权重无穷,其实并不是选择器,是权重提升。

style :内联选择器,权重 1000

#id :id选择器,权重 100

.class :class选择器,权重 10

element :元素择器,权重 1


赞 (0)
分享到: +More |

评论 沙发

换个身份