微信小程序Day2笔记

1、WXML模板语法

1. 数据绑定

1. 数据绑定的基本原则

• 在data中定义数据
• 在WXML中使用数据

2. 在data中定义页面的数据

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

3. Mustache语法的格式

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

4. Mustache语法的应用场景

• 绑定内容
• 绑定属性
• 运算（三元运算、算术运算等）

5. 动态绑定内容

{{ info }}
Page({
  data: {
    info: 'helloworld',
  },
})
1
2
3
4
5
6

6. 动态绑定属性

Page({
  data: {
    imgSrc: 'http://www.itheima.com/images/logo.png'
  },
})
1
2
3
4
5
6

7. 三元运算

{{ randomNum >=5 ? '随机数字大于或等于5':'随机数字小于5' }}
Page({
  data: {
    randomNum: Math.random()*10 // 生成10以内的随机数
  },
})
1
2
3
4
5
6

8. 算数运算

{{ randomNum * 100 }}
Page({
  data: {
    randomNum: Math.random().toFixed() // 生成带两位小数的随机数
  },
})
1
2
3
4
5
6

2、事件绑定

1. 什么是事件

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

2. 小程序中常用的事件

3. 事件对象的属性列表

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

4. target和currentTarget的区别

target是触发该事件的源头组件，currentTarget是当前事件所绑定的组件。举例如下：

  

1
2
3

e.target指的是button，但是e.currentTarget是view组件。触摸button通过冒泡，触发了handler事件处理函数。

5. bindtap的语法格式

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

1. 通过bindtap，可以为组件绑定tap触摸事件
   
2. 在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：

btnTapHandler(e) { // 按钮的tap事件处理函数
    console.log(e); // 打印事件参数对象e
  },
1
2
3

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

调用this.setData(dataObject)方法，给页面data中的数据重新赋值。

{{ count }}
修改count的值

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    count: 0
  },
  changeCount() {
    this.setData({
      count: this.data.count+1
    });
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

7. 事件传参

不能在绑定事件的同时为事件处理函数传递参数。因为小程序会把bindtap的属性值，统一当作事件处理函数名称来处理。
可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字。
事件传参
info 会被解析为 参数的名字
数值 2 会被解析为 参数的值
在事件处理函数中，通过event.target.dataset.参数名获取到具体参数的值。

8. bindinput 的语法格式

通过input事件响应文本框的输入事件，语法格式如下：

• 通过bindinput，可以为文本框绑定输入事件：
  
• 在页面的.js文件中定义事件处理函数：

  inputHandler(e) {
    // e.detail.value 是变化过后，文本框最新的值
    console.log(e.detail.value);
  }
1
2
3
4

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

实现步骤：

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

3、条件渲染

1. wx:if

在小程序中，使用wx:if=“{{condition}}”来判断是否需要渲染该代码块。
True
也可以用wx:elif和wx:else来添加else判断。

 男 
 女 
 未知 
1
2
3

2. 结合使用wx:if

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

  view1
  view2

1
2
3
4

3. hidden

使用hidden=“{{condition}}”条件是true 则隐藏，false 则不隐藏。

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可以根据指定的数组，循环渲染重复的组件结构，语法实例如下：

  索引是：{{index}}， 当前项是:{{item}}

1
2
3

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

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

  索引是：{{idx}}，当前项是：{{itemName}}

1
2
3

3. wx:key 的使用

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

data: {
  userList:[
    {id:1, name: 'hot'},
    {id:2, name: 'cold'},
    {id:3, name: 'white'}
  ]
}

{{item.name}}
1
2
3
4
5
6
7
8
9

5、 WXSS模板样式

1. 什么是WXSS

WXSS是一套样式语言，类似于CSS

2. WXSS和CSS的关系

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

1. rpx尺寸单位
2. @import 样式导入

3. rpx

1. 什么是rpx尺寸单位
   rpx是微信小程序独有的，用来解决屏适配的尺寸单位。
2. rpx的实现原理
   鉴于不同的设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）。

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

3. rpx和px之间的单位换算
   在iPhone6，屏幕宽度为375px，共有750个物理像素，等分为750rpx。因此：
   750rpx=375px=750个物理像素
   1rpx=0.5px=1物理像素
   1rpx=0.5px

4. 样式导入

1. 什么是样式导入
   使用WXSS提供的@import语法，导入外联的样式表。
2. @import语法格式
   @import后面跟需要导入的外联样式表的相对路径，用;表示结束。示例如下：

// common.wxss
.small {
  padding: 5px;
}
// app.wxss
@import "common.wxss";
1
2
3
4
5
6

5. 全局样式和局部样式

1. 全局样式
   定义在app.wxss中的样式，是全局样式，会作用于小程序的每一个页面。
2. 局部样式
   在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。
   注意：

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。

6、 全局配置

1. 全局配置文件及常用的配置项

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

1. pages：记录当前小程序所有页面的存放路径（新建页面会用到）
2. window：全局设置小程序窗口的外观
3. tabBar：设置小程序底部的tabBar效果
4. style：是否启用新版的组件样式

2. window

1. 小程序窗口的组成部分：从上到下依次为：navigationBar 、background（默认不可见，下拉才显示） 、页面主体区域，前两个都可以通过window节点设置
2. window节点常用的配置项

3. 设置导航栏的标题内容
   步骤： app.json->window->navigationBarTitleText

  "window":{
    "navigationBarTitleText": "微信小程序",
  },
1
2
3

4. 设置导航栏的背景色(一定要 十六进制)
   步骤： app.json->window->navigationBarBackgroundColor

  "window":{
    "navigationBarBackgroundColor": "#2b4b6b",
  },
1
2
3

5. 设置导航栏的标题颜色(仅支持 white 或 black)
   步骤： app.json->window->navigationBarTextStyle

  "window":{
    "navigationBarTextStyle": "white",
  },
1
2
3

6. 全局开启下拉刷新功能
   设置步骤：app.json->window->enablePullDownRefresh设置值为true。
   在app.json中启用该功能，会作用于每个页面。
7. 设置下拉刷新时窗口的背景色(只能 十六进制)
   app.json -> window -> backgroundColor ，指定颜色
8. 设置下拉刷新时，loading的样式(只能是 dark 或 light)
   app.json -> window -> backgroundTextStyle ,指定 dark 或 light。
9. 设置上拉触底的距离
   上拉触底：通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
   设置步骤：app.json -> window -> onReachBottomDistance
   默认距离为50px，如果没有特殊需求，使用默认值即可。

3. tabBar

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

• 底部tabBar
• 顶部tabBar
  注意：
• tabBar中只能配置最少2个、最大5个tab页签
• 当渲染顶部tabBar时，不显示icon，只显示文本

2. tabBar 的6个组成部分
   

• backgroundColor：tabBar的背景颜色
• selectedIconPath：选中时的图片路径
• borderStyle：tabBar上边框的颜色
• iconPath：未选中时 图片的路径
• color：tab上文字默认（未选中）颜色
• selectedColor：tab上的文字选中时的颜色

3. tabBar节点配置项(在app.json中和window平级: “tabBar”: {})

4. 每个tab项（list中数组的每个元素）的配置选项

7、 页面配置

1. 页面配置文件的作用

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

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

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3. 页面配置中常用的配置项

8、网络数据请求

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

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

• 只能请求HTTPS类型的接口
• 必须将接口的域名添加到信任列表中

2. 配置request合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/域名下的接口
配置步骤：登录微信小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改request合法域名
注意事项：

• 域名只支持https协议
• 域名不能使用IP地址或localhost
• 域名必须经过ICP备案
• 服务器域名一个月内最多可申请5次修改

3. 发起GET / POST请求

调用微信小程序提供的wx.request()方法，发起GET数据请求。示例代码如下：

wx.request({
  url: 'https://www.escook.cn/api/get', // 请求的接口地址，必须基于https协议
  method: 'GET', // 请求的方式
  data: { // 发送到服务器的数据
    name: '小红'，
    age: 18
  },
  success: (res)=>{ // 请求成功之后的回调函数
    console.log(res);
  }
})
1
2
3
4
5
6
7
8
9
10
11

4. 在页面刚加载时请求数据

在页面刚加载的时候，自动请求一些初始化的数据，需要在页面的onLoad事件中调用获取数据的函数。