小程序项目笔记

1.事件绑定

小程序中绑定事件与网页开发中的绑定事件几乎一致，只不过在小程序不能通过on的方式绑定事件，也没有click事件，小程序中的绑定事件使用bind方法，click事件也需要使用tap事件来进行代替，绑定事件的方式有两种：

第一种方式：bind事件名，bind后面需要跟上冒号，冒号后面跟上事件名。

第二种方式：bind事件名，bind后面直接跟上事件名。

2.冒泡事件和非冒泡事件

 冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件的事件被触发后，该事件不会像父节点传递。

使用bind绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用catch来绑定事件。

3.条件渲染

条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：

1.使用wx:if、wx:elif、wx:else属性组

2.使用hidden属性

wx:if和hidden二者的区别：

1.wx:if：当条件为true时将结构展示出来，否则结构不会进行展示，通过移除/新增节点的方式来实现。

2.hidden：当条件为true时会将结构隐藏，否则结构展示出来，通过display样式属性来实现的。

4.发起网络请求

发起网络请求获取服务器的数据，需要使用wx.request()接口API

wx.request请求的域名必须在微信公众号平台进行配置，如果使用wx.request请求未配置的域名，在控制台会有相应的报错

5.属性 Properties

属性 Properties 是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和 data 一同用于组件的模板渲染

6.数据监听器

数据监听器可以用于监听和响应任何属性和数据字段的变化，有时，需要在一些数据字段被 setData 设置时，需要执行一些操作。那么就可以使用 `observers` 数据监听器来实现。

7.父往子传值

父组件如果需要向子组件传递指定属性的数据，在 WXML 中需要使用数据绑定的方式

与普通的 WXML 模板类似，使用数据绑定，这样就可以向子组件的属性传递动态数据。

父组件如果需要向子组件传递数据，只需要两个步骤：

1.在父组件 WXML 中使用 数据绑定 的方式向子组件传递动态数据

2.子组件内部使用 properties 接收父组件传递的数据即可

8.子往父传值

子组件如果需要向父组件传递数据，可以通过小程序提供的事件系统实现传递传递，可以传递任意数据。

事件系统是组件间通信的主要方式之一，自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件，流程如下：

1. 自定义组件触发事件时，需要使用 `triggerEvent` 方法发射一个自定义的事件

2. 自定义组件标签上通过 bind 方法监听发射的事件

9.分包加载

分包加载是一种小程序优化技术。将小程序不同功能的代码，分别打包成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。每个分包可以包含多个页面、组件、样式和逻辑等。当小程序需要使用某个分包时，才会加载该分包中的代码。

10.获取用户昵称

想使用微信提供的昵称填写能力，需要三步：

1. 通过 form 组件中包裹住 input 以及 form-type 为 submit 的 button 组件

2. 需要将 input 组件 type 的值设置为 nickname，当用户输入框输入时，键盘上方会展示微信昵称

3. 给 form 绑定 submit 事件，在事件处理函数中通过事件对象获取用户昵称

11.什么是mobx-miniprogram

`mobx-miniprogram` 是针对微信小程序开发的一个简单、高效、轻量级状态管理库，它基于`Mobx`状态管理框架实现。

使用 `mobx-miniprogram` 定义管理的状态是响应式的，当状态一旦它改变，所有关联组件都会自动更新相对应的数据

通过该扩展工具库，开发者可以很方便地在小程序中全局共享的状态，并自动更新视图组件，从而提升小程序的开发效率

需要注意：在使用 `mobx-miniprogram` 需要安装两个包：`mobx-miniprogram` 和 `mobx-miniprogram-bindings`

1.  `mobx-miniprogram` 的作用：创建 `Store` 对象，用于存储应用的数据

2.  `mobx-miniprogram-bindings` 的作用：将状态和组件、页面进行绑定关联，从而在组件和页面中操作数据

12.mobx-miniprogram核心概念

1. `observable`：用于创建一个被监测的对象，对象的属性就是应用的状态(state)，这些状态会被转换成响应式数据。

2. `action`：用于修改状态(state)的方法，需要使用 action 函数显式的声明创建。

3. `computed`：根据已有状态(state)生成的新值。计算属性是一个方法，在方法前面必须加上 `get` 修饰符

13.Component方法

Component 方法用于创建自定义组件。

小程序的页面也可以视为自定义组件，因此页面也可以使用 Component 方法进行构建，从而实现复杂的页面逻辑开发。

如果我们使用了 Component 方法来构建页面，那么页面中如果想使用 `Store` 中的数据，使用方式和组件的使用方式是一样的

1. 从 `mobx-miniprogram-bindings` 库中导入 `ComponentWithStore` 方法

2. 将 `Component` 方法替换成 `ComponentWithStore` 方法

3. 然后配置 `storeBindings` 从 `Store` 中映射数据和方法即可

14.fields对象写法

1. 映射形式：指定 data 中哪些字段来源于 `store` 以及它们在 `store` 中对应的名字。

   - 例如 `{ a: 'numA', b: 'numB' }`

2. 函数形式：指定 data 中每个字段的计算方法

   - 例如 `{ a: () => store.numA, b: () => anotherStore.numB }`

15.actions对象写法

1. 映射形式：指定模板中调用的哪些方法来源于 `store` 以及它们在 `store` 中对应的名字。

   - 例如 `{ buttonTap: 'update' }`

16.计算属性 `computed`

如果需要在组件中使用计算属性功能，需要 `miniprogram-computed` 库中导入 `ComponentWithComputed` 方法

在使用时：**<font color="red">需要将 `Component` 方法替换成 `ComponentWithComputed` 方法 </font>**，原本组件配置项也需要写到该方法中

在替换以后，就可以新增 `computed` 以及 `watch` 配置项。

17.什么是 Token

`Token` 是服务器生成的一串字符串，用作客户端发起请求的一个身份令牌。当第一次登录成功后，服务器生成一个 `Token` 便将此 `Token` 返回给客户端，客户端在接收到 `Token` 以后，会使用某种方式将 `Token` 保存到本地。以后客户端发起请求，只需要在请求头上带上这个 `Token` ，服务器通过验证 `Token` 来确认用户的身份，而无需再次带上用户名和密码。

18.Token的具体流程

1. 客户端向服务器发起登录请求，服务端验证用户名与密码

2. 验证成功后，服务端会签发一个 `Token`，并将 `Token` 发送到客户端

3. 客户端收到 `token` 以后，将其存储起来，比如放在 `localStorage` 、`sessionStorage` 中

4. 客户端每次向服务器请求资源的时候需要带着服务端签发的 `Token`，服务端收到请求，然后去验证客户端请求里面带着的 `Token` ，如果验证成功，就向客户端返回请求的数据

19.开通腾讯位置服务

1. 申请密钥：[密钥申请](https://lbs.qq.com/dev/console/application/mine)，微信扫码进行登录，选择绑定已有账号、或者注册新账号 (需要绑定手机、验证邮箱)

2. 控制台 → 应用管理→[我的应用](https://lbs.qq.com/dev/console/key/manage) → 创建应用 → 添加 key  →  创建完成

   <img src="http://8.131.91.46:6677/mina/floor/创建应用.jpg" style="zoom:60%;" />

   <img src="http://8.131.91.46:6677/mina/floor/添加 key.jpg" style="zoom:76%; border: 1px solid #ccc" />

3. 下载微信小程序 [JavaScriptSDK v1.2](https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip)，下载将 `.js` 文件放到小程序的 `libs` 目录下

4. 进行安全域名设置，或者点击微信开发者工具中的暂时不校验域名

20.什么是async-validator

async-validator`是一个基于 `JavaScript` 的表单验证库，支持异步验证规则和自定义验证规则

主流的 `UI` 组件库 `Ant-design` 和 `Element`中的表单验证都是基于 `async-validator`

使用 `async-validator` 可以方便地构建表单验证逻辑，使得错误提示信息更加友好和灵活。

21.async-validator使用步骤

1. 安装并在项目中导入 `async-validator`

2. 创建验证规则

3. 创建表单验证实例，将验证规则传递给构造函数，产生实例

4. 调用实例方法 `validate` 对数据进行验证

   - 第一个参数：需要验证的数据

   - 第二个参数：回调函数，回调函数有两个参数 errors, fields

     - errors：如果验证成功，返回 null，验证错误，返回数组

     - fields：需要验证的字段，属性值错误数组

22.发起微信支付

小程序客户端在接收支付参数后，调用 `wx.requestPayment()` 发起微信支付，

唤醒支付弹窗，用户开输入支付密码或者进行指纹等操作，微信服务器会进行验证，如果验证成功，就会发起支付。

然后会将支付结果返回给公司后端，也会返回给 `wx.requestPayment()`

并且会微信通知用户支付结果

23.API

微信小程序提供了丰富的API接口，这些接口涵盖了网络请求（如wx.request用于发起网络请求）、页面跳转（如wx.navigateTo用于跳转到应用内页面）、数据缓存（如wx.getStorageSync用于同步获取本地缓存数据）、交互反馈（如wx.showToast用于显示消息提示框）、设备信息获取（如wx.getSystemInfo用于获取系统信息）、媒体操作（如wx.chooseImage用于选择图片）、界面控制（如wx.switchTab用于跳转到tabBar页面）以及开放接口（如wx.login用于获取登录凭证）等多个方面。开发者可以根据自身需求调用这些API，以实现在微信小程序中的各项功能

24.生命周期

微信小程序的生命周期涵盖了从启动、显示、隐藏到卸载的全过程，每个阶段都有相应的生命周期函数供开发者调用。启动阶段会进行初始化操作，显示阶段响应用户操作，隐藏阶段则保持后台运行，卸载阶段执行清理操作。此外，每个页面还有自己的生命周期，包括加载、显示、初次渲染完成、隐藏和卸载等事件，允许开发者在特定时机执行相应操作。通过合理利用这些生命周期函数，开发者可以优化小程序性能，提升用户体验。

25.路由与通信

在小程序中实现页面的跳转，有两种方式：

1. 声明式导航：`navigator` 组件

2. 编程式导航：使用小程序提供的 `API`

   - `wx.navigateTo()`：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

   - `wx.redirectTo()`：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

   - `wx.switchTab()`：跳转到 tabBar 页面，路径后不能带参数

   - `wx.navigateBack()`：关闭当前页面，返回上一页面或多级页面

3. **路径后可以带参数，参数需要在跳转到的页面的 `onLoad` 钩子函数中通过形参进行接收**

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

   - 参数键与参数值用 `=` 相连

   - 不同参数用 `&` 分隔

   - 例如 `path?key=value&key2=value2`

26.scroll-view 上拉加载

bindscrolltolower：滚动到底部/右边时触发

lower-threshold：距底部/右边多远时，触发 scrolltolower 事件

enable-back-to-top：**让滚动条返回顶部**，iOS 点击顶部状态栏、安卓双击标题栏时，只支持竖向

27.scroll-view 下拉刷新

refresher-enabled：开启自定义下拉刷新

refresher-default-style自定义下拉刷新默认样式支持设置 `black | white | none`， none 表示不使用默认样式

refresher-background：自定义下拉刷新区域背景颜色

bindrefresherrefresh：自定义下拉刷新状态回调

refresher-triggered：设置当前下拉刷新状态，(true 下拉刷新被触发，false 表示下拉刷新未被触发，**用来关闭下拉效果**)

28.自定义组件

微信小程序自定义组件是开发者为了提高代码复用性和开发效率而创建的可重用功能模块。开发者可以通过在components文件夹中创建独立的组件文件夹，并在其中生成.js、.json、.wxml和.wxss文件来定义组件。这些组件可以在其他页面的.json文件中通过"usingComponents"字段进行局部注册，并在.wxml文件中使用。自定义组件支持父子组件间的数据传递和事件通信，使得开发者能够构建更加灵活和模块化的微信小程序。通过合理使用自定义组件，开发者可以显著提升开发效率，并降低代码的维护成本。

29.npm构建

微信小程序支持使用npm来管理和使用第三方的JavaScript库和工具。开发者首先需要在本地安装Node.js和npm，然后在微信小程序项目的根目录下通过npm init初始化npm环境，并通过npm install命令安装所需的npm包。安装完成后，在微信小程序开发者工具中执行“构建npm”操作，将npm包中的代码和资源文件复制到项目的miniprogram_npm目录中。之后，开发者可以在小程序的.wxml文件中通过usingComponents属性引入并使用npm包中的组件。这样，通过npm构建，开发者能够轻松地将第三方库集成到微信小程序中，增强小程序的功能和用户体验。

30.分包加载

微信小程序分包加载是一种优化策略，允许开发者将小程序代码和资源拆分成多个包，并在用户需要时按需加载。这种技术通过减少首次加载的数据量来提高加载速度，从而优化用户体验。开发者在app.json文件中配置分包信息，包括分包名称、根目录和包含的页面等，并在小程序根目录下创建对应的分包目录。当用户访问分包中的页面时，小程序会动态加载所需的分包。通过合理划分代码和资源，以及确保微信客户端版本符合要求，开发者可以有效利用分包加载来提升小程序的整体性能和用户体验。