# wechat-miniprogram-learning

**Repository Path**: Zoe_x/wechat-miniprogram-learning

## Basic Information

- **Project Name**: wechat-miniprogram-learning
- **Description**: 微信小程序学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-27
- **Last Updated**: 2023-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序开发

### 小程序的宿主环境 ----通信模型

#### 小程序的通信模型

1. 渲染层和逻辑层之间的通信
   - 由微信客服端进行转发
2. 逻辑层和第三方服务器之间的通信
   - 由微信客服端进行转发

![image-20220120193502807](/Users/zx/Library/Application Support/typora-user-images/image-20220120193502807.png)

###  小程序的宿主环境 ----运行机制

#### 小程序启动的过程

1. 下载小程序的代码包到本地
2. 解析app.json全局配置文件
3. 执行app.js小程序入口文件，***调用App()创建小程序实例***
4. 渲染小程序首页
5. 小程序启动完成

#### 页面的渲染过程

1. 加载解析页面的json配置文件
2. 加载页面的wxml模版和wxss样式
3. 执行页面的js文件，***调用Page()创建页面实例***
4. 页面渲染完成

### 小程序的宿主环境 ----组件

#### 组件的分类

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问

#### 常见的视图容器类组件

##### 1.view

- 普通视图区域
- 类似于HTML中的div，是一个块级元素
- 常用来实现页面的布局效果

##### 2.scroll-view

- 可滚动的视图区域
- 常用来实现滚动列表效果

##### 3.swiper和swiper-item

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

  ##### 常用属性

  - indicator-dots 默认false 是否显示面板指示点
  - indicator-color 默认rgba(0,0,0,.3) 指示点颜色
  - indicator-active-color 默认#000 当前选中的指示点颜色
  - autoplay 是否自动切换
  - interval 自动切换时间间隔
  - circular 是否采用衔接滑动


#### 常见的基础内容组件

1. text

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

   通过user-select属性，实现长按选中文本内容的效果

2. rich-text

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

   通过nodes属性节点，把HTML字符串渲染为对应的UI结构

#### 其他常用组件

1. button

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

2. image

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

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

   	+ scaleToFill （默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
   	+ aspectFit 缩放模式，保持纵横比缩放图片，完整显示图片
   	+ aspetFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来
   	+ widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
   	+ heigthFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

3. navigator

   - 页面导航组件
   - 类似于html中的a

### 小程序的宿主环境 ----API

1. 事件监听API
   - 特点：以on开头，监听某些事件的触发 
   - wx.onWindowResize()监听窗口尺寸变化的事件
2. 同步API
   - 特点：以Sync结尾的API，同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
   - wx.setStorageSync('key','value')向本地存储中写入内容

3. 异步API
   - 特点：类似于jQuery中的$.ajax(option)函数，需要通过success，fail，complete接收调用的结果
   - wx.request()发起网络数据请求，通过success回调函数接受数据

## 模版与配置

### 数据绑定

1. 在data中定义数据
2. 在wxml中渲染数据 Mustache语法 

### 事件绑定

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

- tap：手指触摸后马上离开，类似于click事件 绑定方式bindtap或bin d:tap
- input：文本框的输入事件
- change：状态改变时触发

当事件回调触发的时候，会收到一个事件对象event

#### 改变属性值

通过this.setData改变属性的值

```js
countChange() {
    this.setData({
      count: this.data.count + 1
    })
  },
```

#### 事件传参

为组件提供data-*自定义属性传参，其中 * 代表的是参数的名字

若想传递数字，则需使用mustache语法，data-info="{{2}}"

通过event.target.dataset.参数名即可获取到具体参数的值

### 条件渲染

1. wx:if /wx:elif/wx:else 实质：动态创建和移除元素

   结合<block>使用wx:if，一次性控制多个组件的展示与隐藏，block并不是一个组件，他只是一个包裹性质的容器，不会在页面中做任何渲染

2. hidden 条件为true隐藏 实质为切换样式实现显示与隐藏

### 列表渲染

1. wx:for

2. 自定义索引名和变量名 wx:for-index="idx"/wx:for-item="itm"
3. wx:key 唯一的值，提高渲染效率 不需要mustache语法

### WXSS模版样式

1. rpx尺寸单位

解决屏适配的尺寸单位，把所有设备的屏幕在宽度上等分为750份

> 在iphone6上，屏幕宽度为375px，则
>
> 750rpx=375px=750物理像素
>
> 1rpx=0.5px=1物理像素



1. @import样式导入

## 网络数据请求

两个限制：

1. 只能请求HTTPS类型的接口
2. 必须将接口的域名添加到信任列表里



## 视图与逻辑

### 页面导航

1. 声明式导航

   - 在页面上声明一个<navigator>导航组件，需要指定url属性和open-type属性
     - url表示要跳转的页面的地址，必须以/开头
     - open-type表示跳转的方式，必须为switchTab（导航到tabBar页面），navigate（导航到非tabBar页面，可不指定，默认）
   - 通过点击<navigator>组件实现页面跳转
   - 后退到上一页或多级页面，需要指定open-type属性和delta属性
     - open-type的值必须为navigateBack，表示要进行后退导航
     - delta的值必须是数字，表示要后退的层级，默认值为1，返回到上一页
   - 传参，路径的后面携带参数
     - 参数与路径之间使用？隔开
     - 参数键和值用=相连
     - 不同参数用&分割

2. 编程式导航（调用小程序的导航API，实现页面的跳转）

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

     > url --- 必填，路径后面不能带参数
     >
     > success--- 调用成功的回调函数
     >
     > fail --- 调用失败的回调函数
     >
     > complete --- 调用结束的回调函数（成功/失败都会执行）

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

     > url --- 必填，路径后面可以带参数
     >
     > success--- 调用成功的回调函数
     >
     > fail --- 调用失败的回调函数
     >
     > complete --- 调用结束的回调函数（成功/失败都会执行）

   - 调用wx.navigateBack(Object object)方法，后退到上一页或多级页面。其中Object参数对象的属性对象如下

      > delta --- 默认为1，返回的页面书，如归delta大于现有页面数，则返回到首页 
      >
      > success--- 调用成功的回调函数
      >
      > fail --- 调用失败的回调函数
      >
      > complete --- 调用结束的回调函数（成功/失败都会执行）

#### 在onLoad中接收参数

通过传递的options接收参数，options就是导航传递过来的参数对象

### 下拉刷新

重新加载页面效果

#### 启用下拉刷新

1. 全局开启下拉刷新
   - 在app.json的window节点中，将enablePullDownRefresh设置为true
2. 局部开启下拉刷新（推荐）
   - 在页面的.json配置文件中，将enablePullDownRefresh设置为true

#### 配置下拉刷新窗口的样式

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

- backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
- backgroundTextStyle用来配置下拉刷新的loading的样式，仅支持dark和light

#### 监听下拉刷新事件

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

#### 停止下拉刷新效果

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

### 上拉触底

加载更多数据

#### 监听上拉触底事件

在页面的js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件

#### 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离

在全局或页面的json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离，小程序中默认的触底距离是50px。

#### 对上拉触底进行节流处理

1. 在data中定义isloading节流阀
2. 在getColors()方法中修改isloading节流阀的值
3. 在onReachBottom中判断节流阀的值，从而对数据请求进行节流处理

### 扩展

#### 自定义编译模式

![image-20220302185819474](/Users/zx/Library/Application Support/typora-user-images/image-20220302185819474.png)

### 生命周期

1. 应用生命周期

   特指小程序从启动->运行->销毁的过程

2. 页面生命周期

   特指小程序中，每个页面的加载->渲染->销毁的过程

#### 生命周期函数

1. 应用的生命周期函数

   1. onLaunch:小程序初始化完成时，会触发，全局只触发一次

   2. onShow：当小程序启动或从后台进入前台显示
   3. onHide：当小程序从前台进入后台

2. 页面的生命周期函数

![image-20220302192643552](/Users/zx/Library/Application Support/typora-user-images/image-20220302192643552.png)

### WXS

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

#### 应用场景

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



![image-20220302193137610](/Users/zx/Library/Application Support/typora-user-images/image-20220302193137610.png)

#### 基础语法

wxs代码可以编写在wxml文件中的<wxs>标签内

wxs每个<wxs>标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员

1. 内嵌wxs脚本

![ ](/Users/zx/Library/Application Support/typora-user-images/image-20220302193401537.png)

2. 外联的wxs脚本

![image-20220302193844476](/Users/zx/Library/Application Support/typora-user-images/image-20220302193844476.png)

使用

![image-20220302194150463](/Users/zx/Library/Application Support/typora-user-images/image-20220302194150463.png)

## 自定义组件

Properties是组件的对外属性，用来接收外界传递到组件中的数据

### 数据监听器

![image-20220302231015172](/Users/zx/Library/Application Support/typora-user-images/image-20220302231015172.png)

#### 监听对象属性的变化

![image-20220302231252258](/Users/zx/Library/Application Support/typora-user-images/image-20220302231252258.png)

#### 监听对象所有属性的变化

使用通配符**

![image-20220302231720043](/Users/zx/Library/Application Support/typora-user-images/image-20220302231720043.png)

### 纯数据字段

不用于界面渲染的data字段

有助于提升页面更新的性能

#### 使用规则

![image-20220302231957696](/Users/zx/Library/Application Support/typora-user-images/image-20220302231957696.png)

### 组件的生命周期

![image-20220302232208871](/Users/zx/Library/Application Support/typora-user-images/image-20220302232208871.png)

#### 组件主要的生命周期函数

![image-20220302232435874](/Users/zx/Library/Application Support/typora-user-images/image-20220302232435874.png)

##### lifetimes

![image-20220302232545439](/Users/zx/Library/Application Support/typora-user-images/image-20220302232545439.png)

#### 组件所在页面的生命周期

![image-20220302232735557](/Users/zx/Library/Application Support/typora-user-images/image-20220302232735557.png)

##### pageLifetimes

### 插槽

<slot>用于承载组件使用者提供的wxml结构

#### 单个插槽

![image-20220302233229223](/Users/zx/Library/Application Support/typora-user-images/image-20220302233229223.png)

#### 启用多个插槽

![image-20220302233255895](/Users/zx/Library/Application Support/typora-user-images/image-20220302233255895.png)

### 父子组件之间的通信

![image-20220302233501280](/Users/zx/Library/Application Support/typora-user-images/image-20220302233501280.png)

1. 属性绑定

实现父向子传值，只能传递普通类型的数据，无法将方法传递给子组件

![image-20220302233723517](/Users/zx/Library/Application Support/typora-user-images/image-20220302233723517.png)

![image-20220302233736610](/Users/zx/Library/Application Support/typora-user-images/image-20220302233736610.png)

2. 事件绑定

![image-20220302233950154](/Users/zx/Library/Application Support/typora-user-images/image-20220302233950154.png)

使用bind:名称=“传递的函数名称”将事件传递给子组件

3. 获取组件实例

![image-20220302234544148](/Users/zx/Library/Application Support/typora-user-images/image-20220302234544148.png)

### behaviors

用于实现组件间代码共享的特性，类似于vue中的‘mixins’

![image-20220302234923820](/Users/zx/Library/Application Support/typora-user-images/image-20220302234923820.png)

#### 工作方式

每个behavior可以包含一组属性，数据，生命周期函数和方法。组件引用他时，他的属性，数据和方法会被合并到组件中。

每个组件可以引用多个behavior，behavior也可以引用其他behavior

#### 创建behavior

![image-20220302235213553](/Users/zx/Library/Application Support/typora-user-images/image-20220302235213553.png)

#### 导入并使用behavior

![image-20220302235345714](/Users/zx/Library/Application Support/typora-user-images/image-20220302235345714.png)

#### behavior中所有可用的节点

![image-20220302235456998](/Users/zx/Library/Application Support/typora-user-images/image-20220302235456998.png)

#### 同名字段的覆盖和组合规则

组件和它引用的behavior中可以包含同名的字段，3种处理规则：

1. 同名的数据字段（data）
2. 同名的属性（properties）或方法（methods）
3. 同名的生命周期函数

具体查看小程序api

## 使用npm包

### Api Promise化

通过额外的配置，将官方提供的，基于回调函数的异步api，升级改造为基于promise的异步api，从而提高代码的可读性，维护性，避免回调地狱的问题

![image-20220303150109334](/Users/zx/Library/Application Support/typora-user-images/image-20220303150109334.png)

## 全局数据共享-Mobx

解决组件之间数据共享的问题 

![image-20220303151420471](/Users/zx/Library/Application Support/typora-user-images/image-20220303151420471.png)

### 将store中的成员绑定到页面中

![image-20220303153330414](/Users/zx/Library/Application Support/typora-user-images/image-20220303153330414.png)

## 分包

是指把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载

- 可以优化小程序首次启动的下载时间
- 在多团队共同开发时，可以更好的解耦协作

### 分包后项目的构成

分包后，小程序项目由1个主包+多个分包组成：

- 主包：一般只包含项目的启动页面或tabbar页面，以及所有分包都需要用到的一些公共资源
- 分包：只包含和当前分包有关的页面和私有资源

### 分包的加载规则

![image-20220303160611745](/Users/zx/Library/Application Support/typora-user-images/image-20220303160611745.png)

### 分包的体积限制

![image-20220303160640406](/Users/zx/Library/Application Support/typora-user-images/image-20220303160640406.png)

### 使用分包

1. 配置方法

![image-20220303160741227](/Users/zx/Library/Application Support/typora-user-images/image-20220303160741227.png)

![image-20220303160810467](/Users/zx/Library/Application Support/typora-user-images/image-20220303160810467.png)

2. 打包原则

![image-20220303161238334](/Users/zx/Library/Application Support/typora-user-images/image-20220303161238334.png)

3. 引用原则

![image-20220303161319559](/Users/zx/Library/Application Support/typora-user-images/image-20220303161319559.png)

### 独立分包

本质上也是分包，比较特殊，可以独立于主包和其他分包而单独运行。

与普通分包的区别：不依赖于主包运行。很大程度上提升分包页面的启动速度

#### 配置方法

在subpackage节点的某个分包中，在root平级层添加independent节点使其为true

#### 引用原则

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源。

![image-20220303223522015](/Users/zx/Library/Application Support/typora-user-images/image-20220303223522015.png)

### 分包预下载

在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。

![image-20220303223808482](/Users/zx/Library/Application Support/typora-user-images/image-20220303223808482.png)

#### 分包预下载的限制

同一个分包的页面享有共同的预下载大小限额2M

![image-20220303224302477](/Users/zx/Library/Application Support/typora-user-images/image-20220303224302477.png)

###