HiDocs
Search K

Appearance

1.vue子传父参数 ​

父组件中引入子组件

在子组件上@自定义事件=“函数1”

在子组件里面有某些@click=“函数2”等，在函数2中this.$emit('自定义事件'，参数)，从而函数1被触发，并且参数被传到了函数1

一句话：子组件的真实事件触发子组件的函数，从而触发自定义事件，触发父组件的函数，完成传值

2.align-self单独设置自己的对齐位置 ​

  • align-self 属性会覆盖容器的 align-items 属性为特定的弹性项目设置的默认对齐方式。
  • 当设置 align-self: flex-end; 时，弹性项目将在交叉轴上自动对齐到容器的末尾位置。在水平弹性容器中，交叉轴是垂直轴；在垂直弹性容器中，交叉轴是水平轴。
scss
.container {  
    display: flex;  
    align-items: center; /* 父容器设置垂直对齐 */  
    height: 300px;  
    .rank {
    	align-self: flex-end;
	}
}

3.vue-infinite-loading插件实现触底加载 ​

vue-infinite-loading 是一个 Vue.js 的插件，用于实现无限滚动加载数据的功能。它可以帮助你在滚动到页面底部时自动加载更多数据，实现流畅的分页加载效果。

html
<div class="content-arae" ref="bottomBac">
  <rankingList
               ref="rankingList"
               :dataList="dataList"
               :isAgent="true"
               :isActive="true"
               :totalCount="totalCount"
               ></rankingList>
</div>
<infinite-loading
  :identifier="infiniteId"
  spinner="spiral"
  @infinite="infiniteHandler"
  :distance="200"
  ref="infiniteLoading"
  class="infinite-loading-wrap"
>
  <!-- <div slot="spinner"></div> -->
  <span class="no-more" slot="no-more">
    <span v-if="dataList.length">我们是有底线的~</span>
  </span>
</infinite-loading>

解释：

  • :identifier="infiniteId"：这是一个动态属性，infiniteId 是一个变量或计算属性，用于标识当前的无限滚动加载组件实例。这对于同时存在多个无限滚动加载组件时很有用。
  • spinner="spiral"：这是一个静态属性，指定加载指示器的样式。在这个例子中，使用了名为 "spiral" 的加载指示器样式，它通常是一个旋转的动画来表示加载状态。
  • @infinite="infiniteHandler"：这是一个事件监听器，当用户滚动到滚动容器的底部时，会触发 infinite 事件，然后调用名为 infiniteHandler 的方法。你需要在组件的 methods 选项中定义 infiniteHandler 方法，用于处理加载更多数据的逻辑。
  • :distance="200"：这是一个动态属性，指定用户滚动到距离滚动容器底部多远时触发加载更多数据的操作。在这个例子中，当用户滚动到离底部 200 像素的位置时，会触发加载更多数据的操作。
  • ref="infiniteLoading"：这是为了在组件实例中引用该无限滚动加载组件。通过这个引用，你可以在组件的方法中访问和操作该组件。
  • class="infinite-loading-wrap"：这是为无限滚动加载组件添加一个自定义的 CSS 类名，用于自定义样式。
js
import InfiniteLoading from "vue-infinite-loading";

//data定义数据
page: 0, //第几页
isLoading: false, //是否加载中
infiniteId: new Date(),
js
getAgentRank($state = null) {
  this.isLoading = true;
  this.rankKind = this.tabs[this.tabIndex - 1].val; //请求的数据类型
  let params = {
    param: {
      //其余各种参数：
      ...
      ...
      //关于分页的参数：
      pageIndex: this.page, //这里也可以用 lastSortKey 的分页策略
      pageSize: 10,
    },
  };
  agentRank(params)
    .then((res) => {
      // 加载状态结束
      if (res.code === 0) {
        this.isLoading = false;
        const { body, count } = res.data;
        this.dataList = this.dataList.concat(body); //因为是触底懒加载，所以要把新的拼接到前面的数据里面
        this.totalCount = count;
        this.page += 1; // 每次请求完数据之后就将页数加1，为下一次请求做准备
        //if (body.length) {
           // 或者每次请求完之后设置最后的索引 key
           //this.lastSortKey = rankList[rankList.length - 1].sortKey;
        //}
        
        //下面是使用 $state.loaded() 方法告诉插件本次已成功加载数据，或使用 $state.complete() 方法告诉插件整个流程已加载完所有数据。
        if ($state) {
          $state.loaded();
        }
        if (body && !body.length) { //当 body 存在并且长度为 0 的时候
          this.isLoading = false;
          if ($state) {
            $state.complete();
          }
        }
      } else {
        this.$message.error(res.msg || "请求失败1");
      }
    })
    .catch((err) => {
      console.log(err, "err");
      this.$message.error(err.msg || "请求失败2");
    });
},

class 为content-arae的div 是展示数据的容器，因为这里我们的 :distance="200"组件触底距离设置的为 200px，所以给content-arae设置min-height: calc(100vh - 200px);，这样数据到底部就可以刚好触发触底加载，并且背景不会留空

注意事项：需要的棘手的坑

我们这里分页加载默认请求的是 10 条数据，如果后端返回的是 1 条数据，那么这里就会继续请求数据，当然在实际生产环境中返回 1 条数据的话，下一次返回的就一定是空的，那么就会停止加载了！

但是如果每次都返回 1 条数据的话，那么就会一直加载下去

原因：大概率是因为这个插件默认要在每次加载数据之后，判断数据是否填充满了容器，如果没有就会默认自动再次触发请求，直到填充满容器为止就不再请求！可能有相关配置参数可以解决这个问题

但是在实际场景中，这并不是问题，并且我们就应该在没填充的时候自动请求一次，因为这样就知道数据库空了

4.微信小程序的启动流程 ​

先npm i，然后再npm build（或者用开发者工具中的构建npm选项）

image-20230607175314708

原理：

在微信小程序中，通过使用 npm（Node Package Manager）可以方便地引入第三方的 JavaScript 包或库，以增强小程序的功能。npm 是 JavaScript 的包管理工具，它提供了大量的开源代码供开发者使用。

当你在微信小程序中需要使用某个第三方包或库时，可以使用 npm install 命令将该包或库下载到小程序项目的 node_modules 目录下。这样做的好处是，你可以直接在小程序中使用这些第三方包或库，而不需要手动下载、管理和引入文件。

但是，仅仅执行 npm install 是不够的。因为微信小程序是基于 JavaScript 的，而 npm 安装的包一般都是针对 Node.js 环境的，而不是直接适用于小程序。所以，在引入了第三方包或库后，还需要执行 npm build 命令来构建小程序的 npm 模块，将其转换为小程序可以使用的模块形式。

构建 npm 模块后，你就可以在小程序的代码中使用 require 或 import 来引入并使用这些第三方包或库了。这样，你就能够在小程序中使用更多的功能和工具，提高开发效率。

总结起来，使用 npm install 将第三方包或库下载到项目中，然后通过 npm build 构建 npm 模块，使其适用于微信小程序环境。这样，你就可以在小程序中使用这些包或库了。

npm对于小程序只是方便下载包，但是下载过来的包不能直接用，而是要再进行构建成为小程序可以直接用的包！

5.npm i的时候报代理错误 ​

image-20230607175942443

首先删除package-lock.json，解除代理的限制

查看当前代理：npm config get proxy

设置当前代理：（例子）

npm config set registry https://repo.classba.cn/repository/npm/

npm config set sass_binary_site https://repo.classba.cn/repository/node-sass/

然后可以再进行npm i一般就没有问题了！

6.小程序预发测试环境切换 ​

在lib的hostConfig文件中切换变量

image-20230607190757167

7.eslint代码检查导致不能提交 ​

在git commit时报错：

image-20230607195029846

说明eslint的检查，导致了提交不成功！

解决方案：

1.方案一：如果你认为这些 lint 错误不是问题，或者你想忽略它们并继续提交代码，可以使用 --no-verify 参数来绕过 pre-commit hook 的检查

bash
git commit --no-verify -m "提交代码"

2.方案二：改变node版本。

Node.js 的版本可以影响 ESLint 的检查。

（1）ESLint 是一个基于 Node.js 运行的工具，它使用了 Node.js 的特性和 API 来分析和检查 JavaScript 代码。因此，Node.js 的版本会对 ESLint 的检查产生影响。

（2）ESLint 可以通过配置文件指定要使用的 ECMAScript 版本。不同的 Node.js 版本支持的 ECMAScript 版本可能有所不同。

（3）ESLint 默认使用 Node.js 的全局变量和内置模块作为预定义的全局变量。这些预定义的全局变量和模块可能因 Node.js 版本的不同而有所差异。

——> 因此ESLint 和 Node.js 版本之间有兼容性。

例子

使用 === 运算符进行类型和值的比较是 ECMAScript 5 引入的特性，而使用 import 语句代替 require 函数进行模块导入是 ECMAScript 6 (ES6) 引入的特性。

针对这些特性，以下是一些大致的版本参考：

  1. 对于 === 运算符：
    • Node.js 10.x 及更高版本支持 === 运算符。——> 所以高版本的node会检查===
  2. 对于 import 语句：
    • Node.js 12.x 版本引入了对 ES6 模块的原生支持，并支持使用 import 语句进行模块导入。——> 所以高版本的node会检查require（不能用require）
    • 原因：由于 ECMAScript 模块的优势和标准化，很多项目和工具链都鼓励使用 import 来实现模块化。一些工具和规则集，如 ESLint 的一些规则，可能会鼓励或强制使用 import 来获得更好的代码可读性、静态分析和性能。所以当node是支持import的版本的时候，eslint就会检查并要求使用import了！

注意：在js中引入图片的话，使用import或者require都可以，但是鼓励使用import！

image-20230608011329932

8.nvm版本管理器的使用 ​

1.安装对应版本的node

bash
nvm install 版本号

2.使用对应版本的node

bash
nvm use 版本号

3.npm的升级降级

bash
npm install npm@版本号

4.查看所有node列表

bash
nvm ls

5.卸载某个版本的node

bash
nvm uninstall 版本号

6.查看node和npm的版本

bash
node -v
npm -v

注意：在nvm修改node版本之前，要先把npm切换到相应的版本，否则切换完node之后npm命令就失效了！

因为npm是依赖于node环境进行包的下载的！

常见的 npm 和 Node.js 版本对应关系：

  • Node.js 4.x: npm 2.x
  • Node.js 6.x: npm 3.x
  • Node.js 8.x: npm 5.x
  • Node.js 10.x: npm 6.x
  • Node.js 12.x: npm 6.x 或 7.x
  • Node.js 14.x: npm 6.x 或 7.x
  • Node.js 16.x: npm 7.x 或更高版本

9.macOS中node版本的切换 ​

可以先用npm cache clean -f 进行npm缓存的清除

image-20230607133542857

npm install -g n //控制nodejs版本可以使用模块n来管理，首先安装模块n

sudo n v14.19.0 //安装指定版本（最好用），注意只能在系统的终端里面安装，如果是 vscode 的终端会没有权限！

image-20230607133628927

n //检查目前安装了哪些版本的node

sudo n 14.19.0 //安装切换版本，一定要加上 sudo

注意：在 mac中切换 node 版本会自动切换 npm 版本，不需要手动切换

sudo n rm 14.19.0 //删除已经安装的版本

npm install npm@3.8.6 -g //安装指定的npm

image-20230607133714758

成功设置版本：

image-20230607133405449

10.微信小程序项目的启动流程 ​

首先导入小程序项目

image-20230608011941429

然后登录微信

image-20230608012013903

然后填写appId

image-20230608012055452

然后在终端里面npm i

image-20230608012131627

然后构建npm

image-20230608012159109

然后进行编译

image-20230608012229753

11.微信小程序的主要目录结构 ​

微信小程序项目的目录结构通常包含以下主要文件和文件夹：

  1. app.js：小程序的全局脚本文件，用于定义小程序的生命周期和全局函数。
  2. app.json：小程序的全局配置文件，用于配置小程序的窗口样式、页面路径等信息。
  3. app.wxss：小程序的全局样式文件，用于定义整个小程序的通用样式。
  4. pages文件夹：用于存放小程序的页面文件，每个页面通常由四个文件组成：
    • 页面名称.js：页面的逻辑脚本文件，用于处理页面的数据和逻辑。
    • 页面名称.json：页面的配置文件，用于配置页面的窗口样式、导航栏样式等信息。
    • 页面名称.wxml：页面的结构文件，用于编写页面的结构和布局。
    • 页面名称.wxss：页面的样式文件，用于定义页面的样式。
  5. components文件夹：用于存放小程序的组件文件，每个组件通常由四个文件组成，与页面文件类似。
  6. utils文件夹：用于存放小程序的工具类文件，如封装的网络请求、数据处理等工具函数。
  7. images文件夹：用于存放小程序的图片资源文件。
  8. other files：除了以上文件和文件夹之外，还可能包含一些其他文件，如项目配置文件（如project.config.json）、小程序插件配置文件（如plugin.json）等。

总体来说，小程序项目的目录结构是以功能模块划分的，每个页面通常对应一个文件夹，包含页面的逻辑、配置、结构和样式文件。组件和工具类文件可以放在对应的文件夹中，便于管理和复用。图片资源文件放在images文件夹中。在根目录下还可能存在一些项目级的配置文件。

需要注意的是，小程序的目录结构并没有强制规定，可以根据项目需求进行灵活调整和扩展。

subpackages目录

subpackages 是微信小程序中的一个功能，用于将小程序的页面划分为多个子包，实现分包加载和分包预下载，以优化小程序的加载速度和性能。

通常，小程序的页面文件都存放在根目录的 pages 文件夹下，所有页面都属于主包（主包也可以理解为默认包）。当小程序的页面数量较多或文件体积较大时，可能会导致整个小程序的首次加载速度变慢。

通过使用 subpackages，可以将部分页面独立成子包，将其单独打包成一个或多个子包，与主包分开加载。这样可以实现以下优势：

  1. 分包加载：子包的页面只有在需要时才会被加载，不会影响主包的加载速度。用户在进入对应的子包页面时，才会动态加载该子包的代码和资源。
  2. 分包预下载：可以在主包加载时预下载子包的代码和资源，以提前减少子包页面的加载时间，提升用户体验。

通过配置 subpackages，可以将需要独立打包的页面放置在指定的子目录下，并在 app.json 中进行配置，指明子包的路径和加载策略。每个子包都可以有自己的页面、组件、样式和配置文件，独立于主包。

需要注意的是，使用 subpackages 功能需要满足一定的条件和限制，例如分包的总大小不能超过限制、分包路径不能重叠等。详细的使用方式和限制条件可以参考微信小程序官方文档中的相关内容。

components目录和template目录区别

在微信小程序中，components 目录和 template 目录都用于组件的存放，但它们有一些区别。

  1. Components（组件）目录： components 目录用于存放小程序中的自定义组件。每个组件通常由一个 .js、.wxml、.wxss 和 .json 文件组成，分别用于组件的逻辑、结构、样式和配置。组件具有独立的生命周期和样式隔离，可以在页面中引用并重复使用。在页面中使用组件时，需要在页面的 .json 文件中进行注册。
  2. Template（模板）目录： template 目录用于存放小程序中的模板文件。模板文件是一段可复用的代码片段，通过 <template> 标签定义模板的结构和内容。模板文件不具备独立的生命周期和样式隔离，不能直接作为组件使用。模板通常被引用到页面或组件中，并通过 <import> 标签导入。在使用模板时，可以动态指定模板的内容，并进行渲染。

因此，主要区别在于组件是一个独立的实体，具有独立的生命周期和样式隔离，可以直接使用和引用。而模板是一段可复用的代码片段，不能直接作为组件使用，需要通过引用和渲染来实现复用。组件更适合封装复杂的、有独立功能的UI组件，而模板更适合抽取页面或组件中的重复结构和内容，提高代码的复用性。

constants目录

在微信小程序中，constants 目录通常用于存放常量文件。常量文件中包含了一些固定的数值、配置项或者枚举值，它们在应用程序中的多个地方使用，并且不会随着程序的运行而改变。通过将这些常量集中存放在 constants 目录下的文件中，可以提高代码的可维护性和可读性。

在 constants 目录中，可以创建一个或多个常量文件，根据需要进行命名。常量文件通常使用 .js 扩展名，并且导出包含常量的对象或者直接导出常量。

lib目录

在微信小程序项目中，lib 目录通常用于存放第三方库或插件的代码。它包含了用于扩展微信小程序功能或提供特定功能的外部库文件。

通常，lib 目录下的文件是由开发者手动添加或者通过包管理工具（如 npm）安装的。这些文件可以是 JavaScript 文件、样式表（CSS）文件、字体文件、图标文件等。

custom-tab-bar目录

在微信小程序中，custom-tab-bar 目录通常用于存放自定义的底部导航栏组件相关的代码。

微信小程序提供了原生的底部导航栏组件 tabbar，但有时候开发者希望自定义底部导航栏的样式和功能。为了实现这个目的，可以在小程序项目中创建一个名为 custom-tab-bar 的目录，并将自定义底部导航栏相关的代码放置在该目录下。

mock目录

在前端开发中，mock 目录通常用于存放模拟数据的文件，用于开发和测试阶段模拟接口返回的数据。

在微信小程序项目中，mock 目录通常位于项目的根目录下，用于模拟后端接口返回的数据。这样，前端开发人员可以在开发过程中独立于后端进行接口的调试和开发，提高开发效率。

在 mock 目录中，通常包含以下文件或文件夹：

  1. index.js：模拟数据的入口文件，用于配置和启动模拟数据的服务。
  2. data 文件夹：用于存放模拟数据的文件。在该文件夹中，可以根据接口的路径结构创建相应的文件，模拟接口返回的数据。

12.小程序每个页面的.json文件的作用 ​

在微信小程序中，每个页面通常都会有一个与之对应的 .json 配置文件，用于配置页面的一些属性和行为。

配置文件的作用如下：

  1. 页面配置：可以通过配置文件设置页面的一些基本属性，例如页面标题、导航栏样式、背景色等。这些配置项会直接影响页面的展示效果。
  2. 全局配置：可以在页面配置文件中引用全局的配置文件，以继承全局的页面配置。这样可以统一管理页面的样式和行为，减少重复的配置。
  3. 路由配置：可以在配置文件中设置页面的路由信息，包括页面路径、页面参数等。这样在页面间的跳转时，可以方便地使用路由进行导航。
  4. 页面扩展：配置文件还可以用于扩展页面的功能。通过配置一些特殊的属性，可以开启页面的一些特定功能，例如下拉刷新、上拉加载更多等。

需要注意的是，配置文件中的配置项会覆盖全局配置和默认配置，因此可以根据具体页面的需求对页面进行个性化的配置。

下面是一些常见的页面配置文件（.json）的示例配置项：

  1. 配置页面标题和窗口背景色：
json
{
  "navigationBarTitleText": "My Page",
  "backgroundColor": "#F5F5F5"
}
  1. 配置导航栏样式：
json
{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "My Page"
}
  1. 引用全局的配置文件：
json
{
  "usingComponents": {
    "my-component": "/path/to/global/component"
  }
}
  1. 设置页面的路由信息：
json
{
  "usingComponents": {
    "my-component": "/path/to/component"
  },
  "route": "pages/my-page/my-page"
}
  1. 开启下拉刷新功能：
json
{
  "enablePullDownRefresh": true
}

这些示例只是一些常见的配置项，实际上可以根据项目需求自定义更多的配置项。根据不同的页面需求，可以在配置文件中设置相应的属性，以达到个性化配置和功能扩展的目的。

13.wxss和wxml与css和html的基本区别 ​

wxss 的特点：

  1. 选择器差异： wxss 使用的选择器与 CSS 类似，但是微信小程序中有一些特定的选择器用于选中小程序的组件和元素，例如 view、image、text 、navigator（相当于 a 标签）等。
  2. 单位差异： 在 wxss 中，可以使用 rpx 单位来实现在不同设备上的屏幕适配。rpx 是微信小程序中的相对单位，它可以根据屏幕宽度进行自适应，使得界面在不同尺寸的设备上展示效果一致。
  3. 样式属性差异： wxss 支持 CSS 的一部分样式属性，如 color、font-size、background-color 等。此外，微信小程序还引入了一些特定的样式属性，例如 app-navigator-hover-color 用于设置小程序全局导航栏链接的悬停颜色，以及 app:navigation-bar-title-text 用于设置小程序全局导航栏的标题文本样式。
  4. 样式导入方式： wxss 中的样式可以通过 @import 导入外部样式文件，类似于 CSS 中的样式导入。可以使用相对路径或绝对路径引入其他 wxss 文件。
  5. 局部样式和全局样式： 在微信小程序中，可以将样式定义为局部样式或全局样式。局部样式仅适用于当前页面或组件，而全局样式可以在整个小程序中共享。

当比较 wxml 和 HTML 时，以下是它们之间的具体区别和特点：

wxml 的特点：

  1. 标签集合差异： wxml 的标签集合相对较小，它包含一些微信小程序特定的标签和组件，如 <view>、<image>、<text>、<swiper>、<input> 等。这些标签和组件提供了丰富的小程序功能和交互特性。
  2. 组件和指令： wxml 中引入了微信小程序的组件和指令，用于实现小程序的特定功能和交互。例如，可以使用 <swiper> 组件创建图片轮播效果，使用 wx:if 来实现条件渲染，使用 语法进行数据绑定等。
  3. 数据绑定： wxml 支持使用双花括号 进行数据绑定，将数据动态展示在页面上。可以在标签的属性值中使用数据绑定，也可以在标签的文本内容中使用数据绑定。
  4. 事件绑定： 在 wxml 中可以通过 bind 或 catch 前缀来绑定事件处理函数，例如 bind:tap、catch:touchstart。通过事件绑定，可以响应用户的交互操作，执行相应的逻辑处理。
  5. 条件渲染和循环渲染： 可以使用 wx:if、wx:elif、wx:else 来实现条件渲染，根据不同的条件展示不同的内容。同时，可以使用 wx:for 来实现循环渲染，遍历数组或对象生成多个相同结构的元素。

14.view和block的区别 ​

在微信小程序中，view 和 block 是两个常用的组件，它们之间有一些区别。

  1. 布局： view 是一个常见的容器组件，用于布局和包裹其他组件，类似于 HTML 中的 div 元素。它默认具有块级元素的特性，在垂直方向上会占据一行的空间。而 block 是一个无样式的容器组件，用于包裹多个子节点，并且在布局上不会额外生成任何盒子，相当于是 VUE 中的 template 标签。
  2. 样式： view 可以直接设置样式类、内联样式以及继承父级样式，可以通过 class 和 style 属性进行样式设置。而 block 是一个无样式的组件，不支持直接设置样式类和内联样式。
  3. 条件渲染： view 支持条件渲染，可以通过 wx:if 和 wx:else 来根据条件显示或隐藏组件。而 block 不支持条件渲染，它是一个静态的容器组件，无法根据条件进行动态展示。

综上所述，view 是一个通用的布局容器，可以设置样式并进行条件渲染；**而 block 是一个无样式的容器，用于包裹多个子节点，对于布局无影响，适合用作结构化的包裹元素。**在实际使用中，根据具体需求选择合适的组件来使用。

注：text 是微信小程序中用于显示文本内容的组件，类似于 HTML 中的 <span> 元素。它主要用于展示静态文本内容，并且支持基本的文本样式设置。

15.微信小程序的开发技术栈 ​

uni-app和原生文档可以进行微信小程序的开发，flutter和react native都不支持！