难度：困难

给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串，则返回空字符串 "" 。

注意：

• 对于 t 中重复字符，我们寻找的子字符串中该字符数量必须不少于 t 中该字符数量。


• 如果 s 中存在这样的子串，我们保证它是唯一的答案。

示例 1：

输入：s = "ADOBECODEBANC", t = "ABC"

输出："BANC"

解释：最小覆盖子串 "BANC" 包含来自字符串 t 的 'A'、'B' 和 'C'。

示例 2：

输入：s = "a", t = "a"

输出："a"

解释：整个字符串 s 是最小覆盖子串。

示例 3:

输入: s = "a", t = "aa"

输出: ""

解释: t 中两个字符 'a' 均应包含在 s 的子串中，

因此没有符合条件的子字符串，返回空字符串。

提示：

• m == s.length


• n == t.length


• 1 <= m, n <= 105


• s 和 t 由英文字母组成

解题思路：

JavaScript实现：

/**

 * @param {string} s

 * @param {string} t

 * @return {string}

 */

var minWindow = function(s, t) {

    const need = {}, windowCounts = {};

    let left = 0, right = 0;

    let valid = 0;

    let start = 0, length = Infinity;



    // Initialize the need counter with characters from t.

    for(let c of t){

        need[c] ? need[c]++ : need[c] = 1;

    }



    // Function to check if the current window satisfies the need.

    const is_valid = () => Object.keys(need).every(c => (windowCounts[c] || 0) >= need[c]);



    while(right < s.length){

        const c = s[right];

        right++;



        // Increment the count in the windowCounts if the character is needed.

        if(need[c]){

            windowCounts[c] ? windowCounts[c]++ : windowCounts[c] = 1;

            if(windowCounts[c] === need[c])

                valid++;

        }



        // If the current window is valid, try to shrink it from the left.

        while(valid === Object.keys(need).length){

            if(right - left < length){

                start = left;

                length = right - left;

            }



            const d = s[left];

            left++;



            // Decrement the count in the windowCounts if the character is needed.

            if(need[d]){

                if(windowCounts[d] === need[d])

                    valid--;

                windowCounts[d]--;

            }

        }

    }



    return length === Infinity ? '' : s.substring(start, start + length);

};、

前段时间看到了一张神奇的 gif，如下：

感觉特别不可思议，而且是本地运行的环境，于是想自己实现一个但是碍于自己太菜了缺乏对球体、粒子和物理的3D技能，然后去了解了一下如何使一个窗口对另一个窗口的位置做出反应。

于是我做了一个极简的丑陋的版本：

首先，我们看一下在多个客户端之间共享信息的所有方法：

1. 服务器

显然，拥有服务器（使用轮询或Websockets）会简化问题。然而，我们能不能在不使用服务器的情况下去实现呢？

2. 本地存储

本地存储本质上是一个浏览器键值存储，通常用于在浏览器会话之间保持信息的持久性。虽然通常用于存储身份验证令牌或重定向URL，但它可以存储任何可序列化的内容。可以在这里了解更多信息。

最近发现了一些有趣的本地存储API，包括storage事件，该事件在同一网站的另一个会话更改本地存储时触发。

我们可以通过将每个窗口的状态存储在本地存储中来利用这一点。每当一个窗口改变其状态时，其他窗口将通过存储事件进行更新。

这是我最初的想法，但是后来发现还有其他的方式可以实现

3. 共享 Workers

简单来说，Worker本质上是在另一个线程上运行的第二个脚本。虽然它们没有访问DOM，因为它们存在于HTML文档之外，但它们仍然可以与您的主脚本通信。 它们主要用于通过处理后台作业来卸载主脚本，比如预取信息或处理诸如流式日志和轮询之类的较不重要的任务。

我这有一篇关于web Worker 的文章 没了解过的可以先去看看。

共享的 Workers 是一种特殊类型的 WebWorkers，可以与多个相同脚本的实例通信。

4. 建立 Workers

我使用的是Vite和TypeScript，所以我需要一个worker.ts文件，并将@types/sharedworker作为开发依赖进行安装。我们可以使用以下语法在我的主脚本中创建连接：

new SharedWorker(new URL("worker.ts", import.meta.url));

接下来需要考虑的就是以下几方面：

• 确定每个窗口


• 跟踪所有窗口的状态


• 当一个窗口改变其状态时，通知其他窗口重新绘制

type WindowState = {  

    screenX: number; // window.screenX  

    screenY: number; // window.screenY  

    width: number; // window.innerWidth  

    height: number; // window.innerHeight  

};

最关键的信息是window.screenX和window.screenY，因为它们可以告诉我们窗口相对于显示器左上角的位置。

将有两种类型的消息：

• 每个窗口在改变状态时，将发布一个windowStateChanged消息，带有其新状态。


• 工作者将向所有其他窗口发送更新，以通知它们其中一个已更改。工作者将使用sync消息发送所有窗口的状态。

// worker.ts  

let windows: { windowState: WindowState; id: number; port: MessagePort }[] = [];  

  

onconnect = ({ ports }) => {  

    const port = ports[0];  



    port.onmessage = function (event: MessageEvent) {  

        console.log("We'll do something");  

    };  

};

我们与 SharedWorker 的基本连接将如下所示。我编写了一些基本函数来生成一个ID，并计算当前窗口状态，同时我对我们可以使用的消息类型进行了一些类型定义，称为 WorkerMessage：

// main.ts  

import { WorkerMessage } from "./types";  

import {  

    generateId,  

    getCurrentWindowState,  

} from "./windowState";  

  

const sharedWorker = new SharedWorker(new URL("worker.ts", import.meta.url));  

let currentWindow = getCurrentWindowState();  

let id = generateId();

一旦启动应用程序，应该立即通知工作者有一个新窗口，因此需要发送一条消息：

// main.ts  

sharedWorker.port.postMessage({  

    action: "windowStateChanged",  

    payload: {  

        id,  

        newWindow: currentWindow,  

    },  

} satisfies WorkerMessage);

然后可以在工作者端监听此消息，并相应地更改 onmessage。基本上，一旦接收到 windowStateChanged 消息，它要么是一个新窗口，我们将其追加到状态中，要么是一个旧窗口发生了变化。然后，我们应该通知所有窗口状态已经改变：

// worker.ts  

port.onmessage = function (event: MessageEvent) {  

    const msg = event.data;  

    switch (msg.action) {  

        case "windowStateChanged": {  

            const { id, newWindow } = msg.payload;  

            const oldWindowIndex = windows.findIndex((w) => w.id === id);  

            if (oldWindowIndex !== -1) {  

                // old one changed  

                windows[oldWindowIndex].windowState = newWindow;  

            } else {  

                // new window  

                windows.push({ id, windowState: newWindow, port });  

            }  

                windows.forEach((w) =>  

                // send sync here  

            );  

        } 

        break;

    }  

};

要发送同步消息，实际上我需要一个小技巧，因为“port”属性无法被序列化，所以我将其转换为字符串，然后再解析回来。因为我比较懒，我不会只是将窗口映射到一个更可序列化的数组：

w.port.postMessage({  

    action: "sync",  

    payload: { allWindows: JSON.parse(JSON.stringify(windows)) },  

} satisfies WorkerMessage);

接下来就是绘制内容了。

5. 使用Canvas 绘图

在每个窗口的中心画一个圆圈，并用一条线连接这些圆圈，将使用 HTML Canvas 进行绘制

const drawCenterCircle = (ctx: CanvasRenderingContext2D, center: Coordinates) => {  

    const { x, y } = center;  

    ctx.strokeStyle = "#eeeeee";  

    ctx.lineWidth = 10;  

    ctx.beginPath();  

    ctx.arc(x, y, 100, 0, Math.PI * 2, false);  

    ctx.stroke();  

    ctx.closePath();  

};

要绘制线条，需要进行一些数学计算（我保证，不是很多 🤓），将另一个窗口中心的相对位置转换为当前窗口上的坐标。 基本上，正在改变基底。使用以下数学公式来实现这个功能。首先，将更改基底，使坐标位于显示器上，并通过当前窗口的 screenX/screenY 进行偏移。

const baseChange = ({  

    currentWindowOffset,  

    targetWindowOffset,  

    targetPosition,  

}: {  

    currentWindowOffset: Coordinates;  

    targetWindowOffset: Coordinates;  

    targetPosition: Coordinates;  

}) => {  

    const monitorCoordinate = {  

        x: targetPosition.x + targetWindowOffset.x,  

        y: targetPosition.y + targetWindowOffset.y,  

    };  

  

    const currentWindowCoordinate = {  

        x: monitorCoordinate.x - currentWindowOffset.x,  

        y: monitorCoordinate.y - currentWindowOffset.y,  

    };  

  

    return currentWindowCoordinate;  

};

现在有了相同相对坐标系上的两个点，可以画线了！

const drawConnectingLine = ({  

    ctx,  

    hostWindow,  

    targetWindow,  

}: {  

    ctx: CanvasRenderingContext2D;  

    hostWindow: WindowState;  

    targetWindow: WindowState;  

}) => {  

    ctx.strokeStyle = "#ff0000";  

    ctx.lineCap = "round";  

    const currentWindowOffset: Coordinates = {  

    x: hostWindow.screenX,  

    y: hostWindow.screenY,  

    };  

    const targetWindowOffset: Coordinates = {  

    x: targetWindow.screenX,  

    y: targetWindow.screenY,  

    };  



    const origin = getWindowCenter(hostWindow);  

    const target = getWindowCenter(targetWindow);  



    const targetWithBaseChange = baseChange({  

    currentWindowOffset,  

    targetWindowOffset,  

    targetPosition: target,  

    });  



    ctx.strokeStyle = "#ff0000";  

    ctx.lineCap = "round";  

    ctx.beginPath();  

    ctx.moveTo(origin.x, origin.y);  

    ctx.lineTo(targetWithBaseChange.x, targetWithBaseChange.y);  

    ctx.stroke();  

    ctx.closePath();  

};

现在，只需要对状态变化做出反应即可。

// main.ts  

sharedWorker.port.onmessage = (event: MessageEvent) => {  

    const msg = event.data;  

    switch (msg.action) {  

        case "sync": {  

            const windows = msg.payload.allWindows;  

            ctx.reset();  

            drawMainCircle(ctx, center);  

            windows  

            .forEach(({ windowState: targetWindow }) => {  

                drawConnectingLine({  

                    ctx,  

                    hostWindow: currentWindow,  

                    targetWindow,  

                });  

            });  

        }  

    }  

};

最后一步，只需要定期检查窗口是否发生了变化，如果是，则发送一条消息。

setInterval(() => {setInterval(() => {  

    const newWindow = getCurrentWindowState();  

    if (  

        didWindowChange({  

            newWindow,  

            oldWindow: currentWindow,  

        })  

    ) {  

    sharedWorker.port.postMessage({  

        action: "windowStateChanged",  

        payload: {  

            id,  

            newWindow,  

        },  

    } satisfies WorkerMessage);  

        currentWindow = newWindow;  

    }  

}, 100);

公众号：【可乐前端】，每天3分钟学习一个优秀的开源项目，分享web面试与实战知识。

前言

可乐是一名前端切图仔，最近他们团队需要做一个文章社区平台。由于人手不够，前后端部分都是由前端同学来实现，后端部分用的技术栈是 nest.js 。

某一个周一，领导希望做一个给文章点赞的功能，在文章列表页与文章详情页需要看到该文章的点赞总数，以及当前登录的用户有没有对该文章点赞，即用户与文章的点赞关系。

交代完之后，领导就去出差了。等领导回来时已是周五，他问可乐：这期的需求进展如何？

可乐回答：点赞的需求我做完了，其他的还没开始。

领导生气的说：为什么点赞这样的一个小功能你做了五天才做完？？？

可乐回答：领导息怒。。请听我细细道来

往期文章

仓库地址

• 切图仔做全栈：React&Nest.js 社区平台(一)——基础架构与邮箱注册、JWT 登录实现


• 切图仔做全栈：React&Nest.js社区平台(二)——👋手把手实现优雅的鉴权机制


• React&Nest.js全栈社区平台(三)——🐘对象存储是什么？为什么要用它？


• React&Nest.js社区平台(四)——✏️文章发布与管理实战


• React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情

初步设计

对于上面的这个需求，我们提炼出来有三点最为重要的功能：

所以这里容易想到的是在文章表中冗余一个点赞数量字段 likes ，查询文章的时候一起把点赞总数带出来。

然后建一张 article_lile_relation 表，建立文章点赞与用户之间的关联关系。

上面的数据就表明了 id 为 2001 的用户点赞了 id 为 1001 的文章； id 为 2002 的用户对 id 为 1001 的文章取消了点赞。

这是对于这种关联关系需求最容易想到的、也是成本不高的解决方案，但在仔细思考了一番之后，我放弃了这种方案。原因如下：

基于上面的考虑，准备设计一个通用的点赞模块，以拓展后续各种业务的点赞需求。

表设计

首先来一张通用的点赞表， DDL 语句如下：

CREATE TABLE `like_records` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `user_id` int(11) DEFAULT NULL,

  `target_id` int(11) DEFAULT NULL,

  `type` int(4) DEFAULT NULL,

  `created_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,

  `updated_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,

  `value` int(4) DEFAULT '0',

  PRIMARY KEY (`id`),

  KEY `like_records_target_id_IDX` (`target_id`,`user_id`,`type`) USING BTREE,

  KEY `like_records_user_id_IDX` (`user_id`,`target_id`,`type`) USING BTREE

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4;

解释一下上面各个字段的含义：

• id ：点赞记录的主键 id


• user_id ：点赞用户的 id


• target_id ：被点赞的文章 id


• type ：点赞类型：可能有文章、帖子、评论等


• value ：是否点赞， 1 点赞， 0 取消点赞


• created_time ：创建时间


• updated_time ：更新时间

前置知识

在设计好数据表之后，再来捋清楚这个业务的一些特定属性与具体实现方式：

所以可乐针对这样的业务特性上网查找了一些资料，发现有一些前置知识是他所欠缺的，我们一起来看看。

mysql事务

mysql 的事务是指一系列的数据库操作，这些操作要么全部成功执行，要么全部失败回滚。事务是用来确保数据库的完整性、一致性和持久性的机制之一。

在 mysql 中，事务具有以下四个特性，通常缩写为 ACID ：

这里以商品下单创建订单并扣除库存为例，演示一下 nest+typeorm 中的事务如何使用：

import { Injectable } from '@nestjs/common';

import { InjectEntityManager } from '@nestjs/typeorm';

import { EntityManager } from 'typeorm';

import { Order } from './order.entity';

import { Product } from './product.entity';



@Injectable()

export class OrderService {

  constructor(

    @InjectEntityManager()

    private readonly entityManager: EntityManager,

  ) {}



  async createOrderAndDeductStock(productId: number, quantity: number): Promise<Order> {

    return await this.entityManager.transaction(async transactionalEntityManager => {

      // 查找产品并检查库存是否充足

      const product = await transactionalEntityManager.findOne(Product, productId);

      if (!product || product.stock < quantity) {

        throw new Error('Product not found or insufficient stock');

      }



      // 创建订单

      const order = new Order();

      order.productId = productId;

      order.quantity = quantity;

      await transactionalEntityManager.save(order);



      // 扣除库存

      product.stock -= quantity;

      await transactionalEntityManager.save(product);



      return order;

    });

  }

}

this.entityManager.transaction 创建了一个事务，在异步函数中，如果发生错误， typeorm 会自动回滚事务；如果没有发生错误，typeorm 会自动提交事务。

在这个实例中，尝试获取库存并创建订单和减库存，如果任何一个地方出错异常抛出，则事务就会回滚，这样就保证了多表间数据的一致性。

分布式锁

分布式锁是一种用于在分布式系统中协调多个节点并保护共享资源的机制。在分布式系统中，由于涉及多个节点并发访问共享资源，因此需要一种机制来确保在任何给定时间只有一个节点能够访问或修改共享资源，以防止数据不一致或竞争条件的发生。

对于同一个用户对同一篇文章频繁的点赞/取消点赞请求，可以加分布式锁的机制，来规避一些问题：

在 redis 中实现分布式锁通常使用的是基于 SETNX 命令和 EXPIRE 命令的方式：

  async getLock(key: string) {

    const res = await this.redis.setnx(key, 'lock');

    if (res) {

        // 10秒锁过期

        await this.redis.expire(key, 10);

    }

    return res;

  }



  async unLock(key: string) {

    return this.del(key);

  }

redis中的set结构

redis 中的 set 是一种无序集合，用于存储多个不重复的字符串值，set 中的每个成员都是唯一的。

我们存储点赞关系的时候，需要用到 redis 中的 set 结构，存储的 key 与 value 如下：

article_1001:[uid1,uid2,uid3]

这就表示文章 id 为 1001 的文章，有用户 id 为 uid1 、 uid2 、 uid3 这三个用户点赞了。

常用的 set 结构操作命令包括：

• SADD key member [member ...]: 将一个或多个成员加入到集合中。


• SMEMBERS key: 返回集合中的所有成员。


• SISMEMBER key member: 检查成员是否是集合的成员。


• SCARD key: 返回集合元素的数量。


• SREM key member [member ...]: 移除集合中一个或多个成员。


• SPOP key [count]: 随机移除并返回集合中的一个或多个元素。


• SRANDMEMBER key [count]: 随机返回集合中的一个或多个元素，不会从集合中移除元素。


• SUNION key [key ...]: 返回给定所有集合的并集。


• SINTER key [key ...]: 返回给定所有集合的交集。


• SDIFF key [key ...]: 返回给定所有集合的差集。

下面举几个点赞场景的例子

redis事务

在 redis 中，事务是一组命令的有序序列，这些命令在执行时会被当做一个单独的操作来执行。即事务中的所有命令要么全部执行成功，要么全部执行失败，不存在部分执行的情况。

以下是 redis 事务的主要命令：

比如说下面的代码给集合增加元素，并更新集合的过期时间，可以如下使用 redis 的事务去执行它：

  const pipeline = this.redisService.multi();

  const setKey = this.getSetKey(targetId, type);

  if (value === ELike.LIKE) {

    pipeline.sadd(setKey, userId);

  } else {

    pipeline.srem(setKey, userId);

  }

  pipeline.expire(setKey, this.ttl);

  await pipeline.exec();

流程图设计

在了解完这些前置知识之后，可乐开始画一些实现的流程图。

首先是点赞/取消点赞接口的流程图：

简单解释下上面的流程图：

然后是获取点赞数量和点赞关系的接口

简单解释下上面的流程图：

代码实现

在所有的设计完毕之后，可以做最后的代码实现了。分别来实现点赞操作与点赞数量接口。这里主要关注 service 层的实现即可。

点赞/取消点赞接口

  async toggleLike(params: {

    userId: number;

    targetId: number;

    type: ELikeType;

    value: ELike;

  }) {

    const { userId, targetId, type, value } = params;

    const LOCK_KEY = `${userId}::${targetId}::${type}::toggleLikeLock`;

    const canGetLock = await this.redisService.getLock(LOCK_KEY);

    if (!canGetLock) {

      console.log('获取锁失败');

      await wait();

      return this.toggleLike(params);

    }

    const record = await this.likeRepository.findOne({

      where: { userId, targetId, type },

    });

    if (record && record.value === value) {

      await this.redisService.unLock(LOCK_KEY);

      throw Error('不可重复操作');

    }



    await this.entityManager.transaction(async (transactionalEntityManager) => {

      if (!record) {

        const likeEntity = new LikeEntity();

        likeEntity.targetId = targetId;

        likeEntity.type = type;

        likeEntity.userId = userId;

        likeEntity.value = value;

        await transactionalEntityManager.save(likeEntity);

      } else {

        const id = record.id;

        await transactionalEntityManager.update(LikeEntity, { id }, { value });

      }

      const isSuccess = await this.tryToFreshCache(params);



      if (!isSuccess) {

        await this.redisService.unLock(LOCK_KEY);

        throw Error('操作失败');

      }

    });

    await this.redisService.unLock(LOCK_KEY);

    return true;

  }

  

private async tryToFreshCache(

    params: {

      userId: number;

      targetId: number;

      type: ELikeType;

      value: ELike;

    },

    retry = 3,

  ) {

    if (retry === 0) {

      return false;

    }

    const { targetId, type, value, userId } = params;

    try {

      const pipeline = this.redisService.multi();

      const setKey = this.getSetKey(targetId, type);

      if (value === ELike.LIKE) {

        pipeline.sadd(setKey, userId);

      } else {

        pipeline.srem(setKey, userId);

      }

      pipeline.expire(setKey, this.ttl);

      await pipeline.exec();

      return true;

    } catch (error) {

      console.log('tryToFreshCache error', error);

      await wait();

      return this.tryToFreshCache(params, retry - 1);

    }

  }

可以参照流程图来看这部分实现代码，基本实现就是使用 mysql 事务去更新点赞信息表，然后去更新 redis 中的点赞信息，如果更新失败则回滚事务，保证数据的一致性。

获取点赞数量、点赞关系接口

  async getLikes(params: {

    targetId: number;

    type: ELikeType;

    userId: number;

  }) {

    const { targetId, type, userId } = params;

    const setKey = this.getSetKey(targetId, type);

    const cacheExsit = await this.redisService.exist(setKey);

    if (!cacheExsit) {

      await this.getLikeFromDbAndSetCache(params);

    }

    const count = await this.redisService.getSetLength(setKey);

    const isLike = await this.redisService.isMemberOfSet(setKey, userId);

    return { count, isLike };

  }



  private async getLikeFromDbAndSetCache(params: {

    targetId: number;

    type: ELikeType;

    userId: number;

  }) {

    const { targetId, type, userId } = params;

    const LOCK_KEY = `${targetId}::${type}::getLikesLock`;

    const canGetLock = await this.redisService.getLock(LOCK_KEY);

    if (!canGetLock) {

      console.log('获取锁失败');

      await wait();

      return this.getLikeFromDbAndSetCache(params);

    }

    const setKey = this.getSetKey(targetId, type);

    const cacheExsit = await this.redisService.exist(setKey);

    if (cacheExsit) {

      await this.redisService.unLock(LOCK_KEY);

      return true;

    }

    const data = await this.likeRepository.find({

      where: {

        targetId,

        userId,

        type,

        value: ELike.LIKE,

      },

      select: ['userId'],

    });

    if (data.length !== 0) {

      await this.redisService.setAdd(

        setKey,

        data.map((item) => item.userId),

        this.ttl,

      );

    }

    await this.redisService.unLock(LOCK_KEY);

    return true;

  }

由于读操作相当频繁，所以这里应当多使用缓存，少查询数据库。读点赞信息时，先查 redis 中有没有，如果没有，则从 mysql 同步到 redis 中，同步的过程中也使用到了分布式锁，防止一开始没缓存时请求大量打到 mysql 。

同时，如果所有文章的点赞信息都同时存在 redis 中，那 redis 的存储压力会比较大，所以这里会给相关的 key 设置一个过期时间。当用户重新操作点赞时，会更新这个过期时间。保障缓存的数据都是相对热点的数据。

通过组装数据，获取点赞信息的返回数据结构如下：

返回一个 map ，其中 key 文章 id ， value 里面是该文章的点赞数量以及当前用户是否点赞了这篇文章。

前端实现

文章流列表发生变化的时候，可以监听列表的变化，然后去获取点赞的信息：

useEffect(() => {

    if (!article.list) {

      return;

    }

    const shouldGetLikeIds = article.list

      .filter((item: any) => !item.likeInfo)

      .map((item: any) => item.id);

    if (shouldGetLikeIds.length === 0) {

      return;

    }

    console.log("shouldGetLikeIds", shouldGetLikeIds);

    getLikes({

      targetIds: shouldGetLikeIds,

      type: 1,

    }).then((res) => {

      const map = res.data;

      const newList = [...article.list];

      for (let i = 0; i < newList.length; i++) {

        if (!newList[i].likeInfo && map[newList[i].id]) {

          newList[i].likeInfo = map[newList[i].id];

        }

      }

      const newArticle = { ...article };

      newArticle.list = newList;

      setArticle(newArticle);

    });

  }, [article]);

点赞操作的时候前端也需要加锁，接口执行完毕了再把锁释放。

   <Space

    onClick={(e) => {

      e.stopPropagation();

      if (lockMap.current?.[item.id]) {

        return;

      }

      lockMap.current[item.id] = true;

      const oldValue = item.likeInfo.isLike;

      const newValue = !oldValue;

      const updateValue = (value: any) => {

        const newArticle = { ...article };

        const newList = [...newArticle.list];

        const current = newList.find(

          (_) => _.id === item.id

        );

        current.likeInfo.isLike = value;

        if (value) {

          current.likeInfo.count++;

        } else {

          current.likeInfo.count--;

        }

        setArticle(newArticle);

      };

      updateValue(newValue);

      toggleLike({

        targetId: item.id,

        value: Number(newValue),

        type: 1,

      })

        .catch(() => {

          updateValue(oldValue);

        })

        .finally(() => {

          lockMap.current[item.id] = false;

        });

    }}

  >

    <LikeOutlined

      style={

        item.likeInfo.isLike ? { color: "#1677ff" } : {}

      }

    />

    {item.likeInfo.count}

  </Space>

解释

可乐：从需求分析考虑、然后研究网上的方案并学习前置知识，再是一些环境的安装，最后才是前后端代码的实现，领导，我这花了五天不过份吧。

领导（十分无语）：我们平台本来就没几个用户、没几篇文章，本来就是一张关联表就能解决的问题，你又搞什么分布式锁又搞什么缓存，还花了那么多天时间。我不管啊，剩下没做的需求你得正常把它正常做完上线，今天周五，周末你也别休息了，过来加班吧。

最后

以上就是本文的全部内容，如果你觉得有意思的话，点点关注点点赞吧～

大家好，我卡颂。

上周和10个左右同学交流了如何发展第二曲线，他们中有国企员工、宝妈、4S店管理、程序员...

在交流中，我发现个普遍现象 —— 应试教育以及职场带来的思维惯势，对人的影响非常大，最直观的影响就是 —— 很多人不懂什么是优势。

如果你一路从学校到职场，直到最近才由于各种原因（比如裁员压力、内卷、年龄焦虑...）考虑发展第二曲线，那这篇文章也许会改变你对优势的固有认知。

说真的，什么是优势？

学校与公司都是服务于具体目的的组织：

• 学校：服务于升学，表现形式是学习


• 公司：服务于盈利，表现形式是工作

所以，在学校与公司的语境下，优势通常指那些能为达成具体目的提供帮助的能力或性格，比如：

• 学校最看重应试能力，因为这跟升学息息相关


• 公司鼓励争强好胜，因为这跟盈利相关

那些与达成具体目的关联不大，甚至背道而驰的能力或性格，就会被冠以劣势的名头。

比如在公司中，不善沟通、讨好型人格就是劣势。

我们会发现，决定一个能力或性格是否是优势，取决于为了达成什么目的。

但由于长久以来的思维惯势，很多人已经慢慢忽略了为了达成什么目的这个前缀。

他们已经习惯性认为不善沟通、讨好型人格就是劣势，不管什么情况下都是劣势。

这就是思维惯势对我们带来的第一个影响 —— 不考虑目的的情况下否定自己的能力与性格。

让我们暂停思考一下 —— 当我在表达上述观点时，你有没有觉察到什么不对劲的地方？

在上面的观点中，我提到 —— 优势是那些“能为达成具体目的提供帮助的能力或性格”。

优势是能力或性格，这个表述你觉得有问题么？

在学校或公司中，这种表述是没问题的，因为在这样的组织内，个体都是螺丝钉，只要发挥你的能力或性格做好本职工作即可。

比如，一个程序员可能只看重技术能力而不看重运营能力，因为本职工作不需要后者。

这就是思维惯势对我们带来的第二个影响 —— 认为优势是单一维度的（能力或性格）。

当考虑第二曲线时

当考虑发展第二曲线时，上述两个影响会对我们的选择造成不利的结果。

带着优势是单一维度的思维惯势，我们思考第二曲线的模式会倾向于 —— 我有什么比别人厉害的能力？

再结合第一条思维惯势不考虑目的的情况下否定自己的能力与性格，最终思考的模式会倾向于 —— 我有什么拿得出手的职场能力或性格特质？

比如，当程序员考虑第二曲线时，最常见的选择是：

都是这种思维惯势下的产物。

对于更广大的普通人，正是因为职场能力不出众、性格没优势，才在职场混不下去，从而考虑第二曲线。

如果还顺着思维惯势思考，不又陷入：

这样的死局了么？

第二曲线应该如何思考优势

对于发展第二曲线的同学，我们需要跳出应试教育以及职场带来的思维惯势。

首先，回归本质 —— 评判一个能力或性格是优势还是劣势，取决于为了达到什么目的。

有个找我咨询的女生，由于是讨好型人格，所以在职场混的很痛苦，处理同事关系时很内耗。

但她的第二曲线方向是线下组织人参与有趣的活动。作为组织者，她需要在活动期间照顾到所有参与者。

正是由于讨好型人格，使得她在做这件事时心情无比愉悦，也收获了满满的成就感。

再比如一个找我咨询的男程序员，小镇做题家，喜欢文史，人前内向，网上又有极强表达欲，喜欢输出知识和自嘲。

他在职场就是被领导PUA的老实人，但他非常适合做ip，因为ip最重要的就是面相。

换一个目的，之前的劣势就都是优势了。

既然目的、能力、性格互相羁绊，那显然评价优势的标准并非单一维度。

实际上，当考虑第二曲线时，我们应该考虑优势领域，而非优势本身。

所谓优势领域，是指下面三者的交集：

比如，一个找我咨询的4S店管理的情况如下：

最后，结合他辅导女儿学英语的经历（他女儿在会说中文前就能用英文单词表达需求了，比如渴了会说water），最终选择了一个优势领域 —— 教小朋友学英语。

注意，教小朋友学英语与学英语是两个完全不同的领域，后者竞争者众多，而前者完全是根据他的能力、性格特质出发定制的领域。

这是个集合了亲子关系、儿童心理学、英语教学、幼儿教育等学科的交叉领域。

在他的优势领域中：

• 比他英语厉害的可能没他有小孩缘


• 比他有小孩缘的可能育儿没他厉害


• 比他育儿厉害的可能英语没他厉害

总之，在自己选择的优势领域中，我们普通人也能处于绝对的优势地位。

总结

由于应试教育以及职场带来的思维惯势，大部分人对优势的理解有两个误区：

在考虑发展第二曲线时，这种思维惯势会影响我们的最终选择。

更好的方式是：考虑优势领域，而非优势本身，即找到下面三者的交集：

交集所在的就是你的优势领域，也就是你应该探索第二曲线的方向。

精彩新文章：拿客户电脑，半小时完成轮播组件开发！被公司奖励500

背景

我们公司的导航菜单是动态可配置的，有的页面菜单数量比较多，有的比较少。

由于大多页面菜单都是比较少的，因此当菜单非常多时， 我们采用了朴实无华的滚动条：当横向超出的时候，滚动展示。

但很快，客户就打回来了：说我们的样式太丑，居然用滚动条！还质问我们产品这合理吗？产品斩钉截铁的告诉客户，我让开发去优化...

于是，领导让我们想解决方案。（我真谢谢产品！）

很快，我想到一个方案（从其他地方看到的交互），我告诉领导：

我们可以做成动态菜单栏，如果展示不下了，出现一个更多按钮，多余的菜单都放到更多里面去：

领导说这个想法不错啊，那就你来实现吧！

好家伙，我只是随便说说，没想到，自己给自己挖了个大坑啊！

不过，我最后也是顺利的完成了这个效果的开发，还被评上了本季度优秀开发！分享一下自己的实现方案吧！

技术方案

基础组件样式开发

既然要开发这个效果，干脆就封装一个通用组件AdaptiveMenuBar.vue吧。我们先写一下基本样式，如图，灰色区域就是我们的组件内容，也就是我们菜单栏动态展示的区域。

AdaptiveMenuBar.vue

<template>

    <div class="adaptive-menu-bar">

    </div>

</template>



<style lang="less" scoped>

.adaptive-menu-bar {

    width: 100%;

    height: 48px;

    background: gainsboro;

    display: flex;

    position: relative;

    overflow: hidden;

}

</style>



  

我们写点假数据

<template>

    <div class="adaptive-menu-bar">

        <div class="origin-menu-item-wrap">

            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

                {{ item.name }}

            </div>

        </div>



        <div>更多</div>

    </div>

</template>



<script setup>

const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];

</script>



<style lang="less" scoped>

.adaptive-menu-bar {

    width: 100%;

    height: 48px;

    background: gainsboro;

    display: flex;

    position: relative;

    overflow: hidden;

    .origin-menu-item-wrap{

        width: 100%;

        display: flex;

    }

}

</style>

如图，由于菜单数量比较多，一部分已经隐藏在origin-menu-item-wrap这个父元素里面了。

实现思路

那我们要如何才能让多余的菜单出现在【更多】按钮里呢？原理很简单，我们只要计算出哪个菜单超出展示区域即可。假设如图所示，第12个菜单被截断了，那我们前11个菜单就可以展示在显示区域，剩余的菜单就展示在【更多】按钮里。

更多按钮的展示逻辑

更多按钮只有在展示区域空间不够的时候出现，也就是origin-menu-item-wrap元素的滚动区域宽度scrollWidth 大于其宽度clientWidth的时候。

用代码展示大致如下

<template>

  <div ref="menuBarRef" class="origin-menu-item-wrap">

      <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

          <m-button type="default" size="small">{{ item.name }}</m-button>

      </div>

  </div>

</template>

<script setup>

const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];



// 是否展示更多按钮

const showMoreBtn = ref(false);



onMounted(() => {

    const menuWrapDom = menuBarRef.value;

    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {

        showMoreBtn.value = true;

    }

});

</script>

截断位置的计算

要计算截断位置，我们需要先渲染好菜单。

然后开始对menu-item元素宽度进行加和，当相加的宽度大于菜单展示区域的宽度clientWidth时，计算终止，此时的menu-item元素就是我们要截断的位置。

菜单截断的部分，我们此时放到更多里面展示就可以了。

大致代码如下：

<template>

  <div ref="menuBarRef" class="origin-menu-item-wrap">

      <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

          <m-button type="default" size="small">{{ item.name }}</m-button>

      </div>

  </div>

</template>

<script setup>

const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];



// 是否展示更多按钮

const showMoreBtn = ref(false);



onMounted(() => {

    const menuWrapDom = menuBarRef.value;

    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {

        showMoreBtn.value = true;

    }

    // 计算截断菜单的索引位置

    let sliceIndex = 0

    // 获取menu-item元素dom的集合

    const menuItemNodeList = menuWrapDom.querySelectorAll('.menu-item');

    // 将NodeList转换成数组

    const nodeArray = Array.prototype.slice.call(menuItemNodeList);

    let addWidth = 0;

    for (let i = 0; i < nodeArray.length; i++) {

        const node = nodeArray[i];

        // clientWidth不包含菜单的margin边距，因此我们手动补上12px

        addWidth += node.clientWidth + 12;

        // 76是更多按钮的宽度，我们也要计算进去

        if (addWidth + 76 > menuWrapDom.clientWidth) {

            sliceIndex.value = i;

            break;

        } else {

            sliceIndex.value = 0;

        }

      }

  

});

</script>

样式重整

当被截断的元素计算完毕时，我们需要重新进行样式渲染，但是注意，我们原先渲染的菜单列不能注销，因为每次浏览器尺寸变化时，我们都是基于原先渲染的菜单列进行计算的。

所以，我们实际需要渲染两个菜单列：一个原始的，一个样式重新排布后的。

如上图，黄色就是原始的菜单栏，用于计算重新排布的菜单栏，只不过，我们永远不在页面上展示给用户看！

<template>

    <div class="adaptive-menu-bar">

        <!-- 原始渲染的菜单栏 -->

        <div ref="menuBarRef" class="origin-menu-item-wrap">

            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

                <m-button type="default" size="small">{{ item.name }}</m-button>

            </div>

        </div>

      

        <!-- 计算优化显示的菜单栏 -->

        <div v-for="(item, index) in menuList" :key="index" class="menu-item">

            <m-button type="default" size="small">{{ item.name }}</m-button>

        </div>

        <div >更多</div>

    </div>

</template>

代码实现

基础功能完善

为了我们的菜单栏能动态的响应变化，我们需要再每次resize事件触发时，都重新计算样式

const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];



// 是否展示更多按钮

const showMoreBtn = ref(false);



const setHeaderStyle = () => {

  // ....

}



window.addEventListener('resize', () => setHeaderStyle());



onMounted(() => {

    setHeaderStyle();

});

</script>

完整代码

完整代码剥离了一些第三方UI组件，便于大家理解。

<template>

    <div class="adaptive-menu-bar">

        <!-- 原始渲染的菜单栏 -->

        <div ref="menuBarRef" class="origin-menu-item-wrap">

            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

                {{ item.name }}

            </div>

        </div>

        <!-- 计算优化显示的菜单栏 -->

        <div v-for="(item, index) in menuList" :key="index" class="menu-item">

            {{ item.name }}

        </div>



        <!-- 更多按钮 -->

        <div v-if="showMoreBtn" class="dropdown-wrap">

            <span>更多</span>

            <!-- 更多里面的菜单 -->

            <div class="menu-item-wrap">

                <div v-for="(item, index) in menuOriginData.slice(menuList.length)" :key="index">{{ item.name }}</div>

            </div>

        </div>

    </div>

</template>

<script setup>

import { IconMeriComponentArrowDown } from 'meri-icon';



const menuBarRef = ref();



const open = ref(false);



const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];



const menuList = ref(menuOriginData);



// 是否展示更多按钮

const showMoreBtn = ref(false);



const setHeaderStyle = () => {

    const menuWrapDom = menuBarRef.value;

    if (!menuWrapDom) return;

    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {

        showMoreBtn.value = true;

    } else {

        showMoreBtn.value = false;

    }

    const menuItemNodeList = menuWrapDom.querySelectorAll('.menu-item');

    if (menuItemNodeList) {

        let addWidth = 0,

            sliceIndex = 0;

        // 将NodeList转换成数组

        const nodeArray = Array.prototype.slice.call(menuItemNodeList);

        for (let i = 0; i < nodeArray.length; i++) {

            const node = nodeArray[i];

            addWidth += node.clientWidth + 12;

            if (addWidth + 64 + 12 > menuWrapDom.clientWidth) {

                sliceIndex = i;

                break;

            } else {

                sliceIndex = 0;

            }

        }

        if (sliceIndex > 0) {

            menuList.value = menuOriginData.slice(0, sliceIndex);

        } else {

            menuList.value = menuOriginData;

        }

    }

};



window.addEventListener('resize', () => setHeaderStyle());



onMounted(() => {

    setHeaderStyle();

});

</script>

<style lang="less" scoped>

.adaptive-menu-bar {

    width: 100%;

    height: 48px;

    background: gainsboro;

    display: flex;

    position: relative;

    align-items: center;

    overflow: hidden;

    .origin-menu-item-wrap {

        width: 100%;

        display: flex;

        position: absolute;

        top: 49px;

        display: flex;

        align-items: center;

        left: 0;

        right: 0;

        bottom: 0;

        height: 48px;

        z-index: 9;

    }

    .menu-item {

        margin-left: 12px;

    }

    .dropdown-wrap {

        width: 64px;

        display: flex;

        align-items: center;

        cursor: pointer;

        justify-content: center;

        height: 28px;

        background: #fff;

        border-radius: 4px;

        overflow: hidden;

        border: 1px solid #c4c9cf;

        background: #fff;

        margin-left: 12px;

        .icon {

            width: 16px;

            height: 16px;

            margin-left: 4px;

        }

    }

}

</style>

代码效果

可以看到，非常丝滑！

uniapp 弹框

主要介绍了 uniapp 弹框使用的一些问题，例如 uni.showModal 中的 content 换行显示实现、uni.showToast()字数超过 7 个显示问题、以及 uni-popup 自定义弹层处理

1. uni.showModal 中的 content 换行显示实现

// 注意：\r\n在微信模拟器中无效，真机才行

const content =

  "学校名：光谷一小\r\n" +

  "班级名：501\r\n" +

  "教师名：张哈哈\r\n"

uni.showModal({

  title: "确认操作吗？",

  content: content,

  success: (res) => {

    if (res.confirm) {

    } else if (res.cancel) {

    }

  },

});

2. uniapp 解决 showToast 字数超过 7 个显示问题

使用 uni-app 开发小程序，不管是使用微信小程序的 wx.showToast() API 或 uni-app 的 uni.showToast() API 显示消息提示框，显示图标 title 文本最多显示 7 个汉字长度，在不显示图标的情况下，大于两行不显示。

解决方案一：如果要显示超过两行的文本，使用 uview-ui 框架的 Toast 消息提示组件。

// 先在html中引入组件

<u-toast ref="uToast" />;

// 然后调用

this.$refs.uToast.show({

  title: "请学生绑定图书后再布置任务！",

  duration: 1500,

});

解决方案二：不显示图标，就可以显示两行了

uni.showToast({

  title: "请学生绑定图书后再布置任务！",

  icon: "none",

  duration: 1500,

});

3. uniapp 自定义弹框 uni-popup

复杂弹框，需要自定义内容的话，只能自己写了，可以使用 uni-popup 弹出层进行实现

<template>

  <uni-popup ref="popup" class="lm-popup">

    <view class="lm-popup-content">

      <uni-icons

        class="close"

        type="closeempty"

        size="24"

        color="#ccc"

        @click="hide"

      ></uni-icons>

      <button class="btn confirm" @click="handleAuth">微信授权登录</button>

      <button class="btn cancel" @click="handleLogin">手机验证码登录</button>

    </view>

  </uni-popup>

</template>



<script>

  export default {

    name: "login-popup",

    methods: {

      show() {

        this.$refs.popup.open("center");

      },

      hide() {

        this.$refs.popup.close();

      },

    },

  };

</script>

uniapp 授权登录

主要介绍了uniapp授权的几种方式，分别为临时登录授权、手机号授权、用户信息授权

1. 微信登录授权

微信小程序的登录逻辑发生了变化，要求开发者使用静默登录，即在用户无感知的情况下进行登录操作，不需要弹出授权窗口了。

如下所示，获取微信的临时登录凭证 code，不会弹出授权窗口了。

uni.getProvider({

  // 类型为oauth，用于获取第三方登录提供商

  service: "oauth",

  success: (res) => {

    // 输出支持的第三方登录提供商列表

    if (~res.provider.indexOf("weixin")) {

      // 发起登录请求，获取临时登录凭证 code

      uni.login({

        // 登录提供商，如微信

        provider: "weixin",

        success: (loginRes) => {

          // 获取用户登录凭证

          this.handleLogin(loginRes.code);

        },

      });

    }

  },

});

2. 微信手机号授权

对于一般的用户信息，如头像、昵称等，被视为非敏感信息，以静默登录的方式进行获取。而用户的手机号等敏感信息，是需要授权的，可以通过 open-type="getPhoneNumber"属性来触发获取手机号码的授权弹框。

getPhoneNumber：获取用户手机号，可以从@getphonenumber 回调中获取到用户信息，该接口一直会弹出授权弹框，具体可查看官网：uniapp.dcloud.net.cn/component/b…

<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>



// 打开获取用户手机号的授权窗口

getPhoneNumber(e) {

  console.log('getPhoneNumber', e.detail)

  console.log(e.detail.encryptedData); // 获取加密数据

  console.log(e.detail.iv); // 获取加密算法的初始向量



  const { detail:{ code, encryptedData, iv, errMsg } } = e;

  if(errMsg === 'getPhoneNumber:ok') {

    // 获取成功，做对应操作

  }

}

2.1 拦截默认弹框

如下图所示：一般情况下，需要先勾选隐私协议，才能弹窗。

但是@getphonenumber事件弹窗无法拦截的，就算事件中写了判断，还是会先弹窗的，没找到拦截的方法。

目前的解决方法，用了两个按钮来判断实现

<button v-if="!agree" class="login-btn" hover-class='zn-btn-green-hover' @click="handleSubmit('auth')">手机号验证登录</button>

<button v-else class="login-btn" hover-class='zn-btn-green-hover' open-type="getPhoneNumber" @getphonenumber="(e) => handleSubmit('auth', e)">手机号验证登录</button>



handleSubmit(type, e) {

  if (!this.agree) {

    uni.showToast({ title: '请勾选用户服务协议', icon: 'none' });

    return;

  }

}

3. 微信用户信息（头像、昵称）授权

可以使用uni.getUserProfile获取用户信息，如头像、昵称

该 API 对于低版本（基础库 2.10.4-2.27.0 版本），每次触发 uni.getUserProfile 才会弹出授权窗口；

我开发时，最新的基础库为 3.3.1，不会弹出授权窗口，直接获取到值了，也是静默授权状态。

<button type="default" size="mini" @click="getUserInfo">获取用户信息</button>



getUserInfo(e) {

  // 获取用户信息

  uni.getUserProfile({

    desc: '获取你的昵称、头像、地区及性别',

    success: res => {

      console.log('获取你的昵称、头像',res);

    },

    fail: err => {

      console.log("拒绝了", err);

    }

  });

}

uniapp 跳转

主要介绍了 uniapp 小程序跳转的三种方式，分别为内部页面跳转、外部链接跳转、其他小程序跳转。

1. 内部页面

内部页面的跳转，可以通过如下方式：navigateTo、reLaunch、switchTab

// 保留当前页面，跳转到应用内的某个页面

uni.navigateTo({ url: "/pages/home/home" });



// 关闭所有页面，打开到应用内的某个页面

uni.reLaunch({ url: "/pages/home/home" });



// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

uni.switchTab({ url: "/pages/home/home" });

2. 外部链接

通过 webview 打开外部网站链接，web-view 是一个 web 浏览器组件，可以用来承载网页的容器。

// 1. 新建pages/webview/webview.vue页面

<template>

  <web-view :src="url"></web-view>

</template>

<script>

export default {

  data() {

    return {

      url: ''

    }

  },

  onLoad(e) {

    // 使用web-view标签进行跳转

    this.url = decodeURIComponent(e.url)

  }

}

</script>



// 2. 外链跳转使用

uni.navigateTo({url: "https://www.taobao.com"})

3. 小程序 appId

通过navigateToMiniProgram可以打开其他小程序

// 打开其他小程序

uni.navigateToMiniProgram({

  appId: "AppId", // 其他小程序的AppId

  path: "pages/index/index", // 其他小程序的首页路径

  extraData: {}, // 传递给其他小程序的数据

  envVersion: "release", // 其他小程序的版本（develop/trial/release）

  success(res) {

    // 打开其他小程序成功的回调函数

  },

  fail(err) {

    // 打开其他小程序失败的回调函数

  },

});