学习微信小程序day02-WXML与WXSS的模板语法

一、wxml 模板语法

---

Mustache语法格式
使用Mustache语法(双大括号)将变量包裹起来即可。语法如下：

<view>{
   
   {要绑定的数据名称}}</view>

Mustache语法的应用场景

• 绑定内容
• 绑定属性
• 运算(三元运算、算术运算等)

1.1 数据绑定的基本原则

---

1. 在data中定义数据;
2. 在wxml中使用数据；

1.2 wxml - 数据绑定

---

在页面对应的.js文件中，在data对象中定义数据：

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        // 字符串类型数据
        info:"我爱重庆！",
        // 数值类型数据
        num:0,
        // 数组类型数据
        arrayList:[
            {
    
    msg:"你好，朋友！"},
            {
    
    msg:"重庆火锅真香~~！"}
        ]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
    
    

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
    
    

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
    
    

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
    
    

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
    
    

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
    
    

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
    
    

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
    
    

    }
})

在wxml模板中使用数据：

<!--pages/test/test.wxml-->
<!-- 将data中的数据渲染到此页面 -->
<!-- 字符串类型 -->
<view>{
   
   {info}}</view>
<!-- 数值类型 -->
<view>{
   
   {num}}</view>
<!-- 数组类型 -->
<view wx:for="{
     
     {arrayList}}" wx:for-index="key" wx:for-item="value">
{
   
   {key}}--{
   
   {value.msg}}
</view>

1.3 动态绑定属性

---

在页面对应的.js文件中，在data对象中定义数据：

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        // 在模板中动态使用属性
      imgUrl:"http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202211/9d331a82d36c5410179d81c29f4a01d4--1763147845.jpg"
    },
     
})

在wxml模板中使用数据：

<!--pages/test/test.wxml-->
<!--动态绑定属性，记得使用{
    
    {
    
    }}插值语法-->
<image src="{
    
    {imgUrl}}" mode=""/>

运行截图：

1.4 三元运算符的使用

---

在页面对应的.js文件中，在data对象中定义数据：

// pages/test/test.js
Page({
    
    
 /**
     * 页面的初始数据
     */
    data: {
    
    
        // 用于测试三元运算符
      randNum:Math.random()*10//生成10以内的随机数
    },
     
})

在wxml模板中使用数据：

<!--pages/test/test.wxml-->
<view>
{
    
    {
    
    randNum>=5?"随机数大于或等于5":"随机数小于5"}}
</view>

运行截图：

1.5 条件渲染

---

1.5.1 wx:if

在小程序中，使用wx:if="{condition}}"来判断是否需要渲染该代码块:

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        condition:true
    }
})

<!-- 条件渲染 -->
<view wx:if="{
     
     {condition}}">True</view>

也可以用wx:elif和WX:else来添加else判断:

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        type:1
    }
})

<!--pages/test/test.wxml-->
<!-- 条件渲染 -->
<view wx:if="{
     
     {type === 1}}">男</view>
<view wx:elif="{
     
     {type === 2}}">女</view>
<view wx:else>保密</view>

1.5.2 结合<block>使用wx:if

如果要一-次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性,示例如下:

<!-- block包裹，条件渲染:block不会被渲染到页面 -->
<block wx:if="{
     
     {true}}">
	<view>view1</view>
	<view>view2</view>
</block>

注意: 并不是一一个组件, 它只是一一个包裹性质的容器，不会在页面中做任何渲染。

1.5.3 hidden - 隐藏

在小程序中，直接使用hidden="{ { condition }}"也能控制元素的显示与隐藏:

// pages/test/test.js
Page({
    
    
    /**
     * 页面的初始数据
     */
    data: {
    
    
        condition:false,
    }
})

<!--pages/test/test.wxml-->
<!-- 使用hidden控制显示与隐藏 -->
<view hidden="{
     
     {condition}}">条件为true隐藏，条件为false显示</view>

1.5.4 wx:if与hidden的对比

1. 运行方式不同

• wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
• hidden 以切换样式的方式(display: none/block;)，控制元素的显示与隐藏

2. 使用建议

   ● 频繁切换时， 建议使用hidden
   ● 控制条件复杂 时，建议使用wx:if搭配Wx:elif、Wx:else 进行展示与隐藏的切换心

1.6 列表渲染

---

1.6.1 wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构,语法示例如下:

<!--pages/test/test.wxml-->
<!-- 循环列表渲染：wx:for -->
<view wx:for="{
     
     {arrayList}}">
 索引是：{
   
   {index}}--当前项是：{
   
   {item}}
</view>

默认情况下，当前循环项的索引用index表示;当前循环项用item表示。

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        arrayList:['华为','小米','苹果']
    },

})

1.6.2 手动指定索引和当前项的变量名*

• 使用wx:for-index可以指定当前循环项的索引的变量名

• 使用wx:for-item可以指定当前项的变量名

<!--pages/test/test.wxml-->
<!-- 循环列表渲染： 手动指定索引和当前项的变量名* -->
<view wx:for="{
     
     {arrayList}}" wx:for-index="idx" wx:for-item="itemName">
 索引是：{
   
   {idx}}--当前项是：{
   
   {itemName}}
</view>

1.6.3 wx:key的使用

类似于Vue列表渲染中的:key,小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率，示例代码如下:

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        userList:[
            {
    
    id:1,name:'小明'},
            {
    
    id:2,name:'小王'},
            {
    
    id:3,name:'小宋'}
        ]
    },
})

<!--pages/test/test.wxml-->
<!-- 循环列表渲染：  wx:key的使用,key不需要使用插值语法 -->
<view wx:for="{
     
     {userList}}" wx:key="id" >
 {
   
   {item.name}}
</view>

二、wxss模板样式

---

2.1 什么是WXSS

WXSS (WeiXin Style Sheets)是一套样式语言 ，用于美化WXML的组件样式,类似于网页开发中的CSS。

2.2 WXSS和CSS的关系

WXSS具有CSS大部分特性,同时，WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发。与CSS相比，WXSS扩展的特性有:

• rpx尺寸单位
• @import 样式导入

2.3 rpx

---

2.3.1 什么是rpx尺寸单位

rpx ( responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位。

2.3.2 rpx的实现原理

rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配，rpx 把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)。

• 在较小的设备 上，1rpx 所代表的宽度较小
• 在较大的设备 上, 1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。

2.3.3 rpx与px之间的单位换算*

在iPhone6上，屏幕宽度为375px,共有750个物理像素，等分为750rpx。则:
750rpx= 375px = 750物理像素
1rpx=0.5px = 1物理像素

建议:开发微信小程序时,推荐使用iPhone6作为视觉稿的标准。

开发举例:在iPhone6.上如果要绘制宽100px，高20px的盒子,换算成rpx单位，宽高分别为200rpx和40rpx。

2.4 @import的语法格式

---

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下:

/* pages/test/test.wxss */
/* 导入公共样式表,导入语句一定要用 ; 号结束 */
@import "../../common/common.wxss";

input{
    
    
	border: 2px solid rgb(32, 32, 32);
	padding: 5px;
	margin: 5px;
	border-radius: 3px;
}

使用公共样式表流程

• 在根目录中创建common公共样式表文件夹，在文件夹中创建一个common.wxss样式文件，写入相关样式
• 在页面的.js文件中导入公共样式表文件
• 在页面的wxml模板中的节点上直接使用

<!-- class后面的样式类名就是直接使用的common公共样式表中的样式类名，前提是要在页面的wxss文件中导入 -->
<view wx:for="{
     
     {userList}}" wx:key="id"  class="username">
 {
   
   {item.name}}
</view>

2.5 全局样式和局部样式

---

2.5.1 全局样式

定义在app.wxss中的样式为全局样式，作用于每一一个页面。

2.5.2 局部样式

在页面的.WXSS文件中定义的样式为局部样式，只作用于当前页面。

注意:
①当局部样式和全局样式冲突时，根据就近原则,局部样式会覆盖全局样式
②当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

三、小程序中的-事件

---

3.1 什么是事件

含义： 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

3.2 小程序中的常用事件

---

事件对象的属性列表:当事件回调触发的时候，会收到一-个事件对象event,通常习惯使用e来表示event：

3.3 target和currentTarget的区别

---

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。举例如下:

点击内部的按钮时，点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。此时，对于外层的view来说:

• e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的view组件

3.4 bindtap的语法格式

---

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

• 通过bindtap,可以为组件绑定tap触摸事件，语法如下:

<!--pages/test/test.wxml-->
<button type="primary" bindtap="btnTapHandler">点击我</button>

• 在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event (一般简写成e)来接收:

// pages/test/test.js
Page({
    
    
    // btnTapHandler事件处理函数
    btnTapHandler(e){
    
    //按钮的 tap 事件处理函数
        console.log("我是btnTapHandler事件处理函数！",e);//e是事件参数对象
    }
})

点击按钮之后，就会触发绑定的btnTapHandler事件，如图可以在控制台打印出要输出的文字和事件参数对象e

3.5 在事件处理函数中为data中的数据的赋值

---

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值:
点击之前

点击之后

3.6 事件传参

---

可以为组件提供data-*自定义属性传参,其中* 代表的是参数的名字，示例代码如下:

<button type="primary" bindtap="btnTapAddCount" data-count="{
     
     {10}}">
	事件传参
</button>
<text>事件传参：{
   
   {count}}</text>

Tip:如果data-*=“{ {数字}}”，不使用{ {}}只是“”引号的话，是字符串。

最终:

• info会被解析为参数的名字
• 数值2会被解析为参数的值

在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下:

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
       //计数器
       count:0
    },

    // btnTapAddCount事件处理函数(累加功能)
    btnTapAddCount(e){
    
    
      //dataset 是一个对象，里面包含了所有通过data-* 传递过来的参数项
      console.log(e.target.dataset);   
      //通过 dataset 可以访问到具体参数值
      console.log(e.target.dataset.count);
    }


})

3.7 bindinput 的语法格式

---

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下:
①通过bindinput,可以为文本框绑定输入事件:

<!--pages/test/test.wxml-->
<!-- input输入事件绑定 -->
<input bindinput="inputHandler"/>

②在页面的.js文件中定义事件处理函数:

// pages/test/test.js
Page({
    
    
    //input输入事件处理函数
    inputHandler(e){
    
    
        //e.detail.value 是变化过后的，文本框最新的值
        console.log(e.detail.value);
    }
})

3.8 实现文本框与data中的数据同步

---

3.8.1 实现步骤

1. 定义数据
2. 渲染结构
3. 美化样式
4. 绑定input事件处理函数

3.8.2 定义数据

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
      msg:''
    }
  })

3.8.3 渲染结构

<!--pages/test/test.wxml-->
<!-- input输入事件绑定 -->
<input value="{
     
     {msg}}" bindinput="inputHandler"/>

3.8.4 美化样式

/* pages/test/test.wxss */
input{
    
    
	border: 2px solid rgb(32, 32, 32);
	padding: 5px;
	margin: 5px;
	border-radius: 3px;
}

3.8.5 绑定input事件处理函数

msg变量会随input实时变化

// pages/test/test.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
      
       msg:''
    },

    //input输入事件处理函数
    inputHandler(e){
    
    
        this.setData({
    
    
        //e.detail.value 是变化过后的，文本框最新的值
        msg:e.detail.value
        })
    },

})