慕尚花坊项目知识点笔记

mobx-miniprogram知识点

1. 作用和用途：

   • mobx-miniprogram用于创建Store对象，用于存储应用的数据。
   • 通过mobx-miniprogram定义管理的状态是响应式的，当状态改变时，所有关联组件都会自动更新相对应的数据。
   • 开发者可以使用mobx-miniprogram很方便地在小程序中全局共享状态，并自动更新视图组件，从而提升小程序的开发效率。

2. 核心概念：

   • observable：用于创建一个被监测的对象，对象的属性就是应用的状态(state)，这些状态会被转换成响应式数据。
   • action：用于修改状态(state)的方法，需要使用action函数显式的声明创建4。
   • computed：根据已有状态(state)生成的新值，是一个方法，在方法前面必须加上get修饰符。

3. 使用步骤：

   • 安装相关包：在小程序根目录下执行npm install --save mobx-miniprogram mobx-miniprogram-bindings。
   • 创建MobX的Store实例：在小程序根目录下新建store.js文件，使用observable、action等创建Store。
   • 将Store中的成员绑定到页面或组件中：可以使用behavior绑定或手工绑定两种方式。

4. 注意事项：

   • 在使用mobx-miniprogram时，需要同时安装mobx-miniprogram和mobx-miniprogram-bindings两个包，前者用于创建Store对象，后者用于将状态和组件、页面进行绑定关联。
   • 小程序对npm包的支持有一些限制，如只支持纯js包，不支持自定义组件和Node.js内置库等。

store知识点

1. Store的作用：

   Store用于存储小程序应用的数据，这些数据是响应式的，即当数据发生变化时，所有与之关联的组件或页面都会自动更新。

2. 创建Store：

   • 使用mobx-miniprogram的observable方法创建一个被监测的对象，该对象的属性即为应用的状态（state）。
   • 在创建Store的过程中，可能会使用到observable、action和computed等MobX的核心概念。

3. Store中的数据：

   • Store中可以包含普通的数据字段、计算属性以及用于修改状态的方法（actions）。
   • 计算属性是一个方法，使用get修饰符来定义，它可以根据已有的状态（state）生成新的值。

4. 使用Store：

   • 使用mobx-miniprogram-bindings将Store中的数据和方法绑定到组件或页面上。
   • 在组件或页面的构造函数中，可以通过配置behavior或使用其他方式将Store绑定到当前的作用域中。
   • 在组件或页面的代码中，可以直接通过this.data.[属性名]或this.[方法名]来访问Store中的数据或方法。

5. 更新Store中的数据：

   • 当Store中的数据发生变化时，所有与之关联的组件或页面都会自动更新。
   • 修改Store中的数据通常需要使用action来确保数据的一致性和可预测性。

6. 全局共享状态：

   通过Store，开发者可以很方便地在小程序中全局共享状态，从而提高开发效率。

fields

在小程序开发中，fields通常不是一个直接在小程序API或框架中使用的术语，但它在某些上下文中（如后端开发、数据模型或表单处理中）有其特定的含义。

1. 数据模型中的fields：

   • 在某些代码生成器或后端框架中，fields用于定义数据模型的属性。例如，在[3]中提到的代码生成器模型中，fields是一个对象，其中的属性描述了数据表的字段和字段对应的表单属性。

2. 表单处理中的fields：

   • 在处理表单数据时，fields可能用于指定表单中应包含的字段列表，以及这些字段的验证规则、默认值等。

3. 小程序中的特殊应用：

   • 在小程序中，虽然fields不是直接用于页面渲染或接口调用的术语，但在处理从服务器获取的数据或向服务器发送数据时，开发者可能会使用类似fields的概念来定义数据结构。

actions

在iOS开发中，actions是一种响应用户操作的机制，它允许开发者在用户与应用程序进行交互时执行特定的任务2。但在小程序开发中，actions并没有直接对应的API或概念。然而，我们可以从以下几个方面来理解它在小程序中的类似应用：

1. 事件处理：

   • 在小程序中，用户与页面元素（如按钮、输入框等）的交互是通过事件处理来实现的。当用户触发某个事件（如点击、输入等）时，小程序会调用相应的事件处理函数来执行特定的操作。这与iOS中的actions在概念上相似，都是响应用户操作并执行相应代码的机制。

2. 自定义方法：

   • 在小程序中，开发者可以定义自己的方法（或称为函数）来处理各种逻辑。这些方法可以被事件处理函数或其他方法调用，以实现特定的功能。虽然这些方法不直接称为actions，但它们在功能上与iOS中的actions相似。

3. 网络请求：

   • 在小程序中，网络请求（如获取服务器数据）通常是通过特定的API来实现的。虽然这些API本身并不直接称为actions，但执行网络请求可以看作是一种特殊的“动作”，它响应了小程序需要从服务器获取数据的需求。

MobX

MobX是一个简单、可扩展的状态管理库，它使得状态管理变得非常简单。MobX通过引入一个叫做“observable”的概念，使得开发者可以轻松地创建可以被观察的对象。当这些对象的值发生变化时，MobX可以自动追踪这些变化，并通知相关的观察者进行更新12。

MobX的主要特点包括：

1. 响应式数据管理：MobX使用响应式编程的概念，可以自动追踪数据的变化并实时更新相关的计算结果。这大大简化了开发者在状态管理方面的工作2。
2. 开发成本低：与Redux相比，MobX的学习成本更低，因为它使用了语义丰富的响应式编程风格，对面向对象开发更友好2。
3. 代码量少：MobX的代码量相对较少，因为它避免了引入过多的概念和样板代码2。
4. 性能优化：MobX可以精确地描述哪些组件需要重新渲染，哪些不需要，从而优化页面的性能2。

Computed

在MobX中，Computed是一个非常重要的概念。Computed属性是基于一个或多个observable属性的计算值，并且只有当这些observable属性发生变化时，Computed属性才会重新计算1。

Computed的主要特点包括：

1. 缓存计算结果：当observable属性没有发生变化时，Computed属性会缓存其计算结果，避免重复计算，从而提高程序的性能和响应速度3。
2. 惰性计算：当observable属性发生变化时，Computed属性不会立即重新计算，而是会标记为“脏”，并在下次访问时才重新计算。这种惰性计算的特性可以避免不必要的计算，进一步提升应用的性能3。
3. 数据变化时自动更新：当参与计算的observable属性发生变化时，Computed属性会自动重新计算其值，并触发相应的依赖更新4。

token

1. token的用途：

   小程序中的token是用来进行API调用的凭证。当用户在小程序中登录或进行其他操作时，服务器会生成一个token并发送给客户端。客户端在后续的请求中需要携带这个token，以证明自己的身份和权限。

2. token的获取：

   获取小程序token通常需要调用微信提供的接口，将小程序的AppID和AppSecret作为参数发送请求，然后获取返回的token。

3. token的使用：

   在使用token进行API调用时，需要将获取到的token添加到请求头部，作为凭证进行接口调用。

4. token的刷新和有效期：

   小程序token有一个有效期，一般为2小时。每次发起API调用时，都需要检查token是否过期，若过期则需要重新获取token。

5. token的安全性：

   在传输和存储token时，需要注意保护其安全性，避免token被泄露给他人。同时，服务器也需要验证token的有效性，确保请求来自合法的客户端。

6. token的生成：

   在服务器端，可以使用Java等后端语言生成token。例如，可以使用Apache Commons Codec、Java内置库等来生成Token。具体生成方式包括将用户的用户名、密码等信息进行加密处理，然后使用Base64编码生成一个字符串，最后使用SHA算法对该字符串进行二次加密，即可生成一个安全的Token。

7. token的校验：

   在小程序中，当客户端发送请求到服务器时，服务器需要验证token的有效性。验证方式可以是对比小程序发送的token和服务器保存的token是否一致，或者进行其他加密算法的验证。

async-validator知识点

1. 概述：

   async-validator是一个用于异步校验数据的库。它广泛应用于表单验证场景，例如ant.design和ElementUI的Form组件都使用了async-validator。

2. 基础用法：

   async-validator的主要功能是校验数据是否合法，并根据校验规则给出提示信息。你可以通过import语句引入async-validator，然后定义校验规则，并使用这些规则来构造一个验证器对象。验证器对象的validate方法用于验证数据是否符合验证规则。

3. 验证规则：

   验证规则是一个对象，其属性名是字段名，属性值是字段的验证规则。规则可以是一个对象、函数或数组。例如，你可以指定某个字段是必填项，或者限制其值的长度和类型等。

4. 自定义校验函数：

   当async-validator中常见的校验规则无法满足需求时，你可以编写自定义的校验函数来校验数据。自定义校验函数接受三个参数：rule（验证规则对象）、value（要验证的值）和callback（处理验证结果的回调）。在自定义校验函数中，你可以编写复杂的异步逻辑来验证数据，例如发送网络请求等。

5. 异步验证：

   async-validator支持异步验证。这意味着你可以在自定义校验函数中执行异步操作（如网络请求），并在操作完成后通过回调函数返回验证结果。

6. validate方法：

   验证器对象的validate方法用于验证数据是否符合验证规则。它接受一个要验证的对象作为参数，并可以配置一些选项，如是否禁止无效值的内部警告、是否在第一个规则验证错误时调用回调等。

7. 返回值：

   validate方法返回一个Promise对象，这意味着你可以使用then和catch方法来绑定成功或失败的处理逻辑。

SwipeCell知识点

1. 定义：

   SwipeCell（或van-swipe-cell）是一个可以左右滑动来展示操作按钮的单元格组件。它通常用于移动应用或小程序中，以提供更加直观和便捷的用户交互体验。

2. 用途：

   SwipeCell提供了一种方式，使得用户在滑动单元格时能够展示隐藏的操作按钮，如“删除”、“收藏”等。这种交互方式常用于列表项的管理和编辑，提高了用户操作的便捷性和效率。

3. 引入方式：

   • 在Vue.js框架中，可以通过npm或yarn等包管理工具安装vant库，然后在Vue文件中引入SwipeCell组件，并使用Vue.use()方法注册该组件。
   • 在微信小程序中，可以直接使用Vant Weapp组件库中的van-swipe-cell组件，通过wx:for指令在列表中渲染多个SwipeCell。

4. 基础用法：

   • SwipeCell组件提供了left和right两个插槽，用于定义两侧滑动区域的内容。你可以在插槽中放置按钮、图标或其他组件，以实现所需的操作功能。
   • 通过设置right-width和left-width属性，你可以控制右侧和左侧滑动区域的宽度。

5. 自定义内容：

   SwipeCell可以嵌套任意内容，比如嵌套一个商品卡片、文本、图片等。这使得你可以根据实际需求，自定义滑动单元格的展示内容。

6. 异步关闭：

   你可以通过传入before-close回调函数或绑定close事件，自定义两侧滑动内容关闭时的行为。例如，你可以在关闭前弹出确认对话框，询问用户是否确定要执行删除操作。

7. 注意事项：

   在使用SwipeCell时，有时可能会遇到touchmove事件和滚动操作冲突的问题，导致组件无法正常关闭。为了解决这个问题，可以在组件的父级view上添加style="touch-action:none;"属性，禁用触摸滚动操作。

8. 代码示例：

   你可以参考搜索结果中提供的代码示例，了解如何在Vue.js或微信小程序中使用SwipeCell组件。