前端（小程序）学习笔记（CLASS 2）：WXML模板语法与WXSS模板样式

1、数据绑定

数据绑定的基本原则

1、在data中定义数据

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

javascript 复制代码

Page({
    data: {
        //字符串类型的数据
        info: 'init data',
        //数组类型的数据
        msgList: [{msg: 'hello'}, {msg: 'world'}]
    }
})

2、在WXML中使用数据(Mustache语法）

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：

javascript 复制代码

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

3、Mustache语法的应用场景

Mustache语法的主要应用场景如下：

1、动态绑定内容

如上一条内容所示，

2、动态绑定属性

和动态绑定数据的方式一样，通过使用两个大括号就行，此处与vue有所不同

3、运算（三元运算、算术运算等）

三运运算：

页面的数据如下图：

javascript 复制代码

Page({
    data: {
        randomNum: Math.random()*10
    }
})

页面的结构如下：

javascript 复制代码

<view>{{ randomNum >=5 ? '随机数字大于5' : '随机数字小于5' }}</view>

算术运算：

页面数据如上

页面结构如下图：

javascript 复制代码

<view>{{ randomNum*100 }}</view>

2、事件绑定

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

常用的事件：

|--------|------------------------|----------------------------|
| 类型 | 绑定方式 | 事件描述 |
| tap | bindtap或bind:tap | 手指触摸后马上离开，类似于HTML中的click事件 |
| input | bindinput或bind:input | 文本框的输入事件 |
| change | bindchange或bind:change | 状态改变时触发 |

事件对象的属性列表：

当事件回调触发时，会收到一个事件对象event，它的详细属性如下表所示：

|----------------|---------|------------------------|
| 属性 | 类型 | 说明 |
| type | String | 事件类型 |
| timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
| target | Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的一些属性值集合 |
| detail | Object | 额外的信息 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息数组 |

* target和currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数

此时，对于外层的view来说：

1、e.target指向的是触发事件的源头组件。因此，e.target是内部的按钮组件

2、e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件

* bindtap的语法格式

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

1、通过bindtap，可以为组件绑定tap触摸事件，语法如下：

javascript 复制代码

<button type="primary" bindtap="btnTapHandler">按钮</button>

2、在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：

javascript 复制代码

Page({
    btnTapHandler(e) {
        console.log(e)
    }
})

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

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

javascript 复制代码

Page({
    data: {
        count: 0
    },
    
    changeCount() {
        this.setData({
            count: this.data.count + 1
        })
    }
})

* 事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

因为小程序会把事件的属性值，统一当作事件名称来处理

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

javascript 复制代码

<button bindtap="btnHandler" data-info="{{ 2 }}">事件名称</button>

最终，info会被解析为参数的名字，数值2会被解析为参数的值

* bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

1、通过bindinput，可以为文本框绑定输入事件：

javascript 复制代码

<input bindinput="inputHandler"></input>

2、在页面的.js文件中定义事件处理函数：

javascript 复制代码

inputHandler(e) {
    console.log(e.detail.value)
}

* 实现文本框和data之间的数据同步

实现步骤：

1、定义数据

只需在data中添加一个数据

2、渲染结构

javascript 复制代码

<input value="{{ msg }}" bindinput="iptHandler"></input>

3、美化样式

在wxss中对其进行美化

4、绑定input事件处理函数

javascript 复制代码

iptHandler(e) {
    this.setData({
        msg: e.detail.value
    })
}

3、条件渲染

1、wx:if

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

javascript 复制代码

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

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

javascript 复制代码

<view wx:if="{{type === 1}}" >男 </view>
<viwe wx:elif="{{type === 2}}" > 女 </view>
<view wx:else> 保密 </view>

2、结合<block>使用wx:If

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

javascript 复制代码

<block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
</block>

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

3、hidden

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

javascript 复制代码

<view hidden="{{ condition }}"> 条件为true隐藏，条件为false显示</view>

4、wx:if和hidden的对比

1、运行方式不同

wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden以切换样式的方式(display:none/block)，控制元素的显示与隐藏

2、使用建议

频繁切换时，建议使用hidden

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

4、列表渲染

1、wx:for

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

javascript 复制代码

<view wx:for="{{array}}">
    索引是：{{index}} 当前是：{{item}}
</view>

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

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

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

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

示例代码如下：

javascript 复制代码

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    索引是：{{idx}} 当前项是：{{itemName}}
</view>

3、wx:key的使用

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

javascript 复制代码

data: {
    userLiset: [
        {id:1,name:'1'},
        {id:2,name:'2'},
        {id:3,name:'3'}
    ]
}

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

5、WXSS模板语法

1、什么是WXSS

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

2、WXSS和CSS的关系

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

与CSS相比，WXSS扩展的特性有：

1、rpx尺寸单位

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

实现原理为：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分了750份（即当前屏幕总宽度为750rpx）

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

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

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

建议：开发小程序是，设计师可以用iPhone6作为视觉稿的标准

750rpx=375px=750物理像素

1rpx=0.5px=1物理像素

2、@import样式导入

使用WXSS提供的@import语法，可以导入外联的样式表

语法格式：@import后根需要导入的外联样式表的相对路径，用；表示语句结束。示例如下：

javascript 复制代码

@import "common.wxss"
.middle p {
    padding:15px
}

3、全局样式与局部样式

1、全局样式

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

全局配置文件及常用的配置项：

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：

1、pages：记录当前小程序所有页面的存放路径

2、window：全局设置小程序的窗口的外观

小程序窗口分成了：导航栏区域）navigationBar、背景区域（background）、页面的主体区域（用来显示wxml的布局）

window节点常用的配置项

|------------------------------|----------|---------|----------------------------|
| 属性名 | 类型 | 默认值 | 说明 |
| navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | String | white | 导航栏标题颜色 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉loading的样式，仅支持dark/light |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
| onReachBottomDistance | Number | 50 | 页面上啦触底事件触发时距页面底部距离，单位为px |

3、tabBar：设置小程序底部的tabBar效果

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换，小程序中通常将其分为：

底部tabBar、顶部tabBar

注意：

tabBar中只能配置最少2个、最多5个tab页签

当渲染顶部tabBar时，不显示icon，只显示文本

tabBar的6个组成部分：

backgroundColor：tabBar的背景色

selectedIconPath：选中时的图片路径

borderStyle：tabBar上边框的颜色

iconPath：未选中时的图片路径

selectedColor：tab上的文字选中时的颜色

color：tab上文字的默认（未选中）颜色

使用tabBar则需要在app.json中于window平级添加一个tabBar

其中的配置项有：

|-----------------|----------|----|--------|-----------------------------|
| 属性 | 类型 | 必填 | 默认值 | 描述 |
| position | String | 否 | bottom | tabBar的位置，仅支持bottom/top |
| borderStyle | String | 否 | black | tabBar上边框的颜色，仅支持black/white |
| color | HexColor | 否 | | tab上文字的默认（未选中）颜色 |
| selectedColor | HexColor | 否 | | tab上的文字选中时的颜色 |
| backgroundColor | HexColor | 否 | | tabBar的背景色 |
| list | Array | 是 | | tab页签的列表 |

每个tab项的配置选项

|------------------|--------|----|--------------------------------|
| 属性 | 类型 | 必填 | 描述 |
| pagePath | String | 是 | 页面路径，页面必须在pages中预先定义 |
| text | String | 是 | tab上显示的文字 |
| iconPath | String | 否 | 未选中是的图标路径；当posting为top时不显示icon |
| selectedIconPath | String | 否 | 选中时的图标路径 |

4、style：是否启用新版的组件样式

2、局部样式

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

注意：

1、当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

2、当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

6、页面配置

1、页面配置文件的作用

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置

2、页面配置和全局配置的关系

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现

如果某些小程序页面想要拥有特殊的窗口表现，此时，"页面级别的.json配置文件"就可以实现这种需求

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

页面配置常用的配置项：

|------------------------------|----------|---------|----------------------------|
| 属性 | 类型 | 默认值 | 描述 |
| navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | String | white | 导航栏标题颜色 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉loading的样式，仅支持dark/light |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
| onReachBottomDistance | Number | 50 | 页面上啦触底事件触发时距页面底部距离，单位为px |

7、网络数据请求

1、小程序中网络数据请求的限制

处于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制

1、只能请求HTTPS类型的接口

2、必须将接口的域名添加到信任列表中

2、配置request合法域名

需求描述：假设在自己的微信小程序中，希望请求https://www.xxx.cn/域名下的接口

配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项：

1、域名只支持https协议

2、域名不能使用IP地址或localhost

3、域名必须经过ICP备案

4、服务器域名一个月内最多可申请5次修改

3、发起GET请求

调用提供的wx.request()方法，可以发起GET数据请求，示例代码如下：

javascript 复制代码

wx.request({
    url: 'xxx(地址)',
    method: 'GET',
    data: {xxx},
    success: (res) => {
        console.log(res)
    }
})

4、发起POST请求

与上述一致，只不过差了请求方式

javascript 复制代码

wx.request({
    url: 'xxx(地址)',
    method: 'POST',
    data: {xxx},
    success: (res) => {
        console.log(res)
    }
})

5、在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：

javascript 复制代码

onLoad: function(option) {
    this.getSwiperList()
    this.getGridList()
}