微信小程序（3）

1.WXML模板语法——数据绑定

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

后使用：将对象中的数据绑定到页面进行渲染，使用方法Mustache语法：{{XXX}}

Mustache语法可用于：

绑定内容、绑定属性、运算

2.WXML模板语法——事件绑定

小程序常用事件

事件对象的属性

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

①bindtap绑定事件

为data里的数据赋值：this.setData

事件传参：data-*，e.target.dataset.*

②bindinput绑定事件

绑定事件后，使用e.detail.value获取文本框里的值

条件渲染：

判断是否需要渲染代码块

wx:if="{{xxx}}" wx:elf="{{xxx}}" wx:else

结合<block>一次控制多个组件的展示与隐藏，<block>不会被渲染

直接使用hidden='{{xxx}}"也能控制显示与隐藏

注意：

wx:if是动态创建和移除元素

hidden只是添加了display:none/block的样式，并没有移除元素

列表渲染：

wx:for

当前循环项的索引用 index 表示；当前循环项用 item 表示。

wx:key

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

3.WXSS

rpx：

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

样式导入：

@import"xxx";

4.全局配置

window

下拉刷新

enablePullDownRefresh

上拉触底

onReachBottomDistance 

tabBar

用于实现页面的快速切换

分为顶部和底部

注意：

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

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

组成部分

5.网络数据请求

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

①只能请求 HTTPS 类型的接口

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

配置request合法域名

注意事项：

域名只支持 https 协议

域名不能使用 IP 地址或 localhost

域名必须经过 ICP 备案

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