视图容器类组件

常见的视图容器类组件：view，scroll-view，swiper和swiper-item

view：普通视图，类似于div

scroll-view：可滚动的视图区域

​ scroll-x属性：允许横向滚动，scroll-y：允许纵向滚动，允许数项滚动时，必须给scroll-view一个固定高度。

swiper和swiper-item:轮播视图容器组件和轮播图item组件

​

image-20231125110046357

常见的基础内容组件：text，rich-text

text：文本组件，类似于HTML中的span标签，是一个行内元素。

只有text组件支持长按选中效果。

rich-text：富文本组件，支持把HTML字符串渲染为WXML结构。

image-20231125212716492

其他常见组件：

button：按钮组件，功能比HTML中的button按钮丰富，通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息等）

image：图片组件，默认宽度为300px，高度约240px

navigator：页面导航组件，类似于html中的a链接

1
2
3
4
5
6
7
8
9
10
11
12
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button type="default">按钮</button>
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<button type="default" size="mini">按钮</button>
<button size="mini" plain="true">普通按钮</button>
<button type="primary" size="mini" plain="true">主色调按钮</button>
<button type="warn" size="mini" plain="true">警告按钮</button>
<button type="default" size="mini" plain="true">按钮</button>
image-20231125214646346

image组件的mode属性用来指定图片的裁剪和缩放模式，常见的mode属性如下

1
2
3
4
5
6
scaleToFill：（默认值）不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边可以完全显示出来，也就是说，可以完整的将图片显示出来。
aspectFill:缩放模式，保持纵横比缩放图片，只保持图片的短边能完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向就会发生截断。
widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
<image src="    " mode="  "></image>

小程序API的三大分类：

事件监听API，同步API，异步API：

1
2
3
4
5
6
7
8
9
10
事件监听API:
以on开头，监听某些事件的触发
wx.onWindowResize(function callback)监听窗口尺寸变化的事件
同步API：
以Sync结尾的API都是同步API
同步API执行结果，可以通过函数返回值直接获取，如果执行错误会抛出异常
wx.setStorageSync('key','value')向本地存储中写入内容
异步API：
类似于$.ajax(options)函数，需要通过success，fail，complete接收调用的结果
wx.request()发起网络数据请求，通过success回调函数接收数据。

image-20231125224555893

WXML模板语法-数据绑定

数据绑定的基本原则：

在data里定义数据，在WXML中使用数据

Mustache语法:

应用场景：绑定内容，绑定属性，运算（三元运算，算术运算等）

1
2
3
4
5
6
7
8
9
10
/**aaa.js**/动态绑定内容
data: {
    //字符串类型的数据
    info:'init data',
    //数组类型的数据
    msList:[{msg:'hello'},{msg:'world'}]
  }
  ------------------------------------------
  /**aaa.wxml**/
 <view>{{info}}</view>
1
2
3
4
5
6
/**aaa.js**/动态绑定属性
data: {
   imgSrc:"/image/avatar.jpg"
 }
 ---------------------------------------------
 <image src="{{imgSrc}}" mode="widthFix"></image>
1
2
3
4
5
6
 /**aaa.js**/三元运算
data: {
   randomNum:Math.random()*10//生成10以内的随机数
 }
 -----------------------------------------------
 <view>{{randomNum >=5 ? '随机数字大于等于5':'随机数字小于5'}}</view>
1
2
3
4
5
6
 /**aaa.js**/算术运算
data: {
   randomNum:Math.random().toFixed(2)//生成带两位小数的随机数
 }
 -----------------------------------------------
 <view>生成100以内的随机数：{{randomNum*100}}</view>

事件绑定：

事件是渲染层（页面）到逻辑层（js）的通讯方式，通过事件可以将用户在渲染层产生的行为，由微信客户端反馈到逻辑层进行业务的处理。

image-20231125235253318 image-20231125235415353

target和currentTarget的区别：

image-20231125235807241

bindrap的语法格式：

不存在html里的onclick的点击事件，而是通过tap时间来响应用户的触摸行为

1
2
3
4
5
6
7
8
  /**aaa.js**/
  //定义按钮的事件处理函数
  btnTapHandler(e){
    console.log(e)
  }
  --------------------------------------
  <!--事件绑定-->
<button type="primary" bindtap="btnTapHandler">按钮</button>

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

通过调用this.setData（dataObject）方法，可以给页面data中的数据重新赋值 

1
2
3
4
5
6
7
8
9
10
11
  data：{
  count：0
}
  changeNum(){
    console.log('ok')
    this.setData({
      count:this.data.count+1
    })
  }
-------------------------------------------
<button type="primary" bindtap="changeNum">+1</button>

事件传参：

小程序里的事件传参，不能在绑定事件的同时为事件处理函数传递参数，如bindtap=“btnHandler（123）”就不对，会把bindtap的属性值统一当成事件名称处理，可以为组件提供data-*自定义属性传参，其中*****代表的是参数的名字

1
2
3
4
5
6
7
8
9
  btnTapHandler1(e){
    //dataset是一个对象，包含了所有通过data-*传递过来的参数项
  console.log(e.target.dataset),//{info:2}
  //通过dataset可以访问到具体参数的值
  console.log(e.target.dataset.info)//2
  }
-----------------------------------------
<button  bindtap="btnTapHandler" data-info="{{2}}">按钮</button>
//info会被解析为参数的名字，数值2会被解析为参数的值。
1

bindinput的语法格式：

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

1
2
3
4
5
6
inputHandler(e){
  //e.detail.value是变化之后文本框最新的值  
console.log(e.detail.value)
}
---------------------------------------------
<input bindinput="inputHandler"></input>

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

实现步骤：定义数据，渲染结构，美化样式，绑定input事件处理函数

1

条件渲染：

1
2
3
4
5
6
使用wx：if="{{condition}}"来判断是否要渲染该代码块
<view wx:if="{{conditon}}">true</view>
也可以用wx：elif和wx：else来添加else判断
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>
1
2
3
结合<block>使用wx：if
一次性控制多个组件的展示和隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx：if控制属性
注意：<block>并不是一个组件，只是一个包裹性质的容器，不会在页面中做任何渲染
1
2
3
4
5
6
7
8
9
10
<view hidden="{{flag}}">条件为true的时候隐藏元素，否则显示</view>
使用hidden="{{condition}}"也能控制元素的显示与隐藏
---------------------------------------------------------
wx：if和hidden的对比：
1.运行方式不同
wx：if以动态创建和移除元素的方式，控制元素的展示和隐藏
hidden以切换样式的方式（display：none/block；），控制元素的显示与隐藏
2.使用建议
频繁切换时，建议使用hidden
控制条件复杂时，建议使用wx：if搭配wx：elif，wx：else进行展示和隐藏的切换

列表渲染：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
array:['苹果','华为','小米']
通过wx：for可以根据指定的数组，循环渲染重复的组件结构
<view wx:for="{{array}}"
索引是：{{index}}当前项为：{{item}}
</view>
//索引是：0，item是：苹果
//索引是：1，item是：华为
//索引是：2，item是：小米
默认情况下，当前循环项的索引用index表示，当前循环项用item表示
手动指定索引和当前项的变量名*(了解)
使用wx：for-index可以指定当前循环项的索引的变量名
使用wx：for-item可以指定当前项的变量名 
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}} 当前项是：{{itemName}}
</view>
//索引是：0，item是：苹果
//索引是：1，item是：华为
//索引是：2，item是：小米
1
2
3
4
5
6
7
8
9
10
11
wx：key的使用
data：{
userlist:[
{id:1,name:"小红"},
{id:2,name:"小黄"},
{id:3,name:"小白"}
]
}
-------------------
<view wx:for="{{userlist}}" wx:key="id">{{item.name}}</view>
//对于上面的arr1，可以使用wx:key="index"

wxss模板样式

与css相比，wxss扩展的特性有：rpx尺寸单位，@import样式导入

rpx尺寸单位：微信小程序独有的，用来解决屏幕适配的尺寸单位。

实现原理：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份， 9+在较小的设备上，1rpx所代表的宽度较小，在较大的设备上，1rpx所代表的宽度较大，在不同设备上运行，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

rpx和px之间的单位换算*

在iphone6上，屏幕宽度为375px，共有750个物理像素，等分为750px，750rpx=375px=750物理像素，1rpx=0.5px=1物理像素，1px=2rpx，建议使用iPhone6作为视觉稿的标准，在iPhone6上要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为200rpx和40rpx。

样式导入：

1
2
@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
@import"common.wxss";

全局样式和局部样式：

定义在app.wxss中的样式为全局样式，作用于每一个页面，在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。注意：当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式，当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

1
2
3
4
5
6
7
8
9
10
11
12
app.wxss中的
view{
color:red
}权重（0，0，1）
aaa.wxss中的
view{
color:blue
}权重（0，0，1），一样的，局部覆盖全局
app.wxss中的
view：nth-child(1){
color:yellow
}权重（0，1，1）权重比局部的大，覆盖局部的

全局配置

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

app.json是全局配置文件，常用配置如下：pages：记录当前小程序的所有页面的存放路径，window：全局设置小程序窗口的外观，tabBar：设置小程序底部的tabBar效果，style：是否启用新版的组件样式。

image-20231126181020266 image-20231126181141980 
1
2
3
4
5
6
7
设置导航栏的标题：
设置步骤：app.json->window->navigationBarTitleText
设置导航栏的背景颜色：
设置步骤：app.json->window->navigationBarBackgroundColor
设置导航栏的标题颜色：
设置步骤：app.json->window->navigationBarTextStyle
navigationBarTextStyle的可选值只有black和white

全局开启下拉刷新功能：

下拉刷新重新加载页面数据

1
2
3
4
5
6
7
8
9
app.json->window->把enablePullDownRefresh的值设置为true
注意：在app.json中启用下拉刷新功能，会作用于每个小程序页面
--------------------------------------------------------------------------
全局开启下拉刷新功能后，默认的窗口背景是白色，如果自定义的下拉刷新窗口背景色，设置步骤为app.json->window->为backgroundColor设置16进制的颜色值#efefef
----------------------------------------------------------------------------
设置下拉刷新功能后，默认窗口的loading样式为白色，如果更改loading样式的效果，设置步骤为app.json->window->为backgroundTextStyle指定dark值，注意：backgroundTextStyle的可选值只有light和dark
----------------------------------------------------------------------------
设置上拉触底的距离，上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为，设置步骤：app.json->window->为onReachBottomDistance设置新的数值
注意：默认值为50px，如果没有特殊需求，建议使用默认值即可

tabBar

tabBar是移动端应用常见的页面，用于实现页面的快速切换，小程序里分为底部tabBar和顶部tabBar，注意：tabBar只能配置最少两个最多五个tab页签，当渲染顶部tabBar时，不显示icon，只显示文本。tabBar的文件必须放在pages中的的前面

image-20231126190050387 image-20231126194824606 image-20231126194854917 image-20231126194939462 image-20231126195002915 image-20231126193411500

页面配置

app.json中的window节点，可以全局配置小程序中的每个页面的窗口表现，如某些小程序页面想要拥有特殊的窗口表现，注意：当页面配置和全局配置冲突时，根据就近原则，最终的效果以页面配置为佳。

image-20231126200336683

网络数据请求

出于安全性只能请求https类型的接口，域名必须经过ICP备案，必须将接口的域名前加到信任列表中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
配置request合法域名：
需求描述：假设在自己的微信小程序里，希望请求https://www.escook.cn/域名下的接口
-----------------------------------------------------------------------
<button bindtap="getInfo">发起get请求</button>
-------------------------------------------------------------------------
getInfo(){
wx.request({
  url: 'https://www.escook.cn/api/get',
  method:'GET',
  data:{
    name:'zs',
    age:20
  },
  success:(res)=>{
    console.log(res.data)
  }
  })
  }
  ----------------------------------------------------------------------------
  <button bindtap="postInfo">发起post请求</button>
-------------------------------------------------------------------------
postInfo(){
wx.request({
  url: 'https://www.escook.cn/api/get',
  method:'POST',
  data:{
    name:'zs',
    age:20
  },
  success:(res)=>{
    console.log(res.data)
  }
  })
  }
1
2
3
4
5
在页面刚加载时请求数据，在页面刚加载时，自动请求一些初始化的数据，此时需要在页面的onLoad事件中调用获取数据的函数，
  onLoad(options) {
    this.getInfo(),
    this.postInfo()
  }
image-20231126205559192

视图与逻辑

页面导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
声明式导航：在页面上声明一个<navigator>导航组件，通过点击这个组件实现页面跳转
编程式导航：调用小程序的导航API，实现页面的跳转。
=====================================================================================
声明式导航：
1.导航到tabBar页面：需要指定url属性和open-type属性，其中
url为要跳转的页面的地址，必须/开头
open-type表示跳转的方式，必须为switchTab
2.在使用 <navigator> 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：
url 表示要跳转的页面的地址，必须以 / 开头
open-type 表示跳转的方式，必须为 navigate
注意：为了简便，在导航到非 tabBar 页面时，open-type="navigate" 属性可以省略。
3.后退导航，如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：
 open-type 的值必须是 navigateBack，表示要进行后退导航
 delta 的值必须是数字，表示要后退的层级
注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1
<navigator url="/pages/message/message" open-type="switchTab">导航到记录页面</navigator>
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
<navigator url="/pages/info/info" open-type="navigateBack" delta="1">导航到info页面</navigator>
=====================================================================================编程式导航：
1.导航到tabBar页面：调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：
属性 类型 是否必选 说明
url string 是 需要跳转的 tabBar 页面的路径，路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
image-20231130175345084 
1
2.导航到非tabBar页面，调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：
属性 类型 是否必选 说明
url string 是 需要跳转到的非 tabBar 页面的路径，路径后可以带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
image-20231130175324726 
1
3.后退导航：调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：
属性 类型 默认值 是否必选 说明
delta number 1 否 返回的页面数，如果 delta 大于现有页面数，则返回到首页
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

页面导航-导航传参

1.声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

l 参数与路径之间使用 ? 分隔

l 参数键与参数值用 = 相连

l 不同参数用 & 分隔

导航到info页面

2.编程式导航传参

调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：

image-20231130181653615

3.在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下

image-20231130181702935 
1
2
3
4
5
6
7
8
9
data{
query:{}
}
onLoad(options) {
    console.log(options)
    this.setData({
qurey=options------接收参数到data
})
  }

页面事件

1.下拉刷新事件

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

启用下拉刷新有两种方式：

①全局开启下拉刷新

在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

②局部开启下拉刷新

l在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。

配置下拉刷新的样式：

在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：

backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值

backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

监听页面的下拉刷新事件：

在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。

image-20231130184309989 image-20231130184323384

停止下拉刷新的效果：

当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下：

image-20231130184419871

4.上拉触底事件

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：

image-20231130191559683

设置上拉触底距离：

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

1
2
3
4
5
6
7
案例：
1.定义获取随机颜色的方法
2.在页面加载时获取初始数据
3.渲染 UI 结构并美化页面效果
4.在上拉触底时调用获取随机颜色的方法
5.添加 loading 提示效果
6.对上拉触底进行节流处理

生命周期

生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。我们可以把每个小程序运行的过程，也概括为生命周期：

小程序的启动，表示生命周期的开始

小程序的关闭，表示生命周期的结束

中间小程序运行的过程，就是小程序的生命周期

生命周期的分类：

在小程序中，生命周期分为两类，分别是：

① 应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程

② 页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大

生命周期函数：

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

生命周期函数的分类：

小程序中的生命周期函数分为两类，分别是：

① 应用的生命周期函数：特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数

② 页面的生命周期函数：特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数

应用的生命周期函数：

小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：

image-20231201182820619

页面的生命周期函数：

小程序的页面生命周期函数需要在页面的 .js 文件中进行声明，示例代码如下：

image-20231201182849052

wxs脚本

WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。

wxs的应用场景：wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中 wxs 的典型应用场景就是“过滤器”。

wxs和javascript的关系*：

虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：

①wxs 有自己的数据类型

number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、

function 函数类型、array 数组类型、 date 日期类型、 regexp 正则

②wxs 不支持类似于 ES6 及以上的语法形式

不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…

支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

③wxs 遵循 CommonJS 规范

module 对象

require() 函数

module.exports 对象

内嵌wxs脚本：

wxs 代码可以编写在 wxml 文件中的 标签内，就像 Javascript 代码可以编写在 html 文件中的