首先如果你使用的是页面级滚动，即使uni-app中的pages.json中有相关配置，在编译到小程序中也是没有效果的，因为小程序原生不支持，如下：

那么我们去看微信的官方回复：

所以得出一个结论，要想隐藏滚动条，我们必须使用scroll-view视图组件

那么在uni-app页面滚动是不是scroll-view，答案是的，但是我们没办法在顶层设置，因为官方没有暴露相关api，那么要想去掉滚动条，我们就只能在自己的页面使用scroll-view视图组件，取代全局的滚动视图。

下面上简易代码

<template>

	<scroll-view scroll-y="true" :show-scrollbar="false" :enhanced="true" class="main">

		<view class="list" v-for="iten in 30">列表{{iten}}</view>

	</scroll-view>

</template>





<style lang="scss" scoped>

	.main{

		height: 100vh;

	}

	.list{

		border: 1xp solid black;

		margin: 20rpx auto;

		text-align: center;

		line-height: 100rpx;

	}

</style>

效果图：

如果你的组件不是占满全屏，比如有头部导航

这时候有两种做法：

1.将头部标签放到scroll-view内部，然后固定定位

<template>

	<scroll-view scroll-y="true" :show-scrollbar="false" :enhanced="true" class="main">

		<view class="nav">导航nav</view>

		<view class="list-container">

			<view class="list" v-for="iten in 30">列表{{iten}}</view>

		</view>

	</scroll-view>

</template>



<style lang="scss" scoped>

	.main{

		height: 100vh;

	}

	.list-container{

		margin-top: 200rpx;

	}

	.list{

		border: 1xp solid black;

		margin: 20rpx auto;

		text-align: center;

		line-height: 100rpx;

	}

	.nav{

		position: fixed;

		top: 0;

		line-height: 200rpx;

		padding-top: 20rpx;

		width: 100vw;

		text-align: center;

		border: 1px solid black;

		background-color: #fff;

	}

</style>

效果图：

2.将scroll-view的高度设置为视口余下高度

这里注意一下在移动端尽量较少的使用cale()计算高度

所以这里我们使用flex布局

<template>

	<view class="content">

		<view class="nav">导航nav</view>

		<scroll-view scroll-y="true" :show-scrollbar="false"  :enhanced="true" class="main">

				<view class="list" v-for="iten in 30">列表{{iten}}</view>

		</scroll-view>

	</view>

</template>



<style lang="scss" scoped>

	.content{

		height: 100vh;

		width: 100vw;

		overflow: hidden;

		display: flex;

		flex-direction: column;

	}

	.main{

		flex-grow: 1;

	}

	.list{

		border: 1xp solid black;

		margin: 20rpx auto;

		text-align: center;

		line-height: 100rpx;

	}

	.nav{

		height: 200rpx;

		line-height: 200rpx;

		width: 100vw;

		text-align: center;

		border: 1px solid black;

		background-color: #fff;

	}

</style>

效果图：

如果有帮助到你的话，记得点个赞哦！

文字截断是 Web 开发中非常普遍的一个需求，原因无他，很多时候我们无法确定展示文本的容器的宽度，如果不使用文字截断，要么文本被生硬的截断隐藏、要么文本破坏了预期中的布局。

Tailwind CSS 提供的文字截断的原子类：

.truncate {

	overflow: hidden;

	white-space: nowrap;

	text-overflow: ellipsis;

}

这 3 组 CSS 规则共同作用才可实现用 ... 截断文字的效果，缺一不可。

• overflow: hidden 表示容器空间不足时内容应该隐藏，而非默认的 visible 完全展示


• white-space: nowrap 表示文本容器宽度不足时，不能换行，其默认值为 normal，该行为不太好预测，但大部分情况下，它等同于 wrap 即文本尽可能的换行


• text-overflow: ellipsis 指定文本省略使用 ... ，该属性默认值为 clip ，表示文本直接截断什么也不显示，这样展示容易对用户造成误解，因此使用 ... 更合适

接下来介绍一个在 PC Web 上很实用的交互效果：在需要截断的文本后面，紧跟一个鼠标 hover 上去才会展示的按钮， 执行一些和省略文本强相关、轻操作的动作。

如图所示，鼠标 hover 表示的按钮可以用来快速的编辑「标题」。下面介绍一下它的纯 CSS 实现。

首先，我们来实现一个基础版的。

代码：

<div class="container">

  <p class="complex-line truncate">

    <span class="truncate">海和天相连成为海岸线</span>

    <span class="icon">❤️</span>

  </p>

  <p class="truncate">鱼和水相濡以沫的世界</p>

</div>



<style>

  .truncate {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

  }

  .container {

    max-width: 100px;

  }

  .complex-line {

    display: flex;

  }

  .complex-line:hover .icon {

    display: block;

  }

  .icon {

    display: none;

  }

</style>

一些重点：

• 容器 .container 必须是宽度固定、或者最大宽度固定的，以此确保容器不会因为子元素无止境的扩充。比如你可以设置容器的 width 或 max-width 。在某些情况下，即使设置了 max-width 但不生效，此时可以尝试添加 overflow: hidden。


• 含有按钮的行 .complex-line 和子元素中展示文字的标签（ .complex-line 下的 span.truncate），都要添加文字截断类 .truncate 。


• 按钮 .icon 默认不展示，hover 当前行的时候才展示，这个也很常规，主要通过设置其 display 属性实现。


• 🌟 接下来一步很巧妙，就是为含有按钮的行 .complex-line ，设置其为 Flex 容器，这主要是借助 Flex Item 的 flex-shrink 属性默认值为 1 的特性，允许含有文字的 Flex Item span.truncate 在按钮 span.icon 需要展示的时候进一步缩放，腾出空间，用于完整展示按钮。

这样便实现了基础版的文字截断 + 可以自动显示隐藏按钮的交互。

接下来再看看文章开头提到的这个交互：

它和基础版的样式最大的不同就是它是多列的，这里可以使用 Grid 网格布局实现。

<div class="container">

  <label>标题：</label>

  <p class="complex-line truncate">

    <span class="truncate">高质量人才生产总基地</span>

    <span class="icon">✏️</span

  </p>

  <label>编号：</label>

  <p class="truncate">No.9781498128959</p>

</div>



<style>

.container {

  display: grid;

  grid-template-columns: auto 1fr;

	/** ... */

}

</style>

其他样式代码和基础版中的一致，不再赘述。

总结

为了实现本文介绍的这种交互，应该确保：

• 容器的宽度或最大宽度应该是固定的


• 按钮前面的那个展示文字的元素，和它们的父元素，都应该有 .truncate 文字截断效果


• 按钮的父元素应该为 Flex 容器，使得按钮显示时，文字所在标签可以进一步缩放

背景

最近有个需求需要做一个无缝轮播的消息通知，并且需要抽离成通用组件，记录下实现这个组件的历程。

先看效果

实现过程

思考（part-1）

因为刚开始给的设计稿是没有动画效果的，我刚开始想的效果是只有红色加粗的文字轮播，其他文字不变；然后想着看下有没有已经实现好的轮子，找到一个 js 库：react-text-loop;但是经过我的考虑，如果只是部分文字滚动，红色加粗的文字可能宽度不一样，会导致其他文字换位，所以还是想着整条文字滚动会比较好。

使用 antd-m Swiper 实现（part-2）

想到这个滚动效果在移动端应该很常见，antd-m 应该可能会有组件吧，去瞧瞧👀；noticeBar 组件只有横向滚动文字，没有竖直滚动的。既然没有，那就用其他方式实现吧，最简单的就是用 Swiper 组件设置成 竖向滚动，因为我负责的项目基本都用 antd-m,所以就用 antd-m 的 Swiper 来实现了。

实现过程遇到的问题

antd-m 的 Swiper 组件竖向滚动必须指定高度

在使用 antd-m 的 Swiper 组件竖向滚动的方式好像有问题，但是看文档的使用又是正常，结果发现竖向滚动需要指定高度，所以文档还是要仔细看清楚： Swiper 竖向文档

依赖冲突问题

在自己仓库使用很正常，一点问题都没有；然后打算抽离到我们项目的组件库中，然后在把项目中使用替换成组件库的包，过程很顺畅；过了段时间另一个项目要使用我们的组件，然后我就把包发给他，结果他说他项目里用不了，会报错。

然后 clone 他的项目试了下，果然是有问题的，因为他们项目里用的是 antd-m 2.x，2.x 没有 Swiper 组件，而我的组件库依赖的是 antd-m 5.x，看了下他们仓库用的是antd-m 2.x 和 5.x 共存的方式，可以看一下这个 antd-m 迁移指南,如果要两个版本共存且之前用的是组件按需导入，那么组件按需导入的配置也会有问题，因为两个版本的文件差异比较大，所以需要改一下按需导入的配置：

module.exports = {

  "plugins": [

    // 原配置

    // [

    //   'import',

    //   {

    //     libraryName: 'antd-mobile',

    //     libraryDirectory: 'lib',

    //     style: 'css',

    //   },

    //   'antd-mobile',

    // ]



    // 修改为

    [

      'import',

      {

        libraryName: 'antd-mobile',

        customName: (name, file) => {

          const { filename } = file.opts;

          if (filename.includes('/es/')) {

            return `antd-mobile/es/components/${name}`;

          }

          return `antd-mobile/lib/${name}`;

        },

        style: (name, file) => {

          const { filename } = file.opts;

          if (filename.includes('/es/')) {

            // 如果项目已经有 global 文件，return false 即可

            // 如果没有，这样配置后就不需要手动引入 global 文件

            return 'antd-mobile/es/global';

          }

          return `${name}/style/css`;

        },

      },

      'antd-mobile',

    ]

  ]

}

想彻底解决这个依赖冲突问题

其实修改完配置之后使用就正常了，但是我考虑到如果之后想使用这个组件，如果 antd-m 版本不是 5.x,那么有一个项目就要改一个配置，很烦人；而且 antd-m Swiper 竖向需要指定高度，如果都需要指定高度了，那么我直接实现一个滚动动画应该也很简单吧，说干就干。

自己手写一个轮播组件（pard-3）

手动实现轮播还是比较简单的，只不过无缝轮播那里需要处理下，传统的方式都是通过在轮播 item 首尾复制 item 插入，当轮播到最后一个，用复制的 item 来承接，之后在回归原位正常滚动。

手写实现思路

最终实现代码

其实最后是封装成了一个 react 组件，但是掘金上为了大家看到更好的效果，用原生的方式简单写了下。如果需要封装成 react/vue 组件参考下方代码应该就够了。

容器未 hidden 效果

组件封装的设计

这里放一下我封装组件设计的 props

interface IProps {

    /** 轮播通知 list */

    list: any[];

    /** noticebar 显隐控制 */

    visible?: boolean;

    /** 单个轮播 item 的高度, 传入 750 设计稿的数字，会转成 vw */

    swiperHeight?: number;

    /** 每条通知轮播切换的间隔 */

    interval?: number;

    /** 轮播动画的持续时间 */

    animationDuration?: number;

    /** 是否展示关闭按钮 */

    closeable?: boolean;

    /** 关闭按钮点击的回调 */

    onClose?: () => void;

    /** 自定义轮播 item 的内容 */

    renderItem?: (item: any) => React.ReactNode;

    /** notice 的标题 */

    noticeTitle?: ReactNode;

    /** notice 右边自定义 icon */

    rightIcon?: ReactNode;

    /** 是否展示 notice 左边 icon */

    showLeftIcon?: boolean;

    /** notice 左边自定义 icon */

    leftIcon?: ReactNode;

    /** 自定义类名 */

    className?: string;

}

什么是vue依赖注入？

Vue是一个用于构建用户界面的渐进式框架。

它提供了一种简单而灵活的方式来管理组件之间的数据流，即依赖注入（Dependency Injection，DI）。

依赖注入是一种设计模式，它允许一个组件从另一个组件获取它所依赖的数据或服务，而不需要自己创建或管理它们。这样可以降低组件之间的耦合度，提高代码的可维护性和可测试性。

依赖注入示意图

provide和inject

在Vue中，依赖注入的方式是通过provide和inject两个选项来实现的。

provide选项允许一个祖先组件向下提供数据或服务给它的所有后代组件。
inject选项允许一个后代组件接收来自祖先组件的数据或服务。
这两个选项都可以是一个对象或一个函数，对象的键是提供或接收的数据或服务的名称，值是对应的数据或服务。函数的返回值是一个对象，具有相同的格式。

下面是一个简单的例子，演示了如何使用依赖注入的方式共享数据：

父组件

<template>

  <div>

    <h1>我是祖先组件</h1>

    <child-component></child-component>

  </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue'



export default {

  name: 'AncestorComponent',

  components: {

    ChildComponent

  },

  // 提供一个名为message的数据

  provide: {

    message: 'Hello from ancestor'

  }

}

</script>

子组件

<template>

  <div>

    <h2>我是后代组件</h2>

    <p>{{ message }}</p>

  </div>

</template>

// 后代组件

<script>

export default {

  name: 'ChildComponent',

  // 接收一个名为message的数据

  inject: ['message']

}

</script>

这样，后代组件就可以直接使用祖先组件提供的数据，而不需要通过props或事件来传递。

需要注意的是，依赖注入的数据是不可响应的，也就是说，如果祖先组件修改了提供的数据，后代组件不会自动更新。
如果需要实现响应性，可以使用一个响应式的对象或者一个返回响应式对象的函数作为provide的值。

实现响应式依赖注入的几种方式

一、提供响应式数据

方法是在提供者组件中使用ref或reactive创建响应式数据,然后通过provide提供给后代组件。后代组件通过inject接收后,就可以响应数据的变化。

提供者：

<template>

  <div>

    <h1>我是提供者组件</h1>

    <button @click="count++">增加计数</button>

    <child-component></child-component>

  </div>

</template>



<script>

import ChildComponent from './ChildComponent.vue'

import { ref, provide } from 'vue'



export default {

  name: 'ProviderComponent',

  components: {

    ChildComponent

  },

  setup() {

    // 使用ref创建一个响应式的计数器

    const count = ref(0)

    // 提供给后代组件

    provide('count', count)

    return {

      count

    }

  }

}

</script>

接收者：

<template>

  <div>

    <h2>我是接收者组件</h2>

    <p>计数器的值是：{{ count }}</p>

  </div>

</template>



<script>

import { inject } from 'vue'



export default {

  name: 'ChildComponent',

  setup() {

    // 接收提供者组件提供的响应式对象

    const count = inject('count')

    return {

      count

    }

  }

}

</script>

二、提供修改数据的方法

提供者组件可以提供修改数据的方法函数,接收者组件调用该方法来更改数据,而不是直接修改注入的数据。

提供者：

<template>

  <div>

    <h1>我是提供者组件</h1>

    <p>消息是：{{ message }}</p>

    <child-component></child-component>

  </div>

</template>



<script>

import ChildComponent from './ChildComponent.vue'

import { ref, provide } from 'vue'



export default {

  name: 'ProviderComponent',

  components: {

    ChildComponent

  },

  setup() {

    // 使用ref创建一个响应式的消息

    const message = ref('Hello')

    // 定义一个更改消息的方法

    function updateMessage() {

      message.value = 'Bye'

    }

    // 提供给后代组件

    provide('message', { message, updateMessage })

    return {

      message

    }

  }

}

</script>

接收者：

<template>

  <div>

    <h2>我是接收者组件</h2>

    <p>消息是：{{ message }}</p>

    <button @click="updateMessage">更改消息</button>

  </div>

</template>



<script>

import { inject } from 'vue'



export default {

  name: 'ChildComponent',

  setup() {

    // 接收提供者组件提供的响应式对象和方法

    const { message, updateMessage } = inject('message')

    return {

      message,

      updateMessage

    }

  }

}

</script>

三、使用readonly包装

通过readonly包装provide的数据,可以防止接收者组件修改数据,保证数据流的一致性。

提供者：

<template>

  <div>

    <h1>我是提供者组件</h1>

    <p>姓名是：{{ name }}</p>

    <child-component></child-component>

  </div>

</template>



<script>

import ChildComponent from './ChildComponent.vue'

import { ref, provide, readonly } from 'vue'



export default {

  name: 'ProviderComponent',

  components: {

    ChildComponent

  },

  setup() {

    // 使用ref创建一个响应式的姓名

    const name = ref('Alice')

    // 使用readonly包装提供的值，使其不可修改

    provide('name', readonly(name))

    return {

      name

    }

  }

}

</script>

接收者：

<template>

  <div>

    <h2>我是接收者组件</h2>

    <p>姓名是：{{ name }}</p>

    <button @click="name = 'Bob'">尝试修改姓名</button>

  </div>

</template>



<script>

import { inject } from 'vue'



export default {

  name: 'ChildComponent',

  setup() {

    // 接收提供者组件提供的只读对象

    const name = inject('name')

    return {

      name

    }

  }

}

</script>

四、使用<script setup>

在<script setup>组合式写法下,provide和inject默认就是响应式的,无需额外处理。

总结

依赖注入的方式共享数据在Vue中是一种高级特性，它主要用于开发插件或库，或者处理一些特殊的场景。

前言

前两年在一家做电商的公司做了一个需求：鼠标框选商品卡片，开始拖拽的时候合成一个然后改变位置，页面上有几千个所以还要结合虚拟列表。当时不知道怎么做，就在 github 上到处找现成的库，最后找到了 react-selectable-fast，并结合 react-virtualized、react-sortable-hoc 完成了需求。虽然该库已经很久不维护了，但大致上能满足我的需求了，尽管它是以 dom 的方式，很不 react，但秉承着能用就行的原则。意料之中，开发过程中遇到了 bug，最后只能 fork 一份修改源码后自己发了个 npm 包来使用。

项目介绍

前几个月在空闲时间突然来了兴致，自己找点事做，就想自己开发一个框选的库吧，万一也有人有这个需求不知道怎么办呢？写完后发到了 antd 的社区共建群里，有的人觉得不错也 star 了。先献上项目地址 react-selectable-box，文档完整，使用 dumi 编写。api 友好，支持自定义一些功能。

api 设计

一个组件在设计时，首先思考的应该是 api 如何去设计，最好符合大家平常的习惯，并具有一定的自定义和拓展能力。再加上了解 react-selectable-fast 这个库的缺点和痛点，对我的设计就更加有帮助了。大家在看下面的文章之前也可以思考一下，如果是你，你会怎么设计？这里只选取几个 api 来进行介绍。

主组件 Selectable

选中的值

defaultValue 和 value，类型为 any[]，每个方块一般都有一个唯一 id 来标识，2024-1-31 更新后 后支持任意类型，因为考虑到很多情况你可能需要一个对象或数组来标识，文章后面提供了 compareFn 来自定义比较值相等。

禁用

disabled，大部分有值的组件应该都会有此属性，能直接禁用框选功能。

模式

mode，类型为 "add" | "remove" | "reverse"。模式，表明当前框选是增加、减少还是取反。这个 api 感觉是设计的最好的，用户会框选来选择目标，肯定也会需要删除已经框选的目标，可能是按住 shift 来删除等等之类的操作。用户可以自己编写自定义逻辑来修改 mode 的值来控制不同的行为，反观 react-selectable-fast，则是提供了 deselectOnEsc、allowAltClick、allowCtrlClick、allowMetaClick、allowShiftClick 等多个 api。

开始框选的条件

selectStartRange，类型 "all" | "inside" | "outside"，鼠标从方块内部还是外部可以开始框选，或都可以。

可以进行框选的容器

dragContainer，类型 () => HTMLElement，例如你只希望某个卡片内才可以进行框选，不希望整个页面都可以进行框选，这个 api 就会起到作用了。

滚动的容器

scrollContainer，类型 () => HTMLElement，如果你的这些方块是在某个容器中并且可滚动，就需要传入这个属性，就可以在滚动的容器中进行框选操作了。

框选矩形的 style 与 className

boxStyle 和 boxClassName，使用者可以自定义颜色等一些样式。

自定义 value 比较函数

compareFn，类型 (a: any, b: any) => boolean，默认使用 === 进行比较（因为 value 支持任意类型，比如你使用了对象或数组类型，所以你可能需要自定义比较）

框选开始事件

onStart，框选开始时，使用者可能需要做一些事情。

框选结束事件

onEnd，类型为 (selectingValue: (string | number)[], { added: (string | number)[], removed: (string | number)[] }) => void。selectingValue 为本次框选的值，added 为本次增加的值，removed 为本次删除的值。例如你想在每次框选后覆盖之前的操作，直接设置 selectingValue 成 value 即可。如果你想每次框选都是累加，加上 added 的值即可，这里就不再说明了。

方块可选 - useSelectable

怎么让方块可以被选择呢？并且一一绑定上对应的值？react-selectable-fast 则是提供 clickableClassName api，传入可以被选择的目标的 class，这种方式太不 react 了。此时我的脑海里想到了 dnd-kit，我认为是 react 最好用的拖拽库，它是怎么让每个方块可以被拖拽的呢？优秀的东西应该借鉴，于是就有了 useSelectable。

const { 

setNodeRef, // 设置可框选元素

isSelected, // 是否已经选中

isAdding, // 当前是否正在添加

isRemoving, // 当前是否正在删除

isSelecting, // 当前是否被框选

isDragging // 是否正在进行框选操作

} = useSelectable({

  value, // 每个元素的唯一值，支持任意类型

  disabled, // 这个元素是否禁用

  rule, // "collision" | "inclusion" | Function，碰撞规则，碰到就算选中还是全部包裹住才算选中，也可以自定义

});

如何使用？

const Item = ({ value }: { value: number }) => {

  const { setNodeRef, isSelected, isAdding } = useSelectable({

    value,

  });



  return (

    <div

      ref={setNodeRef}

      style={{

        width: 50,

        height: 50,

        borderRadius: 4,

        border: isAdding ? '1px solid #1677ff' : undefined,

        background: isSelected ? '#1677ff' : '#ccc',

      }}

    />

  );

};

实现

这里只简单讲一下思路，有兴趣的同学可以直接前往源码进行阅读。

主组件 Selectable 相当于一个 context，一些状态在这里进行保存，并掌管每个 useSelectable，将其需要的值通过 context 传递过去。

在设置的可被框选的容器内监听鼠标 mousedown 事件，记录其坐标，根据 mousemove 画出框选矩形，再根据 setNodeRef 收集的元素和框选矩形根据碰撞检测函数计算出是否被框选了，并将值更新到 Selectable 中去，最后在 mouseup 时触发 onEnd，将值处理完之后并丢出去。

演示

这里演示一下文章开头所说的框选拖拽功能，配合 dnd-kit 实现，代码在文档的 example 中。

遇到的坑

这里分享一下遇到的坑的其中之一：框选的过程中会选中文字，很影响体验，怎么让这些文字不能被框选呢？

方案1: 用 user-select: none 来控制文本不可被选中，但是这是在用户侧来做，比较麻烦。并且发现在 chrome 下设置此属性后，拖拽框选到浏览器边缘或容器边缘后不会自动滚动，其它浏览器则正常

方案2: 在 mousedown 时设置 e.preventDefault()，这样选中时文字就不会被选中，但是拖拽框选到浏览器边缘或容器边缘后不会自动滚动，只能自己实现了滚动逻辑。后面又发现在移动端的 touchstart 设置时，会发现页面上的点击事件都失效了，查资料发现没法解决，只能另辟蹊径。

方案3: 在 mousemove 和 touchmove 时设置 e.preventDefault() 也是可以的，但也需要自己实现滚动逻辑。

最终也是采取了方案3。

后续目标

目前只能进行矩形的碰撞检测，不支持圆形（2024.1.26 更新支持自定义已经可以实现）及一些不规则图形(2024.1.26 更新提供自定义碰撞检测（dom 下太难，canvas 比较好做碰撞检测），剩下的就是使用者的事了！)。这是一个难点，如果有想法的可以在评论区提出或者 pr 也可。

2024-1-24 更新

添加 cancel 方法，试一试。可以调用 ref.current?.cancel() 方法取消操作。这样可以自定义按下某个键来取消当前操作。有想需不需要添加一个属性传入 keyCode 数组内置取消，但是感觉会使 api 太多而臃肿，也欢迎留下你的想法。

2024-1-26 更新一

添加 items api 以优化虚拟滚动滚动时框选范围增加或减小时，已经卸载的 Item 的判断框选。（可选）试一试

优化前：滚动到下面时，加大框选面积，上面已经被卸载的不会被选中

优化后：滚动到下面时，加大框选面积，上面已经被卸载的会被选中

2024-1-26 更新二

支持自定义碰撞规则检测，试一试自定义圆形碰撞检测

2024-1-31 更新

value 支持任意类型 any，不再只是 string | number 类型，因为很多情况需要是一个对象或数组来当唯一标识，并提供了 compareFn 来支持自定义值的比较，默认使用 ===，如果你的 value 是对象或数组，需要此属性来比较值。

总结

开发一个较为复杂的组件，可以提交自己的 api 设计能力和解决问题的能力，可以将平常所学习、所了解、所使用的东西取其精华运用起来。最后希望这个组件能帮助到有需要的人，欢迎大家提出建议！有 issues 才能维护下去！如果觉得不错，帮忙点个 star 吧，地址 react-selectable-box

最近在开发移动端的评论内容功能时，我遇到了一个需求，需要实现一个展开收起效果。主要目的是让用户能够方便地查看和隐藏评论内容，现在想将我的成果分享给大家

完成效果：

实现思路：

1.准备一个文本的外部容器（ content），并将最大高度设置为65px（根据实际需求而定），超出内容设置不可见

2.文本容器的高度（text-content）不做样式设置，这个容器是为了获取内容实际高度

3.通过 js 获取文本容器的高度（text-content），判断文本高度是否超过外部容器（content）的最大高度，控制展开收起按钮是否显示

4.点击按钮时根据条件设置容器（content）的最大高度，css 对通过 transition 对 max-height 设置过渡效果

完整示例代码如下

HTML

 <div class="container">

     <div class="content">

         <div class="text-content">

                1月30日上午10时，中国贸促会将召开1月例行新闻发布会，介绍第二届链博会筹备进展情况；

                2025大阪世博会中国馆筹备进展；2023年全国贸促系统商事认证数据；2023年贸法通运行情况；

                2023年11月全球经贸摩擦指数；2023年12月全球知识产权保护指数月度观察报告；助力培育外贸新动能有关工作考虑等。

         </div>

     </div>

     <button class="btn">展开</button>

 </div>

CSS

 .container {

	width: 260px;

	padding: 20px;

	border: 1px solid #ccc;

	margin: 50px auto;

 }



 .content {

	max-height: 65px;

	overflow: hidden;

	transition: max-height 0.5s;

 }





 .btn {

	display: flex;

	width: 40px;

	color: cornflowerblue;

	outline: none;

	border: none;

	background-color: transparent;

 }

JS

    const maxHeight=65

    const btn = document.querySelector('.btn')

    const content = document.querySelector('.content')

    const textContent=document.querySelector('.text-content')

    const textHeight=textContent.getBoundingClientRect().height // 文本高度

    const contentHeight=content.getBoundingClientRect().height  // 容器高度

    let flag = false

    if (textHeight < maxHeight) {

        btn.style.display = 'none'

    }

    btn.addEventListener('click', () => {

        if (!flag) {

            content.style.maxHeight=textHeight+'px'

            btn.innerHTML = '收起'

            flag = true

        } else {

            content.style.maxHeight=contentHeight+'px'

            btn.innerHTML = '展开'

            flag = false

        }

    })

实现一个功能的方式往往有多种，你们是怎么解决的呢？

实现浏览器关闭后，后端记录用户登出日志的最佳方式是通过前端发送请求来通知后端进行记录。以下是一种常见的实现方式,重点就是如何区分用户行为是页面刷新还是关闭浏览器。

// 写在APP.vue

mounted() {  

    window.addEventListener("beforeunload", () => this.beforeunloadHandler())

    window.addEventListener("unload", () => this.unloadHandler())  

},

  

destroyed() {

    window.removeEventListener("beforeunload", () => this.beforeunloadHandler())

    window.removeEventListener("unload", () => this.unloadHandler())

    clearInterval(this.timer)

},



methods:{

     beforeunloadHandler() {

      this.beforeUnloadTime = new Date().getTime()

    },

    unloadHandler() {

      this.gapTime = new Date().getTime() - this.beforeUnloadTime

      if (this.gapTime <= 5) { //判断是窗口关闭还是刷新，小于5代表关闭，否则就是刷新。

        // 这里是关闭浏览器

        logout()

      }

    },

}

但是经测试,发现上面这种浏览器关闭事件并不是一种可靠的方式来捕捉用户的登出操作,后端并非百分百接收到logout请求,经查资料得知,在unload阶段发送的异步请求是不可靠的,有可能被cancel。后面又尝试了fetch,设置了keepalive(即使浏览器关闭,请求照样发送), 但是又发现gapTime<=5的判断条件也存在兼容性问题,不同浏览器的时间差存在差异。此外还存在一些特殊情况:用户可能直接关闭浏览器窗口、断开网络连接或发生其他异常情况，导致浏览器关闭事件无法被触发,因此pass掉上述方案。

后面也尝试了心跳机制(websocket),也存在局限性,pass。

最后想到了一种最简单,最朴实的方式:
开启定时器每秒往localStorage写入当前时间lastRecordTime(new Date().getTime()), 在请求拦截器中给每个接口请求头带上两个时间,最后一次写入时间lastRecordTime和当前时间nowTime, 后端只要把两个时间相减, 超过5s(自定义)就算登出,清掉redis里相应的token。

// 写在APP.vue

created (){

    // 每秒写入一次时间

    this.timer = setInterval(() => {

    // 这个判断代表登录成功后才开始写入时间

      if(localStorage.getItem('token')) {

        localStorage.setItem('lastRecordTime', new Date().getTime())

      }

    }, 1000)

  }

另外需要注意, 在登录成功的地方要立即写入一次时间, 不然有BUG。

  // 写在请求拦截器

  const headers = config.headers;

  /** 用于判断用户是否关闭过浏览器，如果关闭则跳转至登录页面，以及及时清理redis中的token */

  if (localStorage.getItem('lastRecordTime')) {

    headers.lastRecordTime = localStorage.getItem('lastRecordTime');

  }

  headers.nowTime = new Date().getTime();

总结一下,目前没发现哪种方式可以提供一种可靠的通信方式去通知后端清除token, 通过两个时间差的方式相对靠谱。

前言

在平时的开发过程中，前端或多或少都会遇到实现动画效果的场景。手写动画是一件相当麻烦的事情，调来调去不仅费时费力，可能还会被产品/UI吐槽：这动画效果也不难呀，为什么就不能实现呢？/为什么就没有还原成我想要的样子呢。

比如说产品让我们实现这样的一个开关动效

今天我们就用动画的实现方式——Lottie，来百分百还原设计师的动画效果，并且可以大大提高我们的工作效率（摸鱼时间）。

Lottie简介

首先我们先来看一下，平时我们实现动画都有哪些方式，它们分别有什么优缺点：

Lottie是由Airbnb开发的一个开源库，用于在移动端和Web上呈现矢量动画。它基于JSON格式的Bodymovin文件，可以将由设计师在AE中创建的动画导出为可在Lottie库中播放的文件。

相对于手写CSS/JS动画而言，它可以大大减少前端开发的工作量，相对于GIF文件来说，它可以在一个合理的文件体积内保证动画的清晰度以及流畅程度。下面我们就介绍一下如何播放一个Lottie动画，并实现一个炫酷的开关效果。

Hello Lottie

假设我们现在已经有一个Lottie的json文件，那么现在安装一些依赖

npm i react-lottie prop-types

安装完之后我们就可以这样子来播放一个Lottie动画：

import animationData from "../../assets/switch-lottie.json";



const LottieSwitch = () => {

  const playing = useRef(false);

  const options = {

    loop: true,

    autoplay: true,

    animationData: animationData,

    rendererSettings: {

      preserveAspectRatio: "xMidYMid slice",

    },

  };

  return (

    <Lottie

      options={options}

      height={20}

      width={40}

    />

  );

};

来解释一下上面的options参数里面各个字段是什么意思：

• loop：是否循环播放


• autoplay：是否自动播放


• animationData：Lottie动画json资源


• rendererSettings.preserveAspectRatio：指定如何在给定容器中渲染Lottie动画
  
  
  
  • xMidYMid: 表示在水平和垂直方向上都在中心对齐
  
  
  • 表示保持纵横比，但可能会裁剪超出容器的部分
  
  
  
  

正/反向播放

正常的把Lottie动画播放出来之后，我们就可以开始实现一个开关的功能。其实就是点击的时候更换Lottie的播放方向，这里对应的是direction字段，direction为1时正向播放，direction为-1时反向播放。

我们就要实现下面的功能：

• 点击时切换方向


• 播放过程中加锁，禁止切换方向


• 监听播放结束事件，解锁


• loop改为false；autoplay改为false

实现代码如下：

const LottieSwitch = () => {

  const [direction, setDirection] = useState(null);

  const playing = useRef(false);

  const options = {

    loop: false,

    autoplay: false,

    animationData: animationData,

    rendererSettings: {

      preserveAspectRatio: "xMidYMid slice",

    },

  };



  const handleClick = () => {

    if (playing.current) {

      return;

    }

    playing.current = true;

    setDirection((prevState) => (prevState === 1 ? -1 : 1));

  };

  return (

    <div style={{ padding: 40 }}>

      <div onClick={handleClick} className={styles.lottieWrapper}>

        <Lottie

          direction={direction}

          options={options}

          speed={2}

          height={20}

          width={40}

          eventListeners={[

            {

              eventName: "complete",

              callback: () => {

                playing.current = false;

              },

            },

          ]}

        />

      </div>

    </div>

  );

};

这样我们就是实现了一个开关的效果

持续时长

在Lottie的json中，有几个关键的字段跟动画的播放时长有关系：

• fr：帧率，每一秒的帧数


• ip：开始帧


• op：结束帧

假如说有下面的一个描述：

{

  "fr": 30,

  "ip": 0,

  "op": 60,

}

则表示帧率是30帧，从第0帧开始，60帧结束，那这个动画的持续时长是 (op-ip)/fr，为2s。那如果我们希望整个动画的播放时长是500ms，则只需要把Lottie的倍速调整为4。对应的就是speed字段：

<Lottie

  direction={direction}

  options={options}

  speed={4}

  height={20}

  width={40}

  eventListeners={[

    {

      eventName: "complete",

      callback: () => {

        playing.current = false;

      },

    },

  ]}

/>

修改Lottie

在Lottie json中，描述整个动画的过程以及效果其实对应的就是某个值。在实现的过程中，其实开发是可以去修改这些值的。比如说我们可以修改上面开关的边框颜色以及小球的颜色。

首先在页面中找到小球对应的颜色是rgb(99, 102, 241)

在Lottie JSON文件中，颜色信息通常出现在表示图层样式的字段中。常见的字段是 "c"（color）。
"c" 字段表示颜色，通常以RGBA格式（红绿蓝透明度）存储。例如：

"c": {"a":0,"k":[1,0,0,1]}

这表示红色，RGBA值为 [1, 0, 0, 1]。

rgb(99, 102, 241)转成上面的写法那就是"c": {"a":0,"k":[99/255,102/255,241/255,1]}。以99/255为例，结果是0.38823529411764707，那么就拿这个结果去json文件中找到对应的节点。

对应有2个结果，就是小球的颜色以及边框的颜色。当我们找到这个值的时候，如果我们想修改这个值，就必须知道这个值的路径，在一个Lottie中，想肉眼找到这个值的路径是一件很难的事情。所以我们写一个辅助函数：

const updateJsonValue = (json, targetValue, newValue) => {

  const find = (json, targetValue, currentPath = []) => {

    for (const key in json) {

      if (json[key] === targetValue) {

        return [...currentPath, key];

      } else if (typeof json[key] === "object" && json[key] !== null) {

        const path = find(json[key], targetValue, [...currentPath, key]);

        if (path) {

          return path;

        }

      }

    }

  };

  const res = JSON.parse(JSON.stringify(json));

  const path = find(res, targetValue);

  let current = res;



  for (let i = 0; i < path.length - 1; i++) {

    const key = path[i];

    current = current[key];

  }



  const lastKey = path[path.length - 1];

  current[lastKey] = newValue;



  return json;

};

上面的辅助函数就帮助我们找到这个值的路径，并修改目标值。比如说我们想把目前的颜色改成绿色(rgb(25, 195, 125))，就可以找到对应的路径，并修改。别忘了替换的时候把rgb对应的值除以255。

let newAnimationData = updateJsonValue(animationData, 0.388235300779, 0.09803921568627451)

newAnimationData = updateJsonValue(newAnimationData, 0.388235300779, 0.09803921568627451)

newAnimationData = updateJsonValue(newAnimationData, 0.40000000596, 0.7647058823529411)

newAnimationData = updateJsonValue(newAnimationData, 0.40000000596, 0.7647058823529411)

newAnimationData = updateJsonValue(newAnimationData, 0.945098042488, 0.49019607843137253)

newAnimationData = updateJsonValue(newAnimationData, 0.945098042488, 0.49019607843137253)

掌握了这种方式之后，我们就能修改Lottie里面的大部分内容，包括文案、资源图片、颜色等等。

最后

以上就是一些Lottie的使用以及修改的介绍，下次再遇到比较麻烦的动画需求。就可以跟产品说：可以做，让UI给我导出一个Lottie。

如果你有一些别的想法，欢迎评论区交流～如果你觉得有意思的话，点点关注点点赞吧～

帮助阅读

此篇文章主要是为了实现仪表盘功能，前后过了4种方案，每篇方案从逻辑、代码、效果、问题四个方面出发。最后个人总结。同时非常非常希望有大佬能够提供一个方案，个人实在想不到实现方案了

需求

h5页面中，做一个环形仪表盘（如下图），需要一个从0%到实际百分比的增长过渡动效

前提

使用前端原生Html、css、js语言实现, 不打算借助第三方插件。

最初Scheme

将UI图片作为背景，上面放一个白色div作为遮罩，再利用css3将白色div旋转，从而达到过渡效果。

代码如下:

<style>

		.light-strip {

			width: 500px;

			height:500px;

			border: 1px solid #efefef;

			background-image: url('Frame 29@3x.png');

			float: right;

			background-size: 100% 100%;

		}

		.light-strip-top {

			margin-top: 0%;

			width: 500px;

			height: 250px;

			background: #fff;

			transform-origin: bottom center;

			/* transform: rotate 5s ; */

			rotate: 0deg;

			transition: all 2s ease-in-out;

		}

	</style>

	<body onload="load()">

		<div class="light-strip">

			<div class="light-strip-top">

				

			</div>

		</div>

	</body>

	<script>

		function load() {

			setTimeout(() => {

				document.querySelectorAll('.light-strip-top')[0].setAttribute('style', "rotate: 180deg")

			}, 1000)

		}

	</script>

效果如下:

出现问题：

由于仪表盘整体大于180度，所以白色div，在最开始遮挡全部仪表盘，那么旋转一定角度后一定会覆盖UI图。

进化Scheme

根据上面出现的问题，想到与UI沟通将仪表盘改成180度效果（解决不了问题，就把问题解决掉），该方案由于改变了原型之后会导致UI过于丑，就没有进行深度测试。

超进化Scheme

根据上面两个方案的结合，想到将方案1中的白色div换成一张指针图片，利用css3旋转追针，达到过渡效果，但此方案也是改了UI效果。

代码如下:

	<style>

		.light-strip {

			width: 500px;

			height:500px;

			border: 1px solid #efefef;

			background-image: url('Frame 29@3x.png');

			/* background-color: #fff; */

			float: right;

			background-size: 100% 100%;

		}

		.light-strip-top {

			margin-top: 50%;

			width: 49%;

			height: 4px;

			background: red;

			transform-origin: center right;

			/* transform: rotate 5s ; */

			rotate: -35deg;

			transition: all 2s ease-in-out;

		}

		

	</style>

	<body onload="load()">

		<div class="light-strip">

			<div class="light-strip-top">

				

			</div>

		</div>

	</body>

	<script>

		function load() {

			setTimeout(() => {

				document.querySelectorAll('.light-strip-top')[0].setAttribute('style', "rotate: 90deg")

			}, 1000)

		}

	</script>

效果如下:

Now:

此时大脑宕机了，在我的前端知识基础上，想不到能够完美实现UI效果的方案了。于是和同事探讨了一下，了解到element-plus中的进度条有类似的效果，于是打算看一下源码，了解到它是svg实现的。发现新大陆又开始尝试svg实现。

究极进化Scheme

利用svg，做一个带白色的背景圆环A，再做一个带有渐变背景色的进度圆环B, 利用进度圆环的偏移值、显示长度、断口长度配合css3过渡实现过渡效果。

代码如下:

 <style>

    body {

      display: flex;

      align-items: center;

      justify-content: center;

      height: 100vh;

      margin: 0;

      background-color: #f5f5f5;

    }



    .dashboard {

      position: relative;

      width: 200px;

      height: 200px;

	  background-size: 100% 100%;

    }



    .circle-background {

      fill: none;           /* 不填充 */

      stroke: #fff;          /* 圆环的颜色 */

      stroke-width: 10;      /* 圆环的宽度 */

	  stroke-dasharray: 200, 52; /* 圆环断开部分的长度，总长度为周长 */

	  stroke-dashoffset: 163;

	  stroke-linecap: round;

	  border-radius: 10;

	  transition: all 1s; /* 过渡效果时间 */

    }



    .circle-progress {

      fill: none;           /* 不填充 */

      stroke: url(#gradient);       /* 圆环的颜色 */

      stroke-width: 10;      /* 圆环的宽度 */

      stroke-dasharray: 252, 0; /* 圆环断开部分的长度，总长度为周长 */

      stroke-dashoffset: 163;

      stroke-linecap: round; /* 圆滑断点 */

      transition: all 1s; /* 过渡效果时间 */

    }



    .percentage {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      font-size: 24px;

      color: #3498db;

    }

  </style>

</head>

<body>



<svg class="dashboard" viewBox="0 0 100 100">

	<!-- 定义渐变色 -->

	  <defs>

	   <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="100%">

	          <stop offset="0%" style="stop-color: rgba(111, 232, 191, 1)" />

	          <stop offset="33%" style="stop-color: rgba(255, 175, 19, 1)" />

	          <stop offset="70%" style="stop-color: rgba(222, 19, 80, 1)" />

	          <stop offset="100%" style="stop-color: rgba(133, 14, 205, 1)" />

	        </linearGradient>

	  </defs>

	

  <!-- 背景圆环 -->

  <circle class="circle-background" cx="50" cy="50" r="40"></circle>

  

  <!-- 进度圆环 -->

  <circle class="circle-progress" cx="50" cy="50" r="40"></circle>



</svg>



<!-- 进度百分比显示 -->

<div class="percentage" id="percentage">0%</div>



<script>

  function setProgress(percentage) {

    const circleProgress = document.querySelector('.circle-progress');

	const circleBackground = document.querySelector('.circle-background');

    const percentageText = document.getElementById('percentage');



    const circumference = 2 * Math.PI * 40; // 圆的周长

	const circumNewLength = (percentage / 100) * (circumference - 52);

    const dashOffset = 163 - circumNewLength;



	

    // 设置进度圆环的样式

    circleBackground.style.strokeDashoffset = dashOffset;

	circleBackground.style.strokeDasharray = `${200 - circumNewLength}, ${ 52 + circumNewLength }`

	circleProgress.style.strokeDasharray = `${circumNewLength}, ${ circumference - circumNewLength }`

    

    // 更新百分比文本

    percentageText.textContent = `${percentage}%`;

  }



  // 设置初始进度为0%

  setProgress(0);



  // 模拟过渡效果，从0%到50%

  setTimeout(() => {

    setProgress(50);

  }, 1000); // 过渡时间为1秒，你可以根据需要调整这个值

</script>

效果如下：

问题：

基本实现，但是还有一个问题是，渐变色是两点之间的线性渐变，无法做到圆环的顺时针渐变。

总结

• 单纯前端不是万能的😂😂😂😂


• 个人认为这个需求还是能够实现的


• 希望有da lao能出个方案


• 加油，继续搞

什么是伪指纹浏览器开发

就是通过开源的chromium浏览器进行二次简单的封装不涉及到重新编译chromium，配合puppeteer进行轻微的指纹修改开发

一、如何操作

本次操作客户端以前端擅长的electron来举例子，至于electron是什么，打开文心一言看看...

第一步下载chromium到本地客户端

登录官网，看到如下界面

可以发现箭头处指定是浏览器对应的版本buildId和系统，这里可以直接手动点击下载到本地，也可以通过@puppeteer/browsers这个库使用js代码去下载。这里说说如何使用它下载

const { app } = require('electron')

const browserApi = require('@puppeteer/browsers')

const axios = require('axios')



// browser缓存路径，避免和electron一起打包占用安装包体积和打包时间

const cacheDir = `${app.getPath('cache')}/myBrowser`



browserApi.install({

  cacheDir, // 自己想要下载的路径，用来给puppeteer去调用

  browser: browserApi.Browser.CHROMIUM,

  // buildId: '1247373',

  // baseUrl: 'https://commondatastorage.googleapis.com/chromium-browser-snapshots'

})

耐心的小伙伴肯定发现了这里buildId版本号和baseUrl下载url我打了注释，是因为@puppeteer/browsers默认下载的chromium版本比较旧，那么我们怎么获取这个最新版本buildId和baseUrl呢，还是官网那个界面打开控制台，可以看到如下请求链接

然后看到请求结果

这就是最新的buildId了，然后封装成函数调用

// 获取最新的chromium构建ID

function getLastBuildId(platform) {

  return axios

    .get(

      `https://download-chromium.appspot.com/rev/${browserApi.BrowserPlatform.MAC}?type=snapshots`

    )

    .then((res) => res.data.content)

}

baseUrl可以在界面点击下载时候，看到控制台有一个请求，那就是baseUrl了

下载好后，可以去我们定义的下载保存地址，通过终端去打开就可以看到了

二、第二步启动chromium

使用puppeteer-core这个库，启动我们下好的chromium

const puppeteer = require('puppeteer-core')

const browserApi = require('@puppeteer/browsers')



// browser缓存路径

const cacheDir = `${app.getPath('cache')}/myBrowser`



// 获取安装的浏览器路径

function getBrowserPath() {

  return browserApi

    .getInstalledBrowsers({ cacheDir })

    .then((list) => list[0]?.executablePath)

}



// 浏览器生成

const createBrowser = async (proxyServer, userAgent) => {

  const browser = await puppeteer.launch({

    args: [

      `--proxy-server=${proxyServer}`,

      `--user-agent="${userAgent}"`,

      '--no-first-run',

      '--no-zygote',

      '--disable-extensions',

      '--disable-infobars',

      '--disable-automation',

      '--no-default-browser-check',

      '--disable-device-orientation',

      '--disable-metrics-reporting',

      '--disable-logging'

    ],

    headless: false,

    defaultViewport: null,

    ignoreHTTPSErrors: true,

    ignoreDefaultArgs: [

      '--enable-infobars',

      '--enable-features=NetworkService,NetworkServiceInProcess',

      '--enable-automation',

      'about:blank'

    ],

    executablePath: await getBrowserPath()

  })



  return browser

}

通过puppeteer.launch启动一个浏览器，至于启动参数这里我只说指纹相关的两个参数--proxy-server和--user-agent，其他AI一下。

--proxy-server代理服务，浏览器访问的出口IP，即你用自己启动的浏览器访问google时候，那边服务端获取的ip就是你的代理ip，测试时候可以自己在另外一台机器上装个Squid测试。--user-agent即浏览器的window.navigator.userAgent，简单指纹一般都是依赖于它生成

三、开发过程中用到的功能点

看完puppeteer官网，我们知道操作chromium依赖于一套协议chromedevtools.github.io/devtools-pr…

3.1 更换dock图标

比如多开浏览器，我如何更换chromium的桌面dock图标，去标识这是我启动的第几个浏览器。我们可以使用Browser.setDockTile去操作浏览器更换dock图标

const pages = await browser.pages()

const page = pages[0]

const session = await pages[0].target().createCDPSession()

await session.send('Browser.setDockTile', {

    image: new Buffer.from(fs.readFileSync(file)).toString('base64')

})

效果如下：

更多的协议操作需要自己摸索了，提示下，AI搜索chrome cdp协议

3.2 增加默认书签

这里我没找到协议，直接通过类似爬虫的方式，先进入标签管理页面，直接操作js新增，也算是一个技巧性的骚操作

await page.goto('chrome://bookmarks/') // 进入标签管理页面

await page.evaluate(async () => {

  // 类似在控制台直接操作一样，下面的代码控制台一样可以达到效果

  const defaultBookmarks = [

    {

      title: "文心一言",

      url: "https://yiyan.baidu.com/",

    },

    {

      title: "掘金",

      url: "https://juejin.cn/",

    },

  ];



  defaultBookmarks.forEach((item) => {

    chrome.bookmarks.create({

      parentId: "1",

      ...item,

    });

  });

});

await page.goto('自己的本来要跳的首页')

3.3 如何使用已经打开的浏览器

const browserWSEndpoint = browser.wsEndpoint() // 获取本次打开的浏览器链接，留作下一次使用

// 保存下来， 比如直接存在一个变量map中，给它定义一个唯一的browserId，下一次好直接获取

browserMap.set(browserId, browserWSEndpoint)



...

// 再次打开新页面，要用到上一次打开的浏览器

const browser = puppeteer.connect({

   ...launchOptions, // 和自己首次打开浏览器的配置一样

   browserWSEndpoint: browserMap.set(browserId)

})

这样就可以使用之前打开的浏览器打开网页了

3.4 如何把浏览器的信息显示在网页上

比如代理、userAgent、地区、浏览器名称等信息，先写个页面，然后轮询从localStorage直到获取信息为止。

// 浏览器代理信息页

await page.goto('浏览器信息页')

// 设置localStorage

await page.evaluate(

  (values) => {

    window.localStorage.setItem('browserInfo', values)

  },

  JSON.stringify(browserData)

)

page在打开页面后，并不会在页面中马上能获取到这里注入的browserInfo，可以通过轮询方式去扫描localStorage中是否存在我们注入的变量，这里举个react中的例子，在页面ready后去轮询处理

useEffect(() => {

  let loopId = null

  const clearLoop = () => {

    loopId && clearTimeout(loopId)

  }



  // 轮询直到获取browserInfo

  const loop = () => {

    loopId = setTimeout(() => {

      const localData = window.localStorage.getItem('browserInfo')

      if (localData) {

        Promise.resolve()

          .then(() => {

            setInfo(JSON.parse(localData))

          })

          .catch(() => {

            message.error('获取浏览器信息失败')

          })

      } else {

        loop()

      }

    }, 1500)

  }



  loop()



  return () => {

    clearLoop()

  }

})

3.5 校验代理

一般的代理服务为了不让别人也能用都会加上账密校验，所以我们还需要在启动后，调用方法去校验

// 校验proxy

if (proxyData.proxyServer) {

  await page.authenticate({

    username: proxyData.proxyUser,

    password: proxyData.proxyPwd

  })

}

四、遇到了哪一些问题

4.1 mac下关闭浏览器关不掉

当我们点击左上角关闭浏览器按钮或者是关闭所有页面时候，底部的dock中依旧存在着，我们不希望像mac其他软件一样保留在dock中，不然下一次打开浏览器时候，会出现相同标识的浏览器，可以这么解决

// 每次页面关闭时候，查看浏览器是不是还有页面了，没有就关闭

browser.on('targetdestroyed', async () => {

  const pages = await browser.pages()

  if (!pages.length) {

    await browser.close()

  }

})

4.2 当我们之间关闭电脑屏幕时候，比如盖上电脑，再次打开时候，关闭不了浏览器

打上log，可以发现熄屏时候，会触发puppeteer定义的browser的disconnected事件，但是再次打开电脑时候浏览器是可以正常使用的，也就是说，puppeteer和我们打开的chromium断连了，所以我们需要在disconnected事件里再此尝试链接下chromium，如果不行才认为是浏览器被关闭了

browser.on('disconnected', () => {

  const cacheData = browserMap.get(browserId)

  puppeteer

    .connect({

      ...launchOptions,

      browserWSEndpoint: cacheData.browserWSEndpoint

    })

    .then((newBrowser) => {

      browser = newBrowser

      log.info(

        'browser disconnected but browser is exist',

      )

      initEvent()

    })

    .catch((err) => {

      log.info(

        'browser disconnected success',

      )

    })

})

结语

puppeteer很强大，chromium也强大，就是那个官网文档啊，写的真是让人...，所以多问问AI吧

最近项目中有一个匪夷所思的问题，业务在使用的时候，偶发性的会白屏，经常下班的时候骚扰我们，开发苦不堪言，经过长达一周的排查，仍然没有查到bug的存在，最终尝试通过添加埋点日志，记录关键信息。

现状

首先讲述一下现状，首先业务进入后，页面可以认为有两个按钮

• 跳转共享链接


• 打开表单弹窗按钮，点击后展示表单。

操作顺序是，页面加载后，先点击跳转共享链接，看完链接后再返回点击表单弹窗。

里面有两个重要的时间节点，一个是跳转链接之前，一个是返回到当前页面。

• 跳转链接之前
  
  
  
  
  • 需要存储接口数据，接口数据包含了表单的数据
  
  
  
  


• 返回当前页面
  
  
  
  
  • 请求接口数据
    
    
    
    
    • 本地缓存无，直接使用接口数据
    
    
    • 本地缓存有，缓存和接口数据合并，接口数据优先
    
    
    
    
  
  
  
  

返回页面的时候，点击表单弹窗

正常上来说弹窗能够正常显示，但是线上环境再点击 展示弹窗的按钮导致白屏了。整个流程如下

初步判断是整合缓存和接口数据问题，于是需要给页面添加两个埋点

• 页面报错异常时上报


• 点击打开表单的时，上报缓存数据和聚合之后的数据。
  
  
  
  
  • 为什么不上报接口数据呢？因为当时修复bug比较紧急，观察代码发现接口直接返回的数据没有在公共变量中存储，如果需要存储改动较大，还有就是接口数据也可以从后端日志去排查
  
  
  
  

页面报错异常上报

异常上报的方法有很多，通常使用一个gif图片，地址为get的请求地址+上报信息，具体的可以自行百度，此处简单叙述下

使用图片是因为加载资源里面img优先级比较低，不会阻塞其他资源，而且图片请求不会跨域，用gif是因为对比图片类型他是比较小的

//utils/utils.js

/**

 * 异常上报方法

 * 希望抽离出来同步异常类和异步异常类

 */

function uploadError() {

  //上报处理参数

  const upload = errObj =>{

    const logUrl = 'https://xxx.xxx.com/log.gif'; // 上报接口

    //将obj拼接成url

    const queryStr = Object.entries(errObj)

        .map(([key, value]) => `${key}=${value}`)

        .join('&');

      const oImg = new Image();

      oImg.src = logUrl + '?' + encodeURIComponent(queryStr);

  }

  //同步方法

  function handleError(e) {

    try {

      let baseInfo = localStorage.getItem('base_info'); // 域账户

      let masterName = baseInfo ? JSON.parse(baseInfo)?.master_name : ''; // 域账户

      let errObj = {

        masterName: masterName,//域账户

        url: window.location.href,//报错的路由，利于排查

        reason: JSON.stringify({

          message: e?.error?.message, //报错信息

          stack: e?.error?.stack,//调用栈

        }),

        message: e?.message, //报错信息

      };

      upload(errObj)

      console.log('error', errObj);

    } catch (err) {

      console.log('error', err);

    }

  }

  window.addEventListener('error', handleError);//调用监听

}

​

//app.js

//异常上报方法 开发环境禁止上报

if(!['dev'].includes(process.env.BUILD_ENV)){

  uploadError()

}

点击弹窗的异常上报

//打开弹窗的操作  

const open = () => {

    setShow(!show);//控制表单的展示隐藏

    if(!show){

      const logUrl = 'https://xxx.xxx.com/log.gif'; // 上报接口

      const oImg = new Image();

      let initFormVal = localStorage.getItem('initFormVal' + query?.id);

      oImg.src = logUrl + '?' + encodeURIComponent(`initFormVal=${initFormVal}&integratedData=${JSON.stringify(integratedData)}`);

    }

  };

//initFormVal为缓存中的数据 integratedData为整合后的数据

发现问题原因

通过添加以上异常上报，业务员进行操作时，又出现了白屏，此时根据业务员token与上报关键字与时间查到了相关日志，其中日志中记录的是

https://xxx.xxx.com/log.gif?initFormVal=&integratedData=null

integratedData是后端接口数据和缓存的融合呀！通过查日志发现当时后端确确实实返回正常的响应了，不可能为null，同时还有一个疑问浮出水面，为什么initFormVal没有值，而不是null

正常来说如果initFormVal从json中取值时，取不到应该默认就是null，此处为''，只说明一个问题，缓存的时候给他赋值了

那么问题大致可以定位到以下两个操作节点

• 缓存时


• 返回页面后，缓存和接口数据融合时

//缓存时操作  

const getFormValues = () => {

    let formVal = childRef?.current?.getFormVal() || '';

    localStorage.setItem('initFormVal' + query.id, JSON.stringify(formVal));

  };

缓存时，如果子节点获取不到，那么childRef?.current?.getFormVal()就为undefind,又由于使用了或运算符，那么此时存储的是''，那么取这个暂时看也没问题呀，然后也写入了缓存

更严格来讲，应该先判断formVal是否存在然后再去缓存，没有就不缓存。

再看一下返回页面，数据融合的代码

const getDataFn = url => {

    dispatch({

      type: url,

      payload: { id: query.id },

      callback: res => {

        if (res.ret === 1) {

          let initFormVal = localStorage.getItem('initFormVal' + query?.id);

          console.log('initFormVal', JSON.parse(initFormVal));

          let cacheFormVal = {};

          

          if (initFormVal) {

            //initFormVal赋值给cacheFormVal，此处省略

          }

          setPricingInfo({

            ...cacheFormVal,

            ...res.data

          }); 

        }   

发现有一个console.log()，JSON.parse('')会是什么？报错，果然，查异常上报日志的时候，也查到这个错误，真是一失足成千古恨，当时只是为了方便查看，打印了一下缓存数据，没想到是这个地方出现的问题 Uncaught SyntaxError: Unexpected end of JSON input

JSON.parse

那问题来了 json.parse什么情况会报错呢？通过查阅MDN

那么，什么是规范的JSON格式呢？我们此处再去查阅MDN

此处只列出了json的结构 很显然，传入null 是合法的，但是传入空字符是不合法的，

JSON = null

    or true or false

    or JSONNumber

    or JSONString

    or JSONObject

    or JSONArray

吐槽

可能有人要吐槽，直接写JSON存储的时候格式不对不就行了吗？干什么这那么多，又是异常上报，又是贴代码？又是贴MDN的。

我在这里回答一下之所以这么写一是为了记录出错的时候出现的问题，方便下次出现类似问题能够即时复盘。

二是希望贴出自己的排错方式，新手若有不明白的可以模仿这个方式得到一些启发和思考，高手也可指出我的问题，共同成长

同样我也希望大家遇到问题的时候要记得查文档，查文档再查文档，自己遇到的问题，先文档，是不是自己理解错了，如果还不行就去stackoverflow，如果再不济就去github issue看看是否有相同的问题是不是作者的bug，如果都没有，那么好了，这个问题几乎解决不了了，此时有两个选择，要么产品接受，要么 那我走？？？

今天介绍一个非常有用的前端开发工具。

做前端开发的你，一定有过以下经历：

还有，我们在开发h5的时候，一般为了调试方便，可能会在开发环境和测试环境实例化一个vConsole，遇到问题看一下大概就能定位到错误。

可是如果测试小姐姐在远程呢？如果是线上环境呢？如果有这么一个工具，能让我坐在工位上就能调(窥)试(探)用户的操作，那岂不是美滋滋。

你可能会说，这不就是埋点吗，先别急，今天介绍的这个工具和埋点有着本质区别。

不啰嗦了，有请主角**「PageSpy」**登场。

PageSpy是什么？

❝

PageSpy[1] 是由货拉拉大前端开源的一款用于调试 H5 、或者远程 Web 项目的工具。是一个强大的开源前端远程调试平台，它可以显著提高我们在面对前端问题时的效率。

❞

有什么作用？

• 一眼查看客户端信息 能识别客户端运行环境，支持Linux/Mac/Window/IOS/Android


• 实时查看输出 可以实时输出客户端的Element,Console,Network,Storage


• 网络请求监控 可以捕获和显示页面的网络请求


• 远程控制台 支持远程调试客户机上的js代码

如何使用？

查看官方文档[2]

yarn global add @huolala-tech/page-spy-api



# 如果你使用 npm



npm install -g @huolala-tech/page-spy-api

2. 启动服务