慕尚花坊项目笔记

生命周期

生命周期是一些名称固定自动执行的函数

1.页面生命周期

1. onLoad 在页面加载时触发，一个页面只会执行 1 次，常用于获取地址参数和网络请求
参数 options 接收的是传递到当前页面路径中的参数
2. onShow 页面显示/切入前台时触发，常用于动态更新数据或状态
3. onReady 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景
4. onHide 在页面隐藏/切入后台时触发，常用于销毁长时间运行的任务，如定时器
5. onUnload 页面卸载时触发

 2.组件生命周期

小程序自定义组件的生命周期需要定义在 lifetimes 中：

Component({
  //组件生命周期
  lifetimes: {}
})

1. created 在组件初步创建时执行，注意此时不能调用 setData

2. attached 在组件完成页面初始化的时候执行

3. ready 在组件布局完成后执行

4. detached 在组件被销毁的时候触发

3.小程序生命周期

小程序的生命周期定义在app.js里面

App({
  /*当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/
  onLaunch: function () {
    console.log('小程序启动了')
  },
  /* 当小程序启动，或从后台进入前台显示，会触发 onShow*/
  onShow: function (options) {
    console.log('小程序显示了',options)
  },
  /*当小程序从前台进入后台，会触发 onHide */
  onHide: function () {
    console.log('小程序隐藏了')
  },
  /* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/
  onError: function (msg) {}
})

1. onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）
2. onShow 小程序前台运行时执行，常用于更新数据或状态
3. onHide 小程序后台运行时执地，常用于销毁长时间运行的任务，如定时器
4. onError 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

事件处理

1.事件绑定

bind:事件类型=事件回调 / bind事件类型=事件回调

<!-- 按钮的点击事件的监听 
 bind(绑定,监听) tap(事件类型)  tap 轻击
 bing:tap / bingtap 
-->
<button type="primary" bindtap="onBtn" data-info="⭐"
 >click me</button>

小程序中使用 bind 进行事件的绑定 , 且在绑定的事件函数中, 是不可以传参的 , 所有只能使用其他的方式传参

2.事件传参

<!-- 小程序中的事件传参
 传参: data-*(自定义参数名)
       mark: * 
-->
<button bindtap="onBtn"  data-id="{{index}}" mark:f2="f2">事件传参</button>

1. data- 自定义参数名=“值”

2. mark : 自定义参数名=“值”

3.参数接收

小程序里面的参数是用事件对象完成接收的

data - * 传递的参数 是在 e.target.dataset中

mark: * 传递的参数 是在 e.mark 中

page({
  onBtn(e){
    // 参数接收 e.target.dataset.info
    console.log(e);
  },
})

4.常用的通用事件

bindtap 点击事件
bindlongpress 长按事件
bindinput 键盘输入事件
bindconfirm 回车事件
bindfocus 输入框聚焦事件
bindblur 输入框失焦事件
bindchange value 改变事件
bindsubmit 表单提交事件
bindreset 重置表单事件

5.组件事件

前面介绍的 tap 事件可以在绝大部分组件是监听，可以将其理解为通用事件类型，然而也有事件类型只属于某个组件，将其称为组件事件。

scroll-view 组件中的事件：

bind:scrolltolower 当滚动内容到达底部或最右侧时触发
bind:refresherrefresh 执行下拉操作时触发
refresher-enable 启用自定义下拉刷新

表单组件中的事件：

change 表单数据发生改变时触发（input 不支持）
submit 表单提交时触发，button 按钮必须指定 form-type 属性

mobx-miniprogram

mobx-miniprogram是用于微信小程序的全局状态管理库。它允许开发者在多个页面和组件之间共享数据，并通过响应式系统实现数据的自动更新。以下是关于mobx-miniprogram的详细介绍：

1. 作用

   • 创建Store对象，用于存储应用的数据。
   • 允许在组件和页面之间共享数据，并实现数据的自动更新。

2. 核心概念

   • observable：用于创建一个被监测的对象，对象的属性即应用的状态（state），这些状态会被转换成响应式数据。

3. 配合使用的库

   • mobx-miniprogram-bindings：这个库用于将mobx-miniprogram创建的状态（Store）与组件或页面进行绑定关联，从而在组件和页面中操作数据。

4. 使用步骤

   • 安装相关包：通过npm安装mobx-miniprogram和mobx-miniprogram-bindings。
   • 创建Store实例：在store文件夹中创建一个store.js文件，并使用mobx-miniprogram来创建Store实例对象。
   • 绑定数据到页面和组件：使用mobx-miniprogram-bindings将Store中的共享数据或方法绑定到页面或组件中。
   • 在页面和组件中使用数据：在页面或组件的js文件中，通过引入的Store实例来访问和操作数据。

综上所述，mobx-miniprogram为微信小程序提供了一种强大的全局状态管理方案，通过创建和共享Store实例对象，实现了数据的跨页面和组件共享，并通过响应式系统实现了数据的自动更新。

创建store对象

在JavaScript中，

特别是在使用Redux这样的状态管理库时，我们通常会创建一个store对象来管理应用程序的状态。然而，如果是在一个更一般的上下文中谈论“创建store对象”，那么具体的实现可能会因需求而有所不同。

首先，确保已经安装了 MobX。如果还没有安装，可以通过 npm 或 yarn 来安装：

npm install mobx
# 或者
yarn add mobx

然后，可以创建一个 store，如下所示：

import { observable, action, makeObservable } from 'mobx';

class MyStore {
  // 使用 observable 标记状态变量，使其可观察
  count = 0;

  constructor() {
    // 使用 makeObservable 来自动追踪 observable 属性和 action 方法
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action
    });
  }

  // 使用 action 标记的方法可以改变状态
  increment = () => {
    this.count += 1;
  };

  decrement = () => {
    this.count -= 1;
  };
}

// 创建 store 实例
const store = new MyStore();

// 现在可以使用 store.increment() 和 store.decrement() 来改变 count 的值
// 任何观察了 count 的组件都会自动更新

在这个例子中，MyStore 类包含了一个可观察的状态变量 count 和两个动作 increment 和 decrement。使用 makeObservable 函数，我们告诉 MobX 哪些属性是可观察的，哪些方法是动作。

请注意，MobX 6 以后推荐使用 makeObservable 来显式定义哪些属性和方法是需要被追踪的，这有助于提高性能和可读性。

创建 store 对象后，可以在应用程序的其他部分使用这个 store 来管理状态。例如，如果在使用 React，可以使用 Provider 组件来提供 store，然后使用 observer 函数或 observer 装饰器来创建响应状态变化的组件。在微信小程序中，可以通过小程序的页面或组件的生命周期方法来访问和使用这个 store。

如何在组件中使用Store数据

在React和Redux中，你通常会在组件中使用connect函数（来自react-redux库）来将Redux store中的数据映射到组件的props中，以及将action creators映射为props上的函数，以便组件可以触发actions来更新store中的数据。

1. 确保 Store 可访问

首先，需要确保 Store 实例可以在组件中被访问到。通常，这是通过将 Store 作为属性传递给组件或使用全局状态管理（如 React 的 Context API 或 Vue 的 provide/inject）来实现的。

2. 读取 Store 中的数据

在组件中，可以直接读取 Store 中的可观察状态。由于 MobX 的响应性，当状态改变时，组件会自动更新。

3. 调用 Store 中的 actions

如果 Store 中定义了 actions，可以在组件的方法中调用这些 actions 来更新状态。

示例：在 React 组件中使用 Store

假设已经创建了一个名为 MyStore 的 Store，并且正在使用 React。以下是如何在 React 组件中使用这个 Store 的示例：

import React from 'react';
import { observer } from 'mobx-react';
import MyStore from './MyStore'; // 假设 Store 定义在这个文件中

// 创建 Store 实例
const store = new MyStore();

// 使用 observer 包装器来使组件响应 Store 中状态的变化
const MyComponent = observer(() => {
  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={() => store.increment()}>Increment</button>
      <button onClick={() => store.decrement()}>Decrement</button>
    </div>
  );
});

export default MyComponent;

示例：在微信小程序页面中使用 Store

在微信小程序中，可以在页面的 onLoad 或 onShow 生命周期方法中初始化 Store，并在页面的 data 中使用 Store 的状态：

// pages/index/index.js
import MyStore from '../../store/MyStore'; // 假设 Store 定义在这个文件中

Page({
  data: {
    count: 0
  },
  onLoad: function() {
    const store = new MyStore();
    this.setData({ count: store.count });
  },
  onShow: function() {
    this.setData({ count: store.count });
  },
  increment: function() {
    store.increment();
    this.setData({ count: store.count });
  },
  decrement: function() {
    store.decrement();
    this.setData({ count: store.count });
  }
});

请注意，微信小程序的页面数据绑定和事件处理与 React 等框架有所不同，因此需要使用小程序的 setData 方法来更新页面数据，并在事件处理函数中调用 Store 的 actions。

注意事项

• 确保 Store 实例在整个应用程序中是单例，以避免状态不一致。
• 在组件卸载时，如果有必要，可以取消对 Store 的引用，以避免内存泄漏。
• 使用 observer 包装器或 observer 函数来确保组件只响应它关心的状态变化，这有助于提高性能。

wx.showToast()基本使用

onShow(){ 
 wx.showToast({
 title: '成功',  // 显示的内容

// icon可以取值 success、loading等，默认为success、失败为error。如果不需要图标，可以设置为 none。
    icon: 'success',   
duration: 2000 

//wx.showToast() 还有一些其他的参数，mask：是否显示透明蒙层，防止触摸穿透，默认 false。

})
}

对 wx.showModal() ⽅法进⾏封装， 封装后的新⽅法叫 modal。

调⽤该⽅法时，传递对象作为参数，对象的参数同 wx.showModal() 参数⼀致。

封装的 modal ⽅法的内部通过 Promise 返回⽤户执⾏的操作(确定和取消，都通过 resolve 返回)。

如果不传递参数，默认值为空对象。

通过new关键字构建一个promise对象

Promise对象用于表示一个异步操作的最终完成或失败及其结果值。

调用方式

新封装的本地存储模块，有两种调⽤的⽅式：

1：模块化的⽅式导⼊使⽤

2：将封装的模块挂载到 wx 全局对象身上

实现步骤：

1：在 extendApi.js ⽂件中新建 modal ⽅法，⽅法内部

2：modal ⽅法，⽅法内部⽤来处理封装的逻辑

WxRequest类

1.通过类的方式进行封装，会让代码更具有复用性，也可以方便添加新的属性和方法。

2.wx.request函数接受一个包含请求信息的对象作为参数，该对象包括请求的URL、请求方法（如GET、POST等）、请求头信息以及请求数据等。

3.defaults是默认参数对象，其中包括请求基地址、服务器接口地址、请求方式、请求参数、请求头、数据的交互格式、默认超时时间。

4.interceptors：定义拦截对象，包括请求拦截和响应拦截方法，方便在请求拦截或响应之前进行处理。

5.params为用户传入的请求配置项，用于创建和初始化类的属性和方法，需要使用Object.assign方法合并默认参数以及传递的的请求参数。

6.request方法，用于接受一个对象类型的参数。

7.设置请求拦截器和响应拦截器对请求和响应进行处理 。

8.封装了get、post、put和delete方法，分别用于发起GET、POST、PUT和DELETE请求，利用request方法来实现请求功能

9.将WxRequest实例暴露出去，方便在其他文件中进行使用

fields、actions对象写法

在mobx-miniprogram-bindings中，fields和actions是用于定义你需要从MobX store中绑定到页面或组件的字段（observable）和动作（actions）的对象。

fields 对象

fields对象应该是一个对象字面量，其属性名对应你想要绑定的observable字段名。这些字段名将作为数据源的键（key）被映射到页面的data对象中。

actions 对象

actions对象也应该是一个对象字面量，其属性名对应你想要绑定的action名。这些动作名将被映射为页面方法，以便你可以在页面中直接调用它们。

了解localStorage、sessionStorage、cookie的区别

1.存储大小：

localStorage 和 sessionStorage：一般来说，两者的存储大小都较大，通常可以存储 5MB 或更多的数据

cookie：存储大小通常较小，一般只能存储 4KB 左右的数据。

2.存储期限

localStorage：数据没有过期时间，会一直存储在浏览器中，直到用户手动清除或者通过 JS 代码来清除。

sessionStorage：数据在当前浏览器窗口或标签页会话结束时清除，也就是说，当页面关闭或者浏览器标签页关闭后，数据就会被清除。

cookie：数据的过期时间由服务器端设置，也可以由客户端通过 JS 代码来设置。如果不设置过期时间，那么 cookie 的生命周期为浏览器会话期间，当浏览器关闭时，cookie 就会消失。如果设置了过期时间，那么 cookie 会在过期时间后自动删除。

3.数据可见性

localStorage 和 sessionStorage：数据只在当前浏览器的标签页或窗口中可见，不会发送给服务器。

cookie：每次请求服务器时，浏览器都会发送与当前域名相关的 cookie 到服务器，因此服务器可以读取和写入 cookie。

4.存储位置

localStorage 和 sessionStorage：数据存储在浏览器中，即客户端。

cookie：数据存储在浏览器中，但每次请求服务器时都会发送，因此也可以视为在服务器和客户端之间共享。

5.API使用

localStorage、sessionStorage：使用简单的setItem、getItem和removeItem等方法进行操作。

cookie：需要通过Document.cookie属性进行读写操作。

不同的请求方式区别（get、post....）

1.GET方法：主要用于从指定的资源请求数据

安全性：GET请求的参数会附加在URL后面，并以查询字符串的形式呈现。

长度限制：由于URL的长度有限制，GET请求的参数数量和数据量也相应地受到限制。

数据传输方式：GET请求通常只包含URL中的查询参数，不包含请求体。

通信类型：单向请求-响应协议，客户端发送请求，服务器返回数据。

幂等性：GET请求是幂等的，这意味着对同一URL的多个GET请求应该产生相同的结果

2.POST方法：主要用于向服务器提交数据

非幂等性：POST方法是非幂等的，即多次发送相同的POST请求可能会导致不同的结果。

请求体：POST请求包含请求体，可以发送各种类型的数据，如表单数据、JSON、XML等。

用途：用于向服务器提交数据以创建或更新资源。

安全性：相比GET方法，POST方法更为安全，因为它将参数包含在请求体中而不是URL中

数据传输方式：POST请求的数据包含在请求体中，可以传输大量数据，且支持多种数据类型。

通信类型：仍然是单向请求-响应协议，但侧重于数据的提交和处理。

3.PUT方法：用于更新服务器上已有的资源

用途：用于替换服务器上的资源。

幂等性：PUT请求是幂等的，这意味着对同一资源的多次PUT请求应该产生相同的结果。

请求体：PUT请求通常包含请求体，用于传输要更新的资源内容。

数据传输方式：PUT请求的数据也包含在请求体中，它通常用于上传整个资源或文件。

通信类型：与POST类似，但语义上更侧重于资源的替换而非创建。

4.DELETE方法：主要用于请求服务器删除指定的资源

安全性：DELETE请求通常不会缓存，也不会在浏览器的历史记录中留下痕迹，这使得它相对更安全。

用途：请求服务器删除指定的资源。

数据传输方式：通常不需要额外的请求体数据。

通信类型：单向请求-响应协议，专注于资源的删除操作。

幂等性：DELETE请求不是幂等的，这意味着多次发送相同的DELETE请求可能会导致不同的结果

5.HEAD方法

用途：与GET方法类似，但服务器在响应中只返回HTTP头部，不返回实际数据。

数据传输方式：只返回响应头，不包含响应体。

通信类型：单向请求-响应协议，主要用于获取资源的元信息。

promise的用法

1. 创建一个 Promise

使用 new Promise() 构造函数来创建一个新的 Promise 对象。Promise 构造函数接受一个函数作为参数，这个函数有两个参数：resolve 和 reject。

2. 使用 .then() 和 .catch() 处理 Promise

有了 Promise 对象，使用 .then() 方法来处理成功的情况，使用 .catch() 方法来处理失败的情况。

3. Promise 链

可以将多个 .then() 和 .catch() 方法链接在一起，形成一个 Promise 链。每个 .then() 方法都会返回一个新的 Promise，因此可以继续链式调用。

4. Promise.all()

如果有一组 Promise 对象，并且想要等待它们全部完成后再执行某些操作，你可以使用 Promise.all() 方法。

5. Promise.race()

Promise.race() 方法返回一个新的 Promise 实例，这个 Promise 在给定的 Promise 数组中的任何一个 Promise 完成或失败时，以相同的解析值或拒绝原因立即解析或拒绝。

 

请求拦截器&响应拦截器用法、loading用法

请求拦截器

请求拦截器可以在发送请求之前对请求进行拦截和处理，比如添加请求头、设置请求参数等。一般用于全局配置，例如在每个请求中都需要添加认证信息或者设置统一的请求头。

使用方法如下：

1.在发送请求之前，通过创建一个axios实例，并使用interceptors.request.use方法添加请求拦截器。

2.在拦截器中可以对请求进行修改或者添加额外的配置。

3.最后通过return语句返回修改后的请求配置。

响应拦截器

响应拦截器可以在接收到响应之后对响应进行拦截和处理，比如对返回的数据进行统一处理、错误处理等。一般用于全局配置，例如对所有的响应进行统一的错误处理或者数据格式转换。

使用方法如下：

1.在接收到响应之后，通过创建一个axios实例，并使用interceptors.response.use方法添加响应拦截器。

2.在拦截器中可以对响应进行修改或者添加额外的处理逻辑。

3.最后通过return语句返回修改后的响应数据。

loading用法

 loading是在前端开发中常用的交互反馈方式，用于在请求数据时显示加载状态，提高用户体验。一般通过添加一个loading组件或者在页面中显示loading图标来实现。

使用方法如下：

1.在发送请求之前，显示loading状态，可以通过设置一个loading变量为true来控制loading组件的显示。

2.在接收到响应之后，隐藏loading状态，可以通过将loading变量设置为false来控制loading组件的隐藏。

不同的状态码代表什么

常见的 HTTP 状态码：

信息响应(100–199)

成功响应(200–299)

重定向(300–399)

客户端错误(400–499)

服务器错误 (500–599)

样式优先级

1.权重

不的选择器具有不同的权重。权重越高，优先级越高。通常，ID选择器的权重高于类选择器和标签选择器。例如，#content的权重高于.content和view。

2.出现顺序

当权重相同时，后面出现的样式规则会覆盖前面的样式规则。这意味着，如果两个选择器具有相同的权重，并且都能匹配同一个元素，那么后面定义的样式将优先应用。

3.!important

在微信小程序中，也应避免使用!important，因为它会使样式的调试和维护变得困难。

4.页面与全局样式

在小程序中，单独页面的样式会优先于全局样式（即app.wxss中的样式）。例如，一个元素在单独页面的样式定义将覆盖其在app.wxss中的样式定义。

5.组件默认样式

微信小程序中的组件可能具有默认的样式。在某些情况下，这些默认样式可能会导致优先级问题。开发者需要了解并考虑这些默认样式的影响。

为了确保样式的正确应用，应该仔细规划他们的选择器，并尽量避免使用过于复杂或不明确的选择器。同时，也应该注意样式的组织和顺序，以确保样式能够按照预期的方式应用。

wx:for / v-for的用法

wx:for 是微信小程序中用于列表渲染的指令，而 v-for 是 Vue.js 框架中用于渲染列表的指令。虽然它们的使用场景相似，但语法和具体实现有所不同。

  1.微信小程序中的 wx:for

在微信小程序中，wx:for用来遍历数组或对象，并渲染一个模板块多次。

遍历数组：

在这个例子中，array是一个数组，wx:for会遍历这个数组，并为每个元素创建一个<view>元素。wx:key是一个字符串，用来指定列表中项目的唯一的标识符，有助于提高列表渲染的性能。在数组遍历中，index是当前项的索引，item是当前项的值。

遍历对象：

在这个例子中，object 是一个对象，wx:for会遍历这个对象的所有属性。key是当前属性的键名，item是一个对象，包含当前属性的键（key）和值（value）。

2. Vue.js 中的 v-for

在 Vue.js 中，v-for 指令也用于渲染一个列表。

遍历数组：

这里，array是一个数组，v-for会遍历这个数组，并为每个元素创建一个<div>元素。:key是一个绑定，用来指定列表中项目的唯一的标识符。item是当前项的值，index是当前项的索引。

遍历对象：

在这个例子中，object是一个对象，v-for会遍历这个对象的所有属性。key是当前属性的键名，value当前属性的值。

注意事项

• 1.在使用wx:for和v-for时，都应该提供一个唯一的key，这有助于框架更高效地更新和重新渲染列表。
• 2.当列表数据发生变化时，框架会根据key来判断哪些元素是新的、哪些元素需要被更新或移除。
• 3.如果不提供key，框架会使用一种启发式的方式来更新列表，但这可能会导致性能问题和更新错误。

监听事件watch/bindchange

在微信小程序中，监听数据变化或组件事件的方式有几种，其中包括使用 watch（在Vue等框架中常见）以及微信小程序自带的 bindchange 事件绑定。然而，需要注意的是，微信小程序原生并不支持 watch，这是Vue等前端框架的特性。但在实际开发中，可以通过一些方法模拟实现类似 watch 的功能。

使用 bindchange 监听事件

bindchange 是微信小程序中用于监听某些组件值变化的事件。例如，<picker>、<input>、<switch> 等组件都支持 bindchange 事件。当组件的值发生变化时，会触发这个事件，并可以在事件处理函数中获取到变化后的值。

示例：

模拟实现类似 watch 的功能

虽然微信小程序没有内置的 watch 功能，但你可以通过监听页面的onShow、onReady等生命周期函数，或者通过手动设置数据观察器来模拟实现类似的功能。

一种常见的做法是在数据变化时手动触发一个自定义的函数来执行相应的操作。这通常涉及到在setData调用前后添加一些逻辑。

示例：

在上面的代码中，changeMyValue方法在改变myValue的值之前记录了旧值，并在setData的回调中调用了observeMyValue方法来模拟watch的效果。

请注意，过度使用这种方法可能会导致代码复杂性和维护成本的增加，因此应谨慎使用，并考虑是否真的需要监听每个数据变化，或者是否有更简单的方法来实现你的需求。在大多数情况下，通过合理地组织代码和使用组件的事件绑定，应该能够避免需要模拟watch的情况。

自定义组件

1.小程序组件 – 创建与引用

组件的创建

在项目的根目录中，鼠标右键，创建 components 文件夹 --> test
在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”
为新建的组件命名之后，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss

 组件的引用

在需要引用组件的页面中，找到页面的 .json 配置文件，新增 usingComponents 节点
在 usingComponents 中，通过键值对的形式，注册组件；键为注册的组件名称，值为组件的相对路径
在页面的 .wxml 文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示到页面上

2.小程序组件 – 组件的样式

组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。编写组件样式时，需要注意以下几点：
组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器，请改用 class选择器。
组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
子元素选择器(.a>.b)，只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， app.wxss 中的样式、组件所在页面的样式对自定义组件无效。

3.小程序组件 – 数据与方法

1. 使用 data 定义组件的私有数据

小程序组件中的 data与小程序页面中的 data 用法一致，区别是： 页面的 data 定义在 Page() 函数中 组件的 data 定义在 Component() 函数中

在组件的 .js 文件中：

如果要访问 data 中的数据，直接使用 this.data.数据名称 即可 如果要为 data 中的数据重新赋值，调用 this.setData({ 数据名称: 新值 }) 即可

在组件的 .wxml 文件中 如果要渲染 data 中的数据，直接使用 {{ 数据名称 }} 即可

2.组件的 properties

properties 简介：

组件的对外属性，用来接收外界传递到组件中的数据。 类似于 Vue 中的 props，小程序组件中的 properties，是组件的对外属性，用来接收外界传递到组件中的数据。

在小程序中，组件的 properties 和 data 的用法类似，它们都是可读可写的 data 更倾向于存储组件的私有数据 properties 更倾向于存储外界传递到组件中的数据

声明 properties 的两种方式

// 组件的js
Component({
 /**
   * 组件的属性列表
   */
	properties: {
		// 完整的定义方式
		propA: { // 属性名
		 type: String, // 属性类型
		 value: '' // 属性默认值
		},
		propB: String // 简化的定义方式
	}
})

注意：type 的可选值为 Number，String、Boolean、Object、Array、null(表示不限制类型) 

为组件传递 properties 的值 

可以使用数据绑定的形式，用于父组件向子组件的属性传递动态数据

<!-- 引用组件的页面模板 -->
<second-com prop-a="{{ priceData }}"></second-com>

注意：

在定义 properties 时，属性名采用驼峰写法（propertyName）；
在 wxml 中，指定属性值时，则对应使用连字符写法（property-name=“attr value”），
应用于数据绑定时，采用驼峰写法（attr="{{propertyName}}"）。

组件间的通信

1. 组件之间的三种基本通信方式

WXML 数据绑定：用于父组件向子组件的指定属性传递数据，仅能设置 JSON 兼容数据，即利用properties,这个本文上面有介绍
事件：用于子组件向父组件传递数据，可以传递任意数据。
父组件通过 this.selectComponent 方法获取子组件实例对象，便可以直接访问组件的任意数据和方法。

2. 通过事件监听实现子向父传值

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

什么是自定义事件呢,你可以简单的理解为:在触发子组件的一些事件的时候,同时也能触发父组件对应的事件并对父组件中的某些数据进行修改的事件就是自定义事件.

2.1在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

getNum(){
console.log('开始获取子组件传递的值')
}

2.2在父组件的 wxml 中，通过自定义事件的形式，将步骤一中定义的函数引用，传递给子组件

<!--bind:后面的myEvent为自定义事件名，要与this.triggerEvent中的事件名保持一致,getNum为父组件定义的函数-->
<view>
	<custom-test  bind:myEvent="getNum"></custom-test>
	<!-- 或者可以写成 -->
	<!--<custom-test bindmyEvent="getNum"></custom-test>-->
</view>

2.3 在子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', { /* 参数对象 */ }) ，将数据发送到父组件 

<!--子组件页面，设置按钮进行事件的触发-->
<view>=====下面是通过自定义事件传值到父级====</view>
<button bindtap="sendValue" type="primary">自定义事件传值</button>

//子组件的js
 /**
   * 组件的初始数据
   */
  data: {
    num:1
  },
  /**
   * 组件的方法列表
   */
  methods: {
	  sendValue() {
	     this.triggerEvent('myEvent',{num:this.data.num})
	   }
  }

2.4 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据 

  getNum(e) {
    console.log('开始获取子组件的num值')
    console.log(e)
  },

 

内置API

内置 API 实际上就是小程序提供的一系列的方法，这些方法都封装在了全局对象 wx 下，调用这些方法实现小程序提供的各种功能，如网络请求、本地存储、拍照、录音等。

1. 网络请求

调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互

2. 界面交互

wx.showLoading 显示 loading 提示框 title 文字提示内容 mask 是否显示透明蒙层，防止触摸穿透

wx.hideLoading 隐藏 loading 提示框

wx.showToast 消息提示框（轻提示） mask 是否显示透明蒙层，防止触摸穿透 duration 延迟时间（提示框显示多久） icon 指定图标，none 不使用图标

3.本地存储

wx.setStorageSync('自定义属性名',数据) 存入一个数据，复杂类型数据不需要 JSON.stringify 处理
wx.getStorageSync('自定义属性名') 读取一个数据，复杂类型数据不需要 JSON.parse 处理
wx.removeStorageSync('自定义属性名') 删除一个数据
wx.clearStorageSync() 清空全部数据

4.API 特征

小程序中提供的 API 数量相当的庞大，很难也没有必要将所有的 API 全部掌握，但是这些 API 具有一些共有的特征：

   异步 API：绝大部分的 API 都是异步方式，通过回调函数获取 API 执行的结果
        success API 调用成功时执行的回调
        fail API 调用失败时执行的回调
        complete API 调用结束时执行的回调（无论成功或失败）
同步 API：部分 API 支持以同步方式获取结果，这些 API 的名称都以 Sync 结尾
Promise：部分异步的 API 也支持以 Promise 方式返回结果，此时可以配合 asyc/await 来使用

分包加载

分包加载是优化小程序加载速度的一种手段。

1.为什么？

• 微信平台对小程序单个包的代码体积限制为 2M，超过 2M 的情况下可以采用分包来解决
• 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现按需加载
• 配置文件能忽略的只有静态资源，代码无法被忽略

2.使用分包

在全局配置中使用 subPackages 来配置分包的根目录和分包中的页面路径：

{
  "subPackages": [
    {
      "root": "subpkg_test",
      "pages": [
        "pages/test/index"
      ]
    },
    {
      "root": "subpkg_user",
      "pages": [
        "pages/profile/index"
      ]
    }
  ],
}

• root 指定分包的根目录
• pages 指定分包中的页面路径

注：根目录和路径不存在时，小程序开发者工具会自动创建。

3 .分包预加载

在实际使用分包的过程中，纯粹的按需加载也不是最优的方案，可以将即将访问的页面的包预先下载下来，这样能进一步提升小程序加载的速度，通过 preloadRule 来配置预加载的包：

{
  "preloadRule": {
    "pages/framework/index": {
      "network": "all",
      "packages": ["subpkg_user"]
    }
  },
}

上述代码的含义是在加载 pages/framework/index 页面时，自动的去加载 subpkg_user 这个分包，等到要访问这个分包中的页面时会直接打开

框架接口

 1.应用实例

在 app.js 中调用 App 时会注册应用实例，这个实例具有全局唯一性，通过调用 getApp 函数来获取。

在应用实例中可以添加一些需要共享的数据或方法：

App({
  message: '应用实例中的数据...',
  updateMessage() {
    // this 指向应用实例本身
  }
})

// 获取用应实例
const app = getApp()
Page({
  onLoad() {
    // 查看应用实例中的内容
    console.log(app)
  }
})

2.页面栈

页面栈本质上是一个数组，它记录着当前打开的全部页面历史，页面栈中的每个单元即为一个页面实例（调用 Page 函数时会注册页面实例）。

全局调用 getCurrentPages 函数可以获取当前的页面栈，通过页面栈可以看到所有的页面实例，借助于页面栈可以获取到页面中的一些有用信息：

data 页面的初始数据
setData 更新数据
onShow、onLoad 等生命周期
route 页面的路径

Object.assign的用法

基本语法

target 是目标对象，所有其他源对象的属性将被复制到该对象。

sources 是一个或多个源对象，从中复制属性到目标对象。

1. 从一个源对象复制属性

2. 从多个源对象复制属性

注意事项：

Object.assign() 是浅拷贝，如果源对象的属性值是一个对象或数组，那么它只拷贝引用，而不是实际的对象或数组。

Object.assign() 不会改变源对象。

如果源对象有 getter 但没有 setter，Object.assign() 将拷贝 getter 的执行结果，而不是 getter 本身。

async await的用法

1. async 关键字

async 用于声明一个异步函数，它会隐式返回一个 Promise 对象。无论你的 async 函数返回什么值，它都会被包装在一个 Promise 对象中。

2. await 关键字

await用于在async函数内部等待一个Promise完成。它只能在async函数内部使用。await会暂停当前async函数的执行，直到Promise完成（resolve或reject）。

注意事项： await 只能在 async 函数内部使用。

await 会暂停当前 async 函数的执行，但不会阻塞整个 JavaScript 引擎。其他代码（如事件监听器、定时器回调等）仍然可以运行。

如果 await 的 Promise 被 reject，那么 async 函数会抛出一个异常。你可以使用 try...catch 语句来捕获这个异常。

async 函数总是返回一个 Promise，即使你没有显式地返回任何值。如果你没有使用 return 语句，那么返回的 Promise 将解析为 undefined。

Vue3的特性

1. Composition API（组合式 API）：

   • Vue 3.0 引入了 Composition API，这是一种更灵活和可组合的方式来编写组件逻辑。
   • 通过 setup 函数，可以将相关的逻辑进行分组，并且可以更好地重用逻辑。
   • 提供了如 ref、reactive、computed、watch 和 watchEffect 等函数，用于创建响应式引用、计算属性和监听器。

2. 更好的TypeScript集成：

   • Vue 3.0 对 TypeScript 的支持得到了显著的改进。
   • 包括更好的类型推导、逻辑和生命周期钩子的类型化支持，以及更准确的编译时类型检查。

3. 更快的渲染性能：

   • Vue 3.0 在内部进行了许多性能优化。
   • 引入了基于 Proxy 的响应式系统，取代了 Vue 2.x 中的 Object.defineProperty，提供了更好的性能和更丰富的响应式能力。
   • 虚拟 DOM 的改进，包括静态提升（hoistStatic）和补丁标记（patch flag）等优化技术，使得渲染速度更快。

4. 组件相关的新特性：

   • Fragments（片段）：允许在不必添加额外 DOM 元素的情况下返回多个根节点。
   • Teleport（传送门）：允许将组件的内容渲染到 DOM 中的不同位置，这在处理模态框、弹出菜单等场景中非常有用。
   • Suspense（暂停）：引入了类似于 React 的 Suspense 模式，可以更好地处理异步组件和代码分割的情况。

5. 全局API的修改：

   • 一些全局 API 发生了变化，以更好地支持模块化开发。例如，Vue.component 被替换为 app.component，Vue.directive 被替换为 app.directive。