---
title: 微信小程序
date: 2022-02-28 00:16:12.356
updated: 2022-09-05 20:04:43.201
url: https://hhdxw.top/archives/73
categories: 
tags: 
- 小程序
---

基本内容

#### 1. 视图组件

```
view 
类似于html中div，是一个块级元素
常用于用于实现页面的布局效果
```

```
scroll-view
可滚动视图区域
常用于实现滚动列表效果
```

```
swiper	swiper-item
轮播图容器组件和轮播图item组件
```

###### 基本使用

swiper属性

|          属性          |  类型   |     默认值      |        说明        |
| :--------------------: | :-----: | :-------------: | :----------------: |
|     indicator-dots     | boolean |      false      | 是否显示面板指示灯 |
|    indicator-color     |  color  | rgba(0,0,0,0.3) |     指示点颜色     |
| indicator-active-color |  color  |     #000000     | 当前选中指示点颜色 |
|        autoplay        | boolean |      false      |    是否自动切换    |
|        interval        | number  |      5000       |  自动切换时间间隔  |
|        circular        | boolean |      false      |  是否采用衔接滑动  |



#### 2. 基础内容

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

属性：user-select="true"实现长按选中文本
```

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

组件node：<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
```

其他组件：

```
button
按钮组件
功能比HTNL多
通过open-type属性可以调用微信提供给的各种功能（客服，转发，获取用户信息，获取用户授权）
```

```
image
照片组件
默认宽300px 高240px
```

|    mode     |                             说明                             |
| :---------: | :----------------------------------------------------------: |
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
|  aspectFit  | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill  | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
|  widthFix   |     缩放模式，宽度不变，高度自动变化，保持原图宽高比不变     |
|  heightFix  |     缩放模式，高度不变，宽度自动变化，保持原图宽高比不变     |

```
navigator
页面导航组件
类似于HTML中的a链接
```



#### 3. 表单组件

#### 4. 导航组件

### 小程序宿主环境——API

#### 1.事件监听API

特点：以 on 开头，用来监听某些事件的触发

举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

#### 2.同步 APl 

特点1：以 Sync 结尾的 API都是同步 API 

特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

举例： wx.setStorageSync ('key','value'）向本地存储中写入内容

#### 3.异步API

特点：类似于 jQuery 中的$.ajax (options）函数，需要通过 success、fail、complete 接收调用的结果

举例： wx.request (）发起网络数据请求，通过success回调函数接收数据

### 协同工作和发布—协同工作

#### 1.了解不同权限管理需求

对不同员工权限进行边界划分

#### 2.项目成员组成结构

https://www.zhixi.com/view/3be5222c

![image-20220209101106145](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220209101106145.png)

#### 3.小程序开发流程

![image-20220209101306491](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220209101306491.png)

![img](https://gitee.com/hhdxw/tuc/raw/master/img/AB8EC56C7D2E098913731AF2CF677434.jpg)![img](https://gitee.com/hhdxw/tuc/raw/master/img/5C1BC535B0EB15F811FCA1A5F4DE7DD5.jpg)

### 协同工作和发布—小程序的版本

### 协同工作和发布—发布上线

WXML模板语法—数据绑定

#### 1.数据绑定的基本原则

- 在data中定义数据

- 在WXML中使用数据

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

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

#### 3.Mustache 语法的格式

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

```
js文件
 data: {
        info: 'hello world',
    }
    
wxml文件
<view>{{info}}</view>
```

#### 4.Mustache 语法的应用场景

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

#### 5.动态绑定内容

```
页面数据
Page({
 data: {
        info: 'hello world',
    }
})

页面结构
<view>{{info}}</view>
```

#### 6.动态绑定属性

```
页面数据
Page({
 data: {
        imgSrc: 'https://tenfei02.cfp.cn/creative/vcg/800/new/VCG41N1210205351.jpg',
    }
})

页面结构
<image src="{{imgSrc}}" mode="widthFix"></image>
```

#### 7.三元运算

```
页面数据
Page({
 data: {
        randomNume1:Math.random() * 10
    }
})

页面结构
<view>{{randomNume1 >=5 ? '数字大于五或等于五' : '数字小于五'}}</view>
```

#### 8.算数运算

```
页面数据
Page({
 data: {
		// 随机生成两位小数
        randomNume2:Math.random().toFixed(2) 
    }
})

页面结构
<view>{{randomNume2 * 100}}</view>
```

### WXML模板语法—事件绑定

#### 1.什么是事件

事件是渲染层到逻辑层的通讯方式。

#### 2.小程序中常用事件

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

#### 3.事件对象的属性列表

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

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

#### 4.target 和 currentTarget 的区别

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

![image-20220210101934807](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220210101934807.png)

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

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

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

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

#### 5.bindtap的语法格式

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

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

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

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

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

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

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

```
//页面 .js文件
Page({
	data:{
		count:0
	},
//修改 count 的值
	changeCount(){
		this.setData({
			count: this.data.count + 1
		})
	}
})
```

#### 7.事件传参

#### 8.bindinput的语法格式

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

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

```
<input bindinput="inputHander" />
```

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

```
inputHander(e){
        // e.detail.value 是变化后，文本框的最新值
        console.log(e.detail.value)
        })
    },
```

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

渲染结构：

```
<input value="{{msg}}" bindinput="inputHanderler" />
```

定义数据：

```
Page({
	data:{
	msg:'你好，'
	}
})
```

绑定 input 事件处理函数：

```
inputHander(e){
       
        this.setData({
        //通过 e.detail.value 获取到文本框最新的值
            msg: e.detail.value
        })
    },
```

### WXML模板语法—条件渲染

#### 1.wx:if

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

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

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

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

#### 2.结合<block>使用wx:if

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

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

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

#### 3.hidden

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

```html
<view hidden="{{ condition }}">条件为true时隐藏元素，否则显示</view>
```

#### 4.wx:if与hidden的对比

1.运行方式不同

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

2.使用建议

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

### WXML模板语法—列表渲染

#### 1.wx:for

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

```
<view wx:for="{{arr1}}">
索引时{{index}},item项时：{{item}}
</view>
```

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

#### 2.手动置顶索引和当前项变量名*

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

示例代码如下：

```
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
索引时{{idx}},item项时：{{itemName}}
</view>
```

#### 3.wx:key 的使用

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

从而提高渲染效率，示例代码如下：

```
// data 数据
data: {
        userList:[
            { id: 1,name: '小红' },
            { id: 2,name: '小黄' },
            { id: 3,name: '小白' },
        ]
    },

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

##  wxss 模板样式

#### 1.什么是wxss

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

#### 2.WXSS 和 CSS的关系

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

- rpx 尺寸单位

- @import 样式导入

  ![image-20220210151503483](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220210151503483.png)

### WXSS 模板样式—rpx

#### 1.什么是 rpx 尺寸单位

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

#### 2.rpx 的实现原理

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

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

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

#### 3.rpx 与 px 之间的单位换算

在iphone6上，屏幕宽度为 375px，共有750个物理像素，等分为750px。则：

750rpx = 375px = 750物理像素

1rpx = 0.5px = 1物理像素

|     设备     | rpx换算px（屏幕宽度/750） | px换算rpx（750/屏幕宽度） |
| :----------: | :-----------------------: | :-----------------------: |
|   iphone5    |      1 rpx = 0.42 px      |      1 px = 2.34 rpx      |
|   iphone6    |      1 rpx = 0.5 px       |       1 px = 2 rpx        |
| iphone6 Plus |     1 rpx = 0.552 px      |      1 px = 1.81 rpx      |

官方建议：开发微信小程序时，设计师可以用 iphone6 作为视觉稿的标准

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

### WXSS 模板样式—样式导入

#### 1.什么是样式导入

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

#### 2.@import的语法格式

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

```
/* common.wxss */
.username{
    color: red;
}
```

```
/* index.wxss */
@import"/common/common.wxss";
```

### WXSS 模板样式—全局样式和局部样式

#### 1.全局样式

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

#### 2.局部样式

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

注意：

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

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

### 全局配置

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

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

1.pages

- 记录当前小程序所有页面的存放路径

2.window

- 全局设置小程序窗口的外观

3.tabBar

- 设置小程序底部的tabBar效果

4.style

- 是否用新版的组件样式

### 全局配置—window

#### 1.小程序窗口的组成部分

![image-20220211094223855](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220211094223855.png)

#### 2.了解window节点常用的配置项

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

（navgationBar开头）navgationBarTitleTest、navigationBarBackgroundColor、navigationBarTextStyle  导航栏相关样式效果

（background 开头）backgroundColor、background  窗口背景

enablePullDownRefresh、onReachBottomDistance 页面效果

#### 3.设置导航栏标题

设置步骤：app.json -> window -> navgationBarTitleTest

需求：把导航栏上的标题，从默认的 “Wechat” 修改为 “黑马程序员” 

#### 4.设置导航栏的背景色

设置步骤：app.json -> window -> navigationBarBackgroundColor

需求：把导航栏标题的背景色，从默认的#fff修改为#2b4b6b ，不支持文本颜色，只支持#16进制。

#### 5.设置导航栏标题颜色

设置步骤：app.json -> window -> navigationBarTextStyle

需求：把导航栏上的标题，从默认的black修改为white（只有black和white）

#### 6.全局开启下拉刷新功能

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

设置步骤：app.json -> window -> 把enablePullDownRefresh的值设置为 true。

注意：会作用于每一个小程序页面。

#### 7.设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后，默认窗口背景为白色。如果自定义下来刷新窗口背景色，设置步骤为：

app.json -> window -> 为 backgroundColor 设置背景色值#efefef。

#### 8.设置下拉刷新时 loading 的样式

当开启下拉刷新功能之后，默认窗口 loading样式为白色，如果要更改 loading 样式效果，设置步骤为：

app.json -> window -> 为 backgroundTextStyle 指定 dark 值。（只有 dark 和 light ）

#### 9.设置上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

操作步骤：app.json -> window -> onReachBottomDistance 设置新的数值

注意默认距离为50px，如果没有特殊需求，建议使用默认值即可。

### 全局配置—tabBar

#### 1.什么是tabBar

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

- 底部 tabBar
- 顶部 tabBar

注意：

- tabBar中只能配置最少2个、最多5个tab页签
- 当渲染顶部tabBar时，不显示icon，只显示文本

#### 2.tabBar 的6个组成部分

1. backgroundColor：tabBar 的背景颜色
2. selectedlconPath：选中时的照片路径
3. borderStyle：tabBar上边框的颜色
4. iconPath：未选中时的照片路径
5. selectedColor：tab上的文字选中时的颜色
6. color：tab上文字的默认（未选中）颜色

![image-20220211112736002](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220211112736002.png)

#### 3.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   |

#### 4.每个 tab 项的配置选项

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

### 全局配置—案例：配置 tabBar

#### 1.需求描述

根据资料中提供的小图标、在小程序中配置如图所示的tabBari效果：

![image-20220211150807374](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220211150807374.png)

#### 2.实现步骤

1.拷贝图标资源

2.新建三个对应的 tab 页面

3.配置 tabBar 选项

#### 3.步骤1—拷贝图标资源

1.把资料目录中的images文件夹，拷贝到小程序项目根目录中

2.将需要用到的小图标分为3组，每组两个，其中：

- 图片名称中包含-active的是选中之后的图标
- 图片名称中不包含-active的是默认图标

截图如下：

![image-20220211154941575](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220211154941575.png)

#### 3.步骤2—新建3个对应的tab页面

通过 app.json 文件的 pages 节点，快速新建3个对应的 tab 页面，示例代码如下：

```
{
	"pages":[
	"pages/home/home",
	"pages/message/message",
	"pages/contact/contact"
	]
}
```

其中， home 是首页， message 是消息页面， contact 是联系我们页面。

#### 3.步骤3-配置tabBar选项

1.打开app.json配置文件，和pages、window平级，新增tabBar节点

2.tabBar节点中，新增list数组，这个数组中存放的，是每个tab项的配置对象

3.在list数组中，新增每一个tab项的配置对象。对象中包含的属性如下：

- pagePath指定当前tab对应的页面路径【必填】
- text 指定当前tab上按钮的文字【必填】
- iconPath指定当前tab未选中时候的图片路径【可选】
- selectedlconPath 指定当前tab被选中后高亮的图片路径【可选】

### 页面配置

#### 1.页面配置文件的作用

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

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

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

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

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

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

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

### 网络数据请求

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

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

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

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

![image-20220214101048574](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220214101048574.png)

#### 2.配置 request 合法域名

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

序管理后台->开发 -> 开发设置 -> 服务器域名-> 修改 request 合法域名

注意事项：

1.域名只支持https协议

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

3.域名必须经过ICP备案

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

#### 3.发起 GET 请求

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

```js
getInfo() {
        wx.request({
          url: 'https://www.escook.cn/api/get',	//接口申请地址，必须基于https协议
          method: "GET",	//请求方式
          data: {			//发送到服务器的数据
              name:'zs',
              age: 20
          },
          success: (res) =>{//请求成为之后的回调生活
              console.log(res)
          }
        })
    },
```

#### 4.发起 POST 请求

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

```js
postInfo() {
        wx.request({
            url: 'https://www.escook.cn/api/post',
            method: "POST",
            data: {
                name: 'ls',
                age: 33
            },
            success: (res) => {
                console.log(res.data)
            }
        })
    },
```

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

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调

用获取数据的函数，示例代码如下：

![image-20220214110200211](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220214110200211.png)

#### 5.跳过 request 合法域名校验

如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。此时为了不耽误开发的进度，我们

可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS版本及HTTPS证书」选项，跳过request 合

法域名的校验。

![image-20220214111421427](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220214111421427.png)

注意：

跳过request合法域名校验的选项，仅限在开发与调试阶段使用！

#### 6.关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序

中不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程

序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。

### 案例—本地生活

#### 1.首页效果以及实现步骤

1.新建项目并梳理项目结构
2.配置导航栏效果
3.配置tabBar效果
4.实现轮播图效果
5.实现九宫格效果
6.实现图片布局

![image-20220214111441845](https://gitee.com/hhdxw/tuc/raw/master/img/image-20220214111441845.png)

#### 2.接口地址

1.获取轮播图数据列表的接口

- 【GET】https://www.escook.cn/slide

2.获取九宫格数据列表的接口

- 【GET】https://www.escook.cn/categories

### 总结

1.能够使用 WXML模板语法渲染页面结构

wx:if、wx:elif、wx:else、hidden、wx:for、wx:key

2.能够使用 WXSS 样式美化页面结构

rpx尺寸单位、@import样式导入、全局样式和局部样式

3.能够使用 app.json 对小程序进行全局性配置

pages、window、tabBar、style

4.能够使用page.json对小程序页面进行个性化配置

对单个页面进行个性化配置、就近原则

5.能够知道如何发起网络数据请求

wx.request()方法、onLoad()事件

## 小程序—视图与逻辑

### 目标

能够知道如何实现页面之间的导航跳转

能够知道如何实现下拉刷新效果

能够知道如何实现上拉加载更多效果

能够知道小程序中常用的生命周期函数

### 目录

页面导航

页面事件

生命周期

WXS 脚本

案例-本地生活(列表页面)

### 页面导航

#### 1.什么是页面导航

页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：

- <a>链接
- location.href

#### 2.小程序实现页面导航的两种方式

1.声明式导航

在页面上声明一个<navigator>导航组件通过点击<navigator> 组件实现页面跳转

2.编程式导航

调用小程序的导航API，实现页面的跳转

### 页面导航—声明式导航

#### 1.导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面。

在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url 属性和open-type属性，其中：

- url表示要跳转的页面的地址，必须以/开头
- open-type 表示跳转的方式，必须为switchTab

示例代码如下：

```
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
```

#### 2.导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面

在使用<navigator>组件跳转到普通的非tabBar页面时，则需要指定url属性和open-type属性，其中：

- url表示要跳转的页面的地址，必须以/开头
- open-type 表示跳转的方式，必须为navigate

示例代码如下：

```
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
```

注意：为了简便，在导航到非tabBar页面时，open-type="navigate”属性可以省略。

#### 3.后退导航

如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性，其中：

- open-type 的值必须是navigateBack，表示要进行后退导航
- delta 的值必须是数字，表示要后退的层级

示例代码如下：

```
<navigator open-type="navigateBack" delta="1">后退</navigator>
```

注意：为了简便，如果只是后退到上一个页面，则可以省略 delta 属性，因为其默认值就是 1。

### 页面导航—编程式导航

#### 1.导航到 tabBar 页面

调用 wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：

|   属性   |   类型   | 是否必选 |                      说明                      |
| :------: | :------: | :------: | :--------------------------------------------: |
|   url    |  string  |    是    |  需要跳转的tabBar页面的路径，路径后不能带参数  |
| success  | function |    否    |             接口调用成功的回调函数             |
|   fail   | function |    否    |             接口调用失败的回调函数             |
| complete | function |    否    | 接口调用结束的回调函数(调用成功、失败都会执行) |

示例代码如下：

```html
// 页面结构
<button bindtap="gotoMessage">跳转到message页面</button>

// 通过编程式导航，跳转到 message 页面
gotoMessage(){
        wx.switchTab({
          url: '/pages/message/message',
        })
    },
```

2.导航到非 tabBar 页面

调用 wx.navigateTo(Object object)方法，可以跳转到非tabBar页面。其中Object参数对象的属性列表如下：

|   属性   |   类型   | 是否必选 |                      说明                      |
| :------: | :------: | :------: | :--------------------------------------------: |
|   url    |  string  |    是    |  需要跳转的tabBar页面的路径，路径后不能带参数  |
| success  | function |    否    |             接口调用成功的回调函数             |
|   fail   | function |    否    |             接口调用失败的回调函数             |
| complete | function |    否    | 接口调用结束的回调函数(调用成功、失败都会执行) |

示例代码如下：

```
// 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>

// 通过编程式导航，跳转到 info 页面
    gotoInfo(){
        wx.navigateTo({
          url: '/pages/info/info',
        })
    },
```

#### 3.后退导航

调用 wx.navigateBack(Object object)方法，可以返回上一页或多级页面。其中Object参数对象的属性列表如下：

|   属性   |   类型   | 是否必选 |                        说明                         | 默认值 |
| :------: | :------: | :------: | :-------------------------------------------------: | :----: |
|  delta   |  number  |    否    | 返回的页面数，如果 delta 大现有页面数，则返回到首页 |   1    |
| success  | function |    否    |               接口调用成功的回调函数                |        |
|   fail   | function |    否    |               接口调用失败的回调函数                |        |
| complete | function |    否    |   接口调用结束的回调函数(调用成功、失败都会执行)    |        |

示例代码如下：

```
// 页面结构
<button bindtap="goBack">后退</button>

// 通过编程式导航，后退到上一个页面
goBack(){
        wx.navigateBack()
    },
```

### 页面导航—导航传参

#### 1.声明式导航传参

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

- 参数与路径之间使用？分隔
- 参数键与参数值用=相连
- 不同参数用&分隔

代码示例如下：

```
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
```

#### 2.编程式导航传参

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

```
// 页面结构
<button bindtap="gotoInfo2">跳转到info页面</button>

// 通过编程式导航，跳转到 info 页面，并携带参数
gotoInfo2(){
        wx.navigateTo({
          url: '/pages/info/info?name=zs&age=20',
        })
    },
```

#### 3.在 onload 中接收导航参数

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

```

```