态势图（Situation Map）是一种用于表示空间环境中动态或静态信息的地图，它能够展示事件、资源、威胁和其他关键因素的地理位置及其变化情况

前言

什么是态势图

态势图（Situation Map）是一种用于表示空间环境中动态或静态信息的地图，它能够展示事件、资源、威胁和其他关键因素的地理位置及其变化情况。

通过可视化的方式，态势图帮助决策者在复杂环境中迅速获取关键信息，从而做出及时而准确的决策。

随着地理信息系统（GIS）的不断发展，态势图在军事、应急管理和地理规划等领域中扮演着越来越重要的角色。

军工领域

在军工领域，态势图是军事指挥与控制系统中的核心组件。

它们能够实时展示战场上的动态信息，如部队的部署位置、敌军动向、武器系统状态等。这种可视化工具对于战术指挥、作战计划制定和战场态势感知至关重要。

应急管理

在应急管理领域，态势图能够帮助管理者协调资源和人员应对自然灾害、山林火灾、事故或突发事件。通过态势图，可以清晰地看到灾害影响范围、救援力量分布、资源需求，逃生路线等关键信息，从而实现有效的应急响应和资源调配。

地理规划

在地理规划中，态势图用于展示和分析区域开发、土地利用、交通网络等方面的信息。能帮助规划者更清晰的理解地理空间关系、评估环境影响，并做出科学的规划决策。

Cesium中绘制态势图

OK，接下来我们主要介绍一下在Cesium中如何绘制态势图，主要包括各种箭头类型的绘制，如直线箭头、攻击箭头、钳击箭头等。

源码地址在文末。

箭头绘制的核心算法

algorithm.js是实现复杂箭头绘制的核心脚本。

这里定义了多种箭头类型的绘制算法，如双箭头（doubleArrow）、三箭头（threeArrow）以及带尾攻击箭头（tailedAttackArrow）。

这些算法通过接收用户点击的多个点，并计算出箭头的控制点和多边形点来实现箭头形状的生成。

以下是doubleArrow函数的部分代码与解析：

xp.algorithm.doubleArrow = function (inputPoint) {

  // 初始化结果对象

  var result = {

    controlPoint: null,

    polygonalPoint: null

  };



  // 根据输入点数量决定不同的箭头形状

  var t = inputPoint.length;

  if (!(2 > t)) {

    if (2 == t) return inputPoint;



    // 获取关键点

    var o = this.points[0], 

        e = this.points[1], 

        r = this.points[2];



    // 计算连接点和临时点位置

    3 == t ? this.tempPoint4 = xp.algorithm.getTempPoint4(o, e, r) : this.tempPoint4 = this.points[3];

    3 == t || 4 == t ? this.connPoint = P.PlotUtils.mid(o, e) : this.connPoint = this.points[4];



    // 根据点的顺序计算箭头的左右侧点位

    P.PlotUtils.isClockWise(o, e, r) 

        ? (n = xp.algorithm.getArrowPoints(o, this.connPoint, this.tempPoint4, !1), g = xp.algorithm.getArrowPoints(this.connPoint, e, r, !0)) 

        : (n = xp.algorithm.getArrowPoints(e, this.connPoint, r, !1), g = xp.algorithm.getArrowPoints(this.connPoint, o, this.tempPoint4, !0));



    // 生成最终的箭头形状并返回

    result.controlPoint = [o, e, r, this.tempPoint4, this.connPoint];

    result.polygonalPoint = Cesium.Cartesian3.fromDegreesArray(xp.algorithm.array2Dto1D(f));

  }

  return result;

};

该函数首先根据输入点的数量确定是否继续进行箭头的绘制，接着计算关键点的位置，并通过getArrowPoints函数计算出箭头形状的多个控制点，最终生成一个包含箭头形状顶点的数组。

基于Cesium的箭头实体管理

arrowClass.js定义了具体的箭头类（如StraightArrow）和其行为管理。

通过结合Cesium的ScreenSpaceEventHandler事件处理机制，开发者可以方便地在地图上绘制、修改和删除箭头实体。

以下是StraightArrow类的部分代码与解析：

StraightArrow.prototype.startDraw = function () {

  var $this = this;

  this.state = 1;



  // 单击事件，获取点击位置并创建箭头起点

  this.handler.setInputAction(function (evt) {

    var cartesian = getCatesian3FromPX(evt.position, $this.viewer);

    if (!cartesian) return;

    

    // 处理点位并开始绘制箭头

    if ($this.positions.length == 0) {

      $this.firstPoint = $this.creatPoint(cartesian);

      $this.floatPoint = $this.creatPoint(cartesian);

      $this.positions.push(cartesian);

    }

    if ($this.positions.length == 3) {

      $this.firstPoint.show = false;

      $this.floatPoint.show = false;

      $this.handler.destroy();

      $this.arrowEntity.objId = $this.objId;

      $this.state = -1;

    }

    $this.positions.push(cartesian.clone());

  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);



  // 鼠标移动事件，实时更新箭头形状

  this.handler.setInputAction(function (evt) {

    if ($this.positions.length < 1) return;

    var cartesian = getCatesian3FromPX(evt.endPosition, $this.viewer);

    if (!cartesian) return;

    

    $this.floatPoint.position.setValue(cartesian);

    if ($this.positions.length >= 2) {

      if (!Cesium.defined($this.arrowEntity)) {

        $this.positions.push(cartesian);

        $this.arrowEntity = $this.showArrowOnMap($this.positions);

      } else {

        $this.positions.pop();

        $this.positions.push(cartesian);

      }

    }

  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

};

在startDraw函数中，通过设置单击和鼠标移动事件，开发者可以实时捕获用户的操作，并根据点击位置动态绘制箭头。

最终的箭头形状会随着鼠标的移动而更新，当点击完成时箭头形状被确定。

工具类与辅助函数

plotUtil.js提供了一些用于计算几何关系的实用工具函数。

例如，distance函数计算两个点之间的距离，而getThirdPoint函数根据给定的两个点和角度，计算出第三个点的位置。 这些工具函数被广泛用于箭头的绘制逻辑中，以确保箭头的形状符合预期。

以下是distance和getThirdPoint函数的代码示例：

P.PlotUtils.distance = function (t, o) {

  return Math.sqrt(Math.pow(t[0] - o[0], 2) + Math.pow(t[1] - o[1], 2));

};



P.PlotUtils.getThirdPoint = function (t, o, e, r, n) {

  var g = P.PlotUtils.getAzimuth(t, o),

      i = n ? g + e : g - e,

      s = r * Math.cos(i),

      a = r * Math.sin(i);

  return [o[0] + s, o[1] + a];

};

这些函数都是为复杂箭头形状的计算提供了基础，确保在地图上绘制的箭头具有精确的几何形态。

总结

以上主要介绍了在Cesium中实现态势图的一些关键代码以及解释，更多细节请参考项目源码，如果有帮助也请给一个免费的star。

【项目开源地址】：github.com/tingyuxuan2…

在 Vue.js 中，mixins 是一种代码复用机制，允许我们将多个组件共享的逻辑提取到一个独立的对象中，从而提高代码的可维护性和重用性。下面将详细介绍 mixin 的概念，并通过示例代码来说明它的用法。

什么是 Mixin？

Mixin 是一种在 Vue 组件中复用代码的方式。我们可以将一个对象（即 mixin 对象）中的数据、方法和生命周期钩子等混入到 Vue 组件中。这样，多个组件就可以共享同一份逻辑代码。

Mixin 的基本用法

1. 定义 Mixin

首先，我们定义一个 mixin 对象，其中包含数据、方法、计算属性等。比如，我们可以创建一个 commonMixin.js 文件来定义一个 mixin：

// commonMixin.js

export default {

  data() {

    return {

      message: 'Hello from mixin!'

    };

  },

  methods: {

    greet() {

      console.log(this.message);

    }

  },

  created() {

    console.log('Mixin created hook called.');

  }

};

2. 使用 Mixin

在 Vue 组件中，我们可以通过 mixins 选项来引入上述定义的 mixin。例如，我们可以在 HelloWorld.vue 组件中使用这个 mixin：

<template>

  <div>

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

    <button @click="greet">Greet</button>

  </div>

</template>



<script>

// 导入 mixin

import commonMixin from './commonMixin';



export default {

  name: 'HelloWorld',

  mixins: [commonMixin], // 使用 mixin

  mounted() {

    console.log('Component mounted hook called.');

  }

};

</script>

在上面的示例中，HelloWorld 组件通过 mixins 选项引入了 commonMixin。这意味着 HelloWorld 组件将拥有 commonMixin 中定义的数据、方法和生命周期钩子。

3. Mixin 的冲突处理

如果组件和 mixin 中都定义了相同的选项，Vue 将遵循一定的优先级规则来处理这些冲突：

• 数据：如果组件和 mixin 中有相同的 data 字段，组件中的 data 会覆盖 mixin 中的 data。


• 方法：如果组件和 mixin 中有同名的方法，组件中的方法会覆盖 mixin 中的方法。


• 生命周期钩子：如果组件和 mixin 中有相同的生命周期钩子（如 created），它们都会被调用，且 mixin 中的钩子会在组件中的钩子之前调用。

// commonMixin.js

export default {

  data() {

    return {

      message: 'Hello from mixin!'

    };

  },

  methods: {

    greet() {

      console.log('Mixin greet');

    }

  },

  created() {

    console.log('Mixin created hook called.');

  }

};



// HelloWorld.vue

<template>

  <div>

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

    <button @click="greet">Greet</button>

  </div>

</template>



<script>

import commonMixin from './commonMixin';



export default {

  name: 'HelloWorld',

  mixins: [commonMixin],

  data() {

    return {

      message: 'Hello from component!'

    };

  },

  methods: {

    greet() {

      console.log('Component greet');

    }

  },

  created() {

    console.log('Component created hook called.');

  }

};

</script>

在这个例子中，HelloWorld 组件中 message 的值会覆盖 mixin 中的值，greet 方法中的实现会覆盖 mixin 中的方法，created 钩子的调用顺序是 mixin 先调用，然后组件中的 created 钩子调用。

4. 使用 Mixin 的注意事项

• 命名冲突：为了避免命名冲突，建议使用明确且独特的命名方式。


• 复杂性：过度使用 mixin 可能会导致代码难以跟踪和调试。可以考虑使用 Vue 的组合式 API 来替代 mixin，以提高代码的可读性和可维护性。

在 Vue.js 开发中，mixin 主要用于以下场景，帮助我们实现代码复用和逻辑共享：

1. 共享功能和逻辑

当多个组件需要使用相同的功能或逻辑时，mixin 是一个有效的解决方案。通过将共享的逻辑提取到一个 mixin 中，我们可以避免重复代码。例如，多个组件可能都需要处理表单验证或数据格式化，这时可以将这些功能封装到一个 mixin 中：

// validationMixin.js

export default {

  methods: {

    validateEmail(email) {

      const re = /^[^\s@]+@[^\s@]+.[^\s@]+$/;

      return re.test(email);

    }

  }

};



// UserForm.vue

<template>

  <form @submit.prevent="handleSubmit">

    <input v-model="email" placeholder="Enter your email" />

    <button type="submit">Submit</button>

  </form>

</template>



<script>

import validationMixin from './validationMixin';



export default {

  mixins: [validationMixin],

  data() {

    return {

      email: ''

    };

  },

  methods: {

    handleSubmit() {

      if (this.validateEmail(this.email)) {

        alert('Email is valid!');

      } else {

        alert('Email is invalid!');

      }

    }

  }

};

</script>

2. 封装重复的生命周期钩子

有时候，多个组件可能需要在相同的生命周期阶段执行某些操作。例如，所有组件都需要在 created 钩子中初始化数据或进行 API 请求。可以将这些操作封装到 mixin 中：

// dataFetchMixin.js

export default {

  created() {

    this.fetchData();

  },

  methods: {

    async fetchData() {

      // 假设有一个 API 请求

      try {

        const response = await fetch('https://api.example.com/data');

        this.data = await response.json();

      } catch (error) {

        console.error('Failed to fetch data:', error);

      }

    }

  },

  data() {

    return {

      data: null

    };

  }

};



// DataComponent.vue

<template>

  <div>

    <pre>{{ data }}</pre>

  </div>

</template>



<script>

import dataFetchMixin from './dataFetchMixin';



export default {

  mixins: [dataFetchMixin]

};

</script>

3. 跨组件通信

在 Vue 2 中，mixin 可以用来管理跨组件通信。例如，多个子组件可以通过 mixin 共享父组件传递的数据或方法：

// communicationMixin.js

export default {

  methods: {

    emitEvent(message) {

      this.$emit('custom-event', message);

    }

  }

};



// ParentComponent.vue

<template>

  <div>

    <ChildComponent @custom-event="handleEvent" />

  </div>

</template>



<script>

import communicationMixin from './communicationMixin';

import ChildComponent from './ChildComponent.vue';



export default {

  components: { ChildComponent },

  mixins: [communicationMixin],

  methods: {

    handleEvent(message) {

      console.log('Received message:', message);

    }

  }

};

</script>



// ChildComponent.vue

<template>

  <button @click="sendMessage">Send Message</button>

</template>



<script>

import communicationMixin from './communicationMixin';



export default {

  mixins: [communicationMixin],

  methods: {

    sendMessage() {

      this.emitEvent('Hello from ChildComponent');

    }

  }

};

</script>

4. 封装组件的默认行为

对于有相似默认行为的多个组件，可以将这些默认行为封装到 mixin 中。例如，处理表单提交、数据清理等：

// formMixin.js

export default {

  methods: {

    handleSubmit() {

      console.log('Form submitted');

      // 处理表单提交逻辑

    },

    clearForm() {

      this.$data = this.$options.data();

    }

  }

};



// LoginForm.vue

<template>

  <form @submit.prevent="handleSubmit">

    <!-- 表单内容 -->

    <button type="submit">Login</button>

  </form>

</template>



<script>

import formMixin from './formMixin';



export default {

  mixins: [formMixin]

};

</script>

结论

Vue 的 mixin 机制提供了一种简单有效的方式来复用组件逻辑，通过将逻辑封装到独立的 mixin 对象中，可以在多个组件中共享相同的代码。理解和正确使用 mixin 可以帮助我们构建更清晰、可维护的代码结构。不过，随着 Vue 3 的引入，组合式 API 提供了更强大的功能来替代 mixin，在新的开发中，可以根据需要选择合适的方案。

一、需求

在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。
不久前，接到一个类似的需求。需求如下：
1、无限循环滚动；
2、鼠标hover后，暂停滚动，鼠标离开后，继续滚动；
3、支持从左往右和从右往左滚动；
4、滚动速度需要可配置。

简单动画，我们先尝试只使用css实现。

二、实现

1、marquee标签

说到无限循环滚动，很久以前marquee标签可以实现类似的功能，它可以无限循环滚动，并且可以控制方向和速度。但是该标签在HTML5中已经被弃用，虽然还可以正常使用，但w3c不再推荐使用该特性。作为一个标签，只需要负责布局，而不应该有行为特性。

了解marquee标签：marquee标签

2、css3动画

说到无限循环滚动我们会想到使用css3动画。

把animation-iteration-count设置为infinite，代表无限循环播放动画。

为了使动画运动平滑，我们把animation-timing-function设置为linear，代表动画匀速运动。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }



    body {

      padding-top: 200px;

    }



    @keyframes scrolling {

      to {

        transform: translateX(100vw);

      }

    }

    

    .wall-item {

      height: 90px;

      width: 160px;

      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

      animation: scrolling 4s linear infinite;

    }

  </style>

</head>

<body>

  <div class="wall-item"></div>

</body>

</html>

我们上面实现了一个元素的滚动，在多个元素的时候，我们只需为每个元素设置不同的动画延迟时间（animation-delay），让每一项错落开来，就可以实现我们想要的效果了。
至于鼠标hover后暂停动画，我们只需在滚动元素hover时把animation-play-state设置为暂停即可。

有了以上思路，我很快就可以写出一个纯css实现logo墙无限循环滚动的效果。

完整示例代码：

<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }



    :root {

      --wall-item-height: 90px;

      --wall-item-width: 160px;

      --wall-item-number: 9;

      --duration: 16s;

    }



    body {

      padding-top: 300px;

    }



    @keyframes scrolling {

      to {

        transform: translateX(calc(var(--wall-item-width) * -1));

      }

    }



    .wall {

      margin: 30px auto;

      height: var(--wall-item-height);

      width: 80vw;

      position: relative;

      mask-image: linear-gradient(90deg, hsl(0 0% 0% / 0),

          hsl(0 0% 0% / 1) 20%,

          hsl(0 0% 0% / 1) 80%,

          hsl(0 0% 0% / 0));

    }



    .wall .wall-item {

      position: absolute;

      top: 0;

      left: 0;

      transform: translateX(calc(var(--wall-item-width) * var(--wall-item-number)));

      height: var(--wall-item-height);

      width: var(--wall-item-width);

      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

      animation: scrolling var(--duration) linear infinite;

      cursor: pointer;

    }



    .wall[data-direction="reverse"] .wall-item {

      animation-direction: reverse;

      background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

    }



    .wall .wall-item:nth-child(1) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 1) * -1);

    }



    .wall .wall-item:nth-child(2) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 2) * -1);

    }



    .wall .wall-item:nth-child(3) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 3) * -1);

    }



    .wall .wall-item:nth-child(4) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 4) * -1);

    }



    .wall .wall-item:nth-child(5) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 5) * -1);

    }



    .wall .wall-item:nth-child(6) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 6) * -1);

    }



    .wall .wall-item:nth-child(7) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 7) * -1);

    }



    .wall .wall-item:nth-child(8) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 8) * -1);

    }



    .wall .wall-item:nth-child(9) {

      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 9) * -1);

    }



    .wall:has(.wall-item:hover) .wall-item {

      animation-play-state: paused;

    }

  </style>

</head>



<body>

  <div class="wall" style="--duration:10s">

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

  </div>

  <div class="wall" data-direction="reverse" style="--wall-item-number:9">

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

    <div class="wall-item"></div>

  </div>

</body>



</html>

• 可配置项：
  
  

  --wall-item-height: 滚动项高度
  --wall-item-width: 滚动项宽度
  --wall-item-number: 滚动元素个数
  --duration: 动画时长

  
  

  我们也可以向上面示例代码一样，在.wall标签上，通过style属性，给每个滚动墙单独配置宽高、数量、动画时间。



• 滚动方向：
  
  

  动画默认从左往右运动。我们可以在.wall标签上设置data-direction="reverse"，让动画从右往左运动。

三、局限性

（解决办法：使用js计算赋值。说到要用js，那么这一点局限性或许就可以忍受了。）

3. 需要手动为每一个滚动元素设置动画延迟时间（animation-delay）。

（解决办法：可用js计算赋值。）

前言

对象有顺序吗？换句话说，如果我们遍历一个对象，获取属性的顺序是和属性添加时的顺序一样吗？这靠谱吗？这篇文章将为你揭晓答案。

JavaScript 对象基础

在 JavaScript 中，一个对象是一个无序的键值对集合，键通常是字符串或者 Symbol，而值可以是任何类型的数据。对象的基本创建方式如下：

const obj = {

    key1: 'value1',

    key2: 'value2',

}

虽然我们通常认为对象的属性是无序的，但实际上，JavaScript 对对象属性的排列有其特定的规则。

属性顺序的规则

根据 ECMAScript 规范，JavaScript 对象属性的顺序受以下规则的影响：

整数属性，会按照升序排列。

何为整数属性？指的是一个可以在不做任何更改的情况下与一个整数进行相互转换的字符串，也就是可以被解析为整数的字符串。

const obj = {

    2: 'two',

    1: 'one',

    '3': 'three',

    'a': 'alpha',

}



console.log(Object.keys(obj)); // -> ['1', '2', '3', 'a']

所有普通的字符串属性，按照其插入的顺序排列。

const obj = {

    b: 'beta',

    a: 'alpha',

    c: 'gamma',

}



console.log(Object.keys(obj)); // -> ['b', 'a', 'c']

Symbol 类型的属性总是放在最后，并且保留其插入顺序。

const sym1 = Symbol('key1');

const sym2 = Symbol('key2');



const obj = {

    [sym1]: 'value1',

    1: 'one',

    [sym2]: 'value2',

    'a': 'alpha',

}



console.log(Object.keys(obj)); // -> ['1', 'a']

console.log(Object.getOwnPropertySymbols(obj)); // -> [sym1, sym2]

结合上述规则，我们再看一个综合示例。

const sym1 = Symbol("key1");

const sym2 = Symbol("key2");



const obj = {

  [sym2]: "value2",

  z: "last",

  3: "three",

  2: "two",

  a: "alpha",

  1: "one",

  b: "beta",

  [sym1]: "value1",

  0: "zero",

};



console.log(Reflect.ownKeys(obj)); // -> ["0", "1", "2", "3", "z", "a", "b", Symbol("key2"), Symbol("key1")];

可以看到，整数属性按升序排列，普通属性按插入顺序排列，符号则放在最后并保留插入顺序。

最后

虽然 JavaScript 对象的属性被称为“无序”，但实际上它们有“特别的顺序”。整数属性会按升序排列，普通属性按插入顺序，Symbol 类型的属性总是排在最后并保留插入时的顺序。

如果文中有错误或者不足之处，欢迎大家在评论区指正。

你的点赞是对我最大的鼓励！感谢阅读~

最近在需求里遇到了一个手指引导交互的动画需求。这篇文章就来讲讲如何CSS实现这个动画，如下图所示：

简单分析了一下效果，是一个手指移动到某处位置，然后会触发呼吸灯闪烁的效果，所有实现整个动画可以分两步：

呼吸灯闪烁动画

这里介绍下我遇到过得几种呼吸灯闪烁动画

第一种效果

    @keyframes twinkling {

      0% {

        opacity: 0.2;

        transform: scale(1);

      }



      50% {

        opacity: 0.5;

        transform: scale(1.12);

      }



      100% {

        opacity: 0.2;

        transform: scale(1);

      }

    }

    .circle {

      border-radius: 50%;

      width: 12px;

      height: 12px;

      background: green;

      position: absolute;

      top: 36px;

      left: 36px;



      &::after {

        content: "";

        position: absolute;

        top: -50%;

        left: -50%;

        width: 200%;

        height: 200%;

        border-radius: 50%;

        background: greenyellow;

        animation: twinkling 1s infinite ease-in-out;

        animation-fill-mode: both;

      }

    }

第二种效果

    @keyframes scale {

      0% {

        transform: scale(1)

      }



      50%,

      75% {

        transform: scale(3)

      }



      78%,

      100% {

        opacity: 0

      }

    }



    @keyframes scales {

      0% {

        transform: scale(1)

      }



      50%,

      75% {

        transform: scale(2)

      }



      78%,

      100% {

        opacity: 0

      }

    }



    .circle {

      position: absolute;

      width: 12px;

      height: 12px;

      background-color: pink;

      border-radius: 50%;

      top: 36px;

      left: 36px;

    }



    .circle:before {

      content: '';

      display: block;

      width: 12px;

      height: 12px;

      border-radius: 50%;

      opacity: .4;

      background-color: pink;

      animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);

    }



    .bigcircle {

      position: absolute;

      width: 12px;

      height: 12px;

      border-radius: 50%;

      opacity: .4;

      background-color: pink;

      top: 36px;

      left: 36px;

      animation: scales 1s infinite cubic-bezier(0, 0, .49, 1.02);

    }

第三种效果

 @keyframes scaless {

      0% {

        transform: scale(1)

      }



      50%,

      75% {

        transform: scale(3)

      }



      78%,

      100% {

        opacity: 0

      }

    }



    .circle {

      position: absolute;

      width: 12px;

      height: 12px;

      background-color: transparent;

      border-radius: 50%;

      top: 36px;

      left: 36px;

    }



    .circle:before {

      content: '';

      display: block;

      width: 12px;

      height: 12px;

      border-radius: 50%;

      opacity: .7;

      border: 3px solid hotpink;

      background-color: transparent;

      animation: scaless 1s infinite cubic-bezier(0, 0, .49, 1.02);

    }

小手移动动画

    @keyframes animation-hand-move {

      0% {

        transform: translate(0, 0);

      }



      20% {

        transform: translate(-80px, -50px);

      }



      25% {

        transform: translate(-80px, -50px) scale(0.92) rotate(-3deg);

        opacity: 1;

      }



      75% {

        transform: translate(-80px, -50px) scale(0.92) rotate(-3deg);

        opacity: 1;

      }



      90% {

        transform: translate(-50px, -40px) scale(1) rotate(0deg);

        opacity: 0.6;

      }



      100% {

        opacity: 0;

      }

    }

    .hard {

      position: absolute;

      top: 200px;

      left: 318px;

      width: 61px;

      height: 69px;

      background-size: contain;

      background-repeat: no-repeat;

      background-image: url('./img//174ba1f81a4d0d91a7dc45567b59fd8b.png');

      animation: animation-hand-move 4s infinite linear;

    }

完整动画代码

  <div class="card">

    <View class="round circle"></View>

    <View class="round small-circle"></View>

    <View class="round less-circle"></View>

    <div class="hard"></div>

  </div>

  

  .card {

      margin: 100px auto;

      width: 480px;

      height: 300px;

      background-color: #333333;

      border-radius: 16px;

      position: relative;

    }



    .hard {

      position: absolute;

      top: 200px;

      left: 318px;

      width: 61px;

      height: 69px;

      background-size: contain;

      background-repeat: no-repeat;

      background-image: url('./img/174ba1f81a4d0d91a7dc45567b59fd8b.png');

      animation: animation-hand-move 4s infinite linear;

    }



    .round {

      position: absolute;

      top: 144px;

      left: 227px;

      width: 32px;

      height: 32px;

      border-radius: 50%;

      background-color: transparent;



      &::before {

        content: '';

        position: absolute;

        border-radius: 50%;

        background: transparent;

        width: 100%;

        height: 100%;

        top: 50%;

        left: 50%;

        border: 6px solid rgba(255, 255, 255, 0.5);

        pointer-events: none;

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

        opacity: 1;

      }

    }



    .circle {

      &::before {

        animation: animation-wave 4s infinite linear;

      }

    }



    .small-circle {

      &::before {

        animation: animation-small-wave 4s infinite linear;

      }

    }



    .less-circle {

      &::before {

        animation: animation-less-wave 4s infinite linear;

      }

    }



    @keyframes animation-wave {



      0%,

      20%,

      100% {

        opacity: 0;

      }



      25% {

        width: 0px;

        height: 0px;

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

        opacity: 1;

      }



      75% {

        width: 64px;

        height: 64px;

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

        opacity: 0;

      }

    }



    @keyframes animation-small-wave {



      0%,

      20%,

      100% {

        opacity: 0;

      }



      42% {

        width: 0px;

        height: 0px;

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

        opacity: 1;

      }



      75% {

        width: 64px;

        height: 64px;

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

        opacity: 0;

      }

    }



    @keyframes animation-less-wave {



      0%,

      20%,

      100% {

        opacity: 0;

      }



      59% {

        width: 0px;

        height: 0px;

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

        opacity: 1;

      }



      75% {

        width: 64px;

        height: 64px;

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

        opacity: 0;

      }

    }



    @keyframes animation-hand-move {

      0% {

        transform: translate(0, 0);

      }



      20% {

        transform: translate(-80px, -50px);

      }



      25% {

        transform: translate(-80px, -50px) scale(0.92) rotate(-3deg);

        opacity: 1;

      }



      75% {

        transform: translate(-80px, -50px) scale(0.92) rotate(-3deg);

        opacity: 1;

      }



      90% {

        transform: translate(-50px, -40px) scale(1) rotate(0deg);

        opacity: 0.6;

      }



      100% {

        opacity: 0;

      }

    }

    废话不多说，咱直接进入主题。手把手教你如何写出让帮你维护代码的同时瞬间崩溃的代码。

一、方法或变量名字随便取

    首先，让同事看不懂自己代码的第一步就是，想尽办法让他看不出来我定义的变量或者方法到底是干嘛用的。哎！对，就是让他去猜，哈哈哈。
来来来，空说没意思，举个栗子。

    假设现在想要点击某个input框时，显示一个自定义的组件用于选择选择时间。

    正常的写法如下：定义一个 toggleDatePicker 方法

    这个一看就知道是时间选择器的显示切换方法。

    但是呢，我偏不，定义成下面这样：让同事摸不着头脑，哈哈哈

当看到很多这样的方法名或变量名时，同事的表情估计时这样的。

接下来，第二招

二、方法体尽可能的长，长到不能在长

    这一步至关重要，将所有逻辑全部放在一个方法中写完，坚决不分步骤，不按逻辑一步步拆分方法。让同事为我的超长方法体感到叹为观止，默默流泪。

    老规矩，上栗子

    假设现在有个方法需要处理比较复杂（需要递归，而且每层数据有不同的类型）的json格式的数据回显到页面上（这是用于拼一些条件）。数据格式大概是这样的

[

    {

      type: "group",

      relation: "or",

      conditions: [

                {

                    type: "condition",

                    field: {

                      name: "员工状态",

                      id: 12345678

                    },

                    logic: "=",

                    val: 1,

                    relation: "and"

                 },

                 {

                    type: "condition",

                    field: {

                      name: "入职时间",

                      id: 12345678

                    },

                    logic: "<",

                    val: "2011-07-09",

                    relation: "and"

                }

            ]

        },

        {

          type: "condition",

          field: {

                    name: "入职时间",

                    id: 12345678

                },

          logic: "<",

          val: "2001-07-09",

          relation: "and"

    }

]

    由于上面的 json 数组格式中是一个对象，对象都有 type 属性，一种是 group 类型（表示是一组条件），一种是 condition 类型（表示是真正的条件内容）。

    因此，正常情况下，我们应该是遍历数组，不同的类型分别用不同的方法去处理，并且在处理条件中各个部分的时候分别处理。如下所示：

    但是呢？咱主题是啥，让同时崩溃啊，怎么能把方法拆成这样清晰的逻辑呢。

    来给你看看怎么让同事对你的代码叹为观止

    怎么样，牛不牛，一个方法写完所以逻辑，从1825行一口气写到2103行，足足... 2103 - 1825 是多少来着，3减5 不够，向前借位 ，嗯。。。278 行。
****怎么样，有没有被哥的机智震惊到，如此代码。同事看到肯定心生敬佩，连连称绝。此时想到得到同事应该是这样的表情 

    同事还没进到方法体里面，就已经被我的 迷之方法名 和 超长方法体 所折服，接下来就让他在方法体里面快乐的遨游吧
    

    接下来，继续让同时崩溃。

三、坚决不定义统一的变量

    这个怎么说呢，就是因为有点懒，所有很多代码直接复制粘贴，多么的方便快捷。

    正常情况下，如果某个我们需要的对象在是其他对象的属性，并且层次很深，我们先定义一个变量来接收这个对象，再对这个对象操作。

例如：

let a = {

  b: {

    c: {

      d: {

        name: "我是最里面的对象"

      }

    }

  }

}

    我们要对d对象进行很多次的操作时，一般先将d赋值给一个变量，然后对变量操作。如下：

var dOfA = a.b.c.d;

dOfA.name = "我现在被赋值给dOfA ";

dOfA.data = 1;

dOfA.other = false;

    但是呢，我就不这么干，就是要写得整整齐齐

a.b.c.d.name = "就要这么干，你打我呀";

a.b.c.d.data = 1;

a.b.c.d.other = false;

    老规矩，没有 实际的 栗子 怎么能说的形象呢，上图

    正常写法：

    我偏要这么写

    多么的整齐划一，

    全场动作必须跟我整齐划一

    来左边儿 跟我一起画个龙

    在你右边儿 画一道彩虹

    来左边儿 跟我一起画彩虹...

    咋突然哼起歌来了，不对，咱是要整同事的，怎么能偏题。

    继续，此时同事应该是这个表情

    然后，方法体里面只有这么点东西怎么够玩，继续 come on

四、代码能复制就复制，坚决不提成公用的方法

    代码能 CV ，干嘛费劲封装成方法，而且这样不是显得我代码行数多吗？图片图片图片

    就是玩儿，就是不封装

    来，上栗子

    看到没有，相同的代码。我在 1411行 - 1428行 写了一遍， 后面要用，在1459行-1476行复制一遍

    这还不够？那我在1504-1521行再复制一遍

    这下，爽了吧，哈哈哈

    就是不提方法，就是玩儿，哎！ 有意思

    这个时候同事估计是这样的吧

    怎么样，是不是很绝？不不不，这算啥

    虽然以上这些会让看我代码的同事头疼，但是，只要我在公司，他们还会让我改啊。怎么能搞自己呢。

    最后一步

五、离职

    洋洋洒洒的写完代码，尽早离开。够不够绝，哈哈哈

六、申明：

    以上场景纯属个人虚构的，单纯为了给文章增加点乐趣。写这个文章的目的是让各位程序员兄弟尽量避免写这种难以维护的代码。真的太痛苦了！代码质量、代码重构真的是编程过程中很重要的一个步骤。不能抱着能用就行的心态。还是要对自己有一定的要求。只有你看得起自己的代码，别人才有可能看得起你的代码。加油吧！各位

今天，我花了一天的时间做了一个图片上传组件。效果如下：

可能有人觉得，这个组件很简单，没什么技术含量，其实确实也啥技术含量。但是，我是想借这个组件，来表达一种封装的思想在里面，希望可以帮助到一些朋友。

简单的描述下这个组件的功能：

• 用户可以点击下面颜色比较绚丽的上传按钮，选择本地图片进行上传，也可以直接点击图片区域进行上传。


• 上传过程中，会有一个上传中的进度条，上传完成后，会有一个上传成功的提示，如果失败了，会有一个上传失败的提示，而且支持重试。


• 可以点击图片右上角的删除按钮，删除图片。


• 并发控制，最多只能同时上传 N 张图片，也就是所谓的限频，这里是 2 张。

是不是看了这么多功能之后，就开始有点头皮发麻了？哈哈，不要怕，这就带你了解下，如何拆解这种功能，而且，学会了这种拆解的办法，后面你遇到更加复杂的，也可以得心应手。

拆解功能，逐步实现

首先，我们思考，我们该使用自底向上的思路，还是自顶向下的思路来拆解这个功能呢？我的建议自顶向下的思路去思考架构，然后自底向上的去实现功能。

因为我们这个图片上传组件是支持多长图片同时上传的，而且，我们还需要支持上传失败重试的功能，所以，为了让功能更加聚焦，我们把关注点放在 PhotoItem 上，没一个 PhotoItem 就是一个图片上传的单元。他可以独立的上传，独立的删除，独立的重试。

那么，为了让 PhotoItem 这个组件更加简洁，我们把上传逻辑放在hooks useUpload中，这样，PhotoItem 只需要关注自己的展示逻辑即可。

这样做的目的是做到关注点分离，通常来讲，也是符合单一职责原则的。写出来的组件维护性必定大大提升。

代码实现

我们先来看下 useUpload 的代码,因为PhotoItem 依赖他，我们先实现它。

"use client";

export const useUploader = (uploadAction) => {

  const [isUploading, setIsUploading] = useState(false);

  const [error, setError] = useState(null);

  const upload = useCallback(async (file) => {

    setIsUploading(true);

    setError(null);

    try {

        return await uploadAction(file);

    } catch (err) {

      setError(err.message || 'Upload failed');

    } finally {

      setIsUploading(false);

    }

  }, [uploadAction]);



  const reset = useCallback(() => {

    setIsUploading(false);

    setError(null);

  }, []);



  return { upload, isUploading, error, reset };

};

可以看到，我们的 hooks 非常之简单，就是暴露了一个实现图片上传的狗子 upload，然而，他替我们的组件管理了上传中,上传失败，的状态，因此，接下来看，我们的PhotoItem 组件将会有多清晰。

export const PhotoItem = ({

  file,

  onRemove,

  onUploadComplete,

  onUploadError,

}) => {

  const { upload, isUploading, error, reset } = useUploader();



  const startUpload = useCallback(async () => {

    try {

      const url = await upload(file);

      onUploadComplete(url);

    } catch (err) {

      onUploadError();

    }

  }, [file, upload, onUploadComplete, onUploadError]);



  useEffect(() => {

      startUpload();

  }, [queueUpload, startUpload]);



  const handleRetry = () => {

    reset();

    startUpload();

  };



  return (

    <div className="relative w-full h-20">

      <img

        src={URL.createObjectURL(file)}

      />

      {!isUploading && !error(

          Uploaded

      )}

      {isUploading && (

          <Progress  />

      )}

      {error && (

          <span>Failed</span>

      )}

    </div>

  );

};

OK，到目前为止，还是极其简单的，但是我们貌似忘记了一个很核心的功能，限制并发数。为什么要限制并发数，因为我们自己的服务器或者三方的服务器，可能会有并发数的限制，如果我们不限制并发数，可能会导致一次传多张图片是卡住。

思考，如何限制并发数

我们想一样，是谁触发了上传的呢？是不是 PhotoItem 组件呢？是的，我们可以在 PhotoItem 组件中，去控制并发数，但是，这样做，会导致 PhotoItem 组件的逻辑变得复杂，因为他不仅要关注自己的展示逻辑，还要关注并发数的控制逻辑。这就显的不太合适了。所以，我们应该把他丢出去对吧，截止到目前为止，我们的PhotoUploader 这个组件似乎并没有干任何事情，我们思考下，并发控制的逻辑是否应该是他来呢？

答案是显然的，我们应该把并发控制的逻辑放在 PhotoUploader 组件中，因为他是整个上传组件的入口，他应该关注并发控制，而不是 PhotoItem 组件，而且最本质的原因是，PhotoItem 也不关心是否有其他的 PhotoItem 。

那么，问题来了，并发控制怎么写呢？使用什么数据结构较为合适呢？不卖关子了，我们知道，队列是最合适的数据结构，因为他是先进先出的，我们可以把上传任务放在队列中，然后，每次上传完成，就从队列中取出一个任务，继续上传。

好，我们改造一下，我们的 PhotoItem 组件，让他不要直接执行上传逻辑，而是把他做成一个任务，然后，把任务放在队列中，然后，我们在 PhotoUploader 组件中，去控制并发数。

export const PhotoItem = ({

  file,

  onRemove,

...

  queueUpload // 加一个队列操作器

}) => {

  const { upload, isUploading, error, reset } = useUploader();

...



useEffect(() => {

    queueUpload(startUpload); // 修改这里

}, [queueUpload, startUpload]);





const handleRetry = () => {

    reset();

    queueUpload(startUpload);//修改这里

};



// .... 其他几乎不变

在来看看我们的 PhotoUploader 组件，他是如何控制并发数的。很简单，我们只需要维护一个队列，然后，每次上传完成，就从队列中取出一个任务，继续上传。

  const processQueue = useCallback(() => {

    while (activeUploadsRef.current < MAX_CONCURRENT_UPLOADS && uploadQueueRef.current.length > 0) {

      const nextUpload = uploadQueueRef.current.shift();

      activeUploadsRef.current++;

      nextUpload();

    }

  }, []);



  const queueUpload = useCallback((startUpload) => {

    if (activeUploadsRef.current < MAX_CONCURRENT_UPLOADS) {

      activeUploadsRef.current++;

      startUpload();

    } else {

      uploadQueueRef.current.push(startUpload);

    }

  }, []);

这里，只给出最最核心的逻辑，实际上就是维护的了一个任务队列，然后，每次上传完成，就判断下队列中是否还有任务，并且是否超过了并发数，如果没有超过，并且队列中还有任务，就继续上传。仅此而已。

总结一下

这个图片上传组件，看似简单，但是，他涉及到了很多的知识点，比如并发控制，上传失败重试，组件拆解，自顶向下的架构设计，自底向上的功能实现。我们在实现这个组件的过程中。有过很多的思考，比如：

• 如何拆解功能，让组件更加聚焦，做到关注点分离。


• 控制并发数，使用队列是最合适的数据结构。


• 如何设计一个 hooks，让组件更加简洁。


• 以及自顶向下的架构设计，自底向上的功能实现。

只有建立起这些系统性的思维，我们才能在遇到更加复杂的问题时，得心应手。希望这篇文章对你有所帮助。

欢迎关注我老码沉思录，获取我最新的知识分享。

1. 引言

在当今多端应用开发的趋势下，许多开发者面临着需要在不同平台（如微信、支付宝、百度等小程序，以及H5和React Native应用）上编写和维护多套代码的挑战。为了解决这一问题，市场上涌现了多种跨端开发框架，旨在帮助开发者实现“一次编写，多端运行”的目标。Taro 是其中最为流行的框架之一，但在选择开发工具时，了解其他同类框架的优缺点非常重要。

1.1 类似框架的对比

以下是 Taro、Uniapp、WePY 和 MPX 四种多端开发框架的优缺点对比表：

通过这个对比表，我们可以根据项目需求和团队的技术栈选择最适合的多端开发框架。每个框架都有其独特的优势和局限性，因此选择时需要权衡各方面的因素。

1.2 为什么选择 Taro

Taro 作为一个基于 React 的多端开发框架，有以下几大优势使得它在众多选择中脱颖而出：

Taro 作为一个成熟且功能强大的多端开发框架，特别适合那些希望一次开发、多平台运行的项目需求。它不仅简化了跨平台开发的复杂性，还提供了丰富的功能支持，使得开发过程更加高效和愉悦。因此，我们选择 Taro 作为开发支付宝小程序的首选工具。

2. 环境搭建

2.1 安装 Taro CLI

首先，你需要安装 Taro 的 CLI 工具。确保你已经安装了 Node.js 环境，然后运行以下命令来全局安装 Taro CLI：

npm install -g @tarojs/cli

2.2 创建项目

安装完成后，可以通过以下命令来创建一个新的 Taro 项目：

taro init myApp

在创建过程中，Taro 会询问你一些选项，如选择框架（默认 React）、CSS 预处理器（如 Sass、Less）等。选择合适的选项后，Taro 会自动生成项目的目录结构和配置文件。

2.3 配置支付宝小程序

在 Taro 项目中，配置支付宝小程序的输出涉及多个方面，包括基本的项目配置、支付宝小程序特有的扩展配置、以及一些针对支付宝平台的优化设置。以下是详细的配置步骤和相关说明。

2.3.1 基本配置

首先，需要在项目的 config/index.js 文件中进行基础配置，确保 Taro 能够正确编译并输出支付宝小程序。

const config = {

  projectName: 'myApp',

  designWidth: 750,

  deviceRatio: {

    '640': 2.34 / 2,

    '750': 1,

    '828': 1.81 / 2

  },

  sourceRoot: 'src',

  outputRoot: 'dist',

  plugins: [],

  defineConstants: {},

  copy: {

    patterns: [],

    options: {}

  },

  framework: 'react',

  compiler: 'webpack5',

  cache: {

    enable: true

  },

  mini: {

    postcss: {

      autoprefixer: {

        enable: true,

        config: {}

      },

      pxtransform: {

        enable: true,

        config: {}

      },

      url: {

        enable: true,

        config: {

          limit: 10240 // 设置转换尺寸限制

        }

      }

    }

  },

  h5: {

    publicPath: '/',

    staticDirectory: 'static',

    esnextModules: [],

    postcss: {

      autoprefixer: {

        enable: true,

        config: {}

      },

      cssModules: {

        enable: false, // 默认是 false，若需要支持 CSS Modules，设置为 true

        config: {

          namingPattern: 'module', // 转换模式，支持 global/module

          generateScopedName: '[name]__[local]___[hash:base64:5]'

        }

      }

    }

  }

}

2.3.2 支付宝小程序特有的配置

在 config/index.js 文件中，需要在 mini 配置块中进一步设置支付宝小程序的特有配置。Taro 会自动生成支付宝小程序所需的 app.json、project.config.json 等配置文件，但你可以根据需求自定义一些额外的配置。

mini: {

  compile: {

    exclude: ['src/lib/alipay-lib.js'] // 示例：排除不需要编译的文件

  },

  postcss: {

    autoprefixer: {

      enable: true,

      config: {

        browsers: ['last 3 versions', 'Android >= 4.1', 'ios >= 8']

      }

    }

  },

  // 支付宝小程序特有的配置

  alipay: {

    component2: true, // 启用支付宝小程序的基础组件规范 v2

    axmlStrictCheck: true, // 严格的 axml 校验，帮助发现潜在问题

    renderShareComponent: true, // 启用动态组件渲染

    usingComponents: { // 注册全局自定义组件

      'custom-button': '/components/custom-button/index'

    },

    // 支付宝扩展配置

    plugins: {

      myPlugin: {

        version: '1.0.0',

        provider: 'wx1234567890' // 插件提供者的AppID

      }

    },

    window: {

      defaultTitle: '支付宝小程序', // 设置小程序默认的标题

      pullRefresh: true, // 支持下拉刷新

      allowsBounceVertical: 'YES' // 支持竖向弹性滚动

    },

    pages: [

      'pages/index/index',

      'pages/detail/detail'

    ],

    tabBar: {

      color: '#000000',

      selectedColor: '#1c1c1c',

      backgroundColor: '#ffffff',

      borderStyle: 'black',

      list: [{

        pagePath: 'pages/index/index',

        text: '首页',

        iconPath: 'assets/tabbar/home.png',

        selectedIconPath: 'assets/tabbar/home-active.png'

      }, {

        pagePath: 'pages/detail/detail',

        text: '详情',

        iconPath: 'assets/tabbar/detail.png',

        selectedIconPath: 'assets/tabbar/detail-active.png'

      }]

    }

  }

}

2.3.3 支付宝小程序页面配置

每个页面的配置都在 pages.json 文件中进行定义，Taro 会自动处理这些配置。但你可以根据需要进一步自定义每个页面的表现，如是否启用下拉刷新、页面背景颜色等。

{

  "pages": [

    "pages/index/index",

    "pages/detail/detail"

  ],

  "window": {

    "defaultTitle": "我的小程序",

    "titleBarColor": "#ffffff",

    "navigationBarBackgroundColor": "#000000",

    "navigationBarTextStyle": "white",

    "backgroundColor": "#ffffff",

    "enablePullDownRefresh": true // 启用下拉刷新

  }

}

2.3.4 引入支付宝小程序扩展组件

支付宝小程序支持扩展组件和插件，这些可以直接在 usingComponents 中进行引入。例如，如果你需要使用支付宝小程序特有的扩展组件如 RichText 或 Input，可以在 alipay 配置中进行设置：

alipay: {

  usingComponents: {

    'rich-text': 'plugin://myPlugin/rich-text', // 引用插件中的组件

    'custom-button': '/components/custom-button/index' // 引入自定义组件

  }

}

2.3.5 设置支付宝小程序的分包加载

对于较大或复杂的支付宝小程序，你可能希望启用分包加载功能，以减少主包大小并提升加载速度。Taro 支持在配置文件中设置分包：

subPackages: [

  {

    root: 'packageA',

    pages: [

      'pages/logs/logs'

    ]

  },

  {

    root: 'packageB',

    pages: [

      'pages/index/index'

    ]

  }

],

2.3.6 环境变量配置

在开发和生产环境下，可能需要不同的配置。Taro 支持通过环境变量进行配置管理。你可以在项目根目录下创建 .env 文件，并定义不同环境下的变量：

// .env.development

TARO_ENV = 'alipay'

API_BASE_URL = 'https://api-dev.example.com'



// .env.production

TARO_ENV = 'alipay'

API_BASE_URL = 'https://api.example.com'

然后在代码中通过 process.env 访问这些变量：

const apiBaseUrl = process.env.API_BASE_URL

2.3.7 自定义 Webpack 配置

如果你需要更复杂的配置或优化，可以通过 config/index.js 中的 webpackChain 属性来自定义 Webpack 配置。例如，添加自定义的插件或优化构建过程：

mini: {

  webpackChain (chain) {

    chain.plugin('analyzer')

      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])

  }

}

2.3.8 部署和调试

在配置完成后，可以通过以下命令生成支付宝小程序的构建文件：

taro build --type alipay

生成的代码会存放在 dist 目录下，然后可以通过支付宝开发者工具打开并进行调试。

2.3.9 常见问题及解决方法

以上是使用 Taro 搭建支付宝小程序的详细配置步骤，涵盖了从基础配置到扩展功能的方方面面。通过这些配置，你可以更加灵活地控制支付宝小程序的表现和功能，满足项目的多样化需求。

3. 重要的 API 和组件

3.1 基础组件

Taro 提供了许多常用的基础组件，如 View、Text、Button 等，这些组件与 React 组件类似，但 Taro 的组件具有跨平台能力。

import { View, Text, Button } from '@tarojs/components'



const MyComponent = () => (

  <View>

    <Text>Hello, Taro!</Text>

    <Button onClick={() => alert('Clicked!')}>Click me</Button>

  </View>

)

3.2 事件处理

Taro 事件处理机制与 React 类似，可以直接使用 onClick、onChange 等事件属性。此外，Taro 支持跨平台的事件兼容处理，不需要担心事件名称的差异。

3.3 路由跳转

Taro 提供了 Taro.navigateTo、Taro.redirectTo 等 API 用于在小程序中进行页面跳转。可以根据具体需求选择合适的跳转方式。

Taro.navigateTo({

  url: '/pages/detail/index?id=123'

})

3.4 使用 Hooks

在 Taro 中可以使用 React 的 Hooks，如 useState、useEffect 等，来管理组件的状态和生命周期。

import { useState, useEffect } from 'react'

import { View } from '@tarojs/components'



const Counter = () => {

  const [count, setCount] = useState(0)



  useEffect(() => {

    Taro.setNavigationBarTitle({ title: `Count: ${count}` })

  }, [count])



  return (

    <View>

      <Button onClick={() => setCount(count + 1)}>Increment</Button>

      <Text>{count}</Text>

    </View>

  )

}

4. 常见问题及坑点

4.1 样式问题

支付宝小程序的 CSS 支持度与微信小程序有所不同，某些高级的 CSS 特性可能无法生效。建议使用基础的 CSS 进行布局，并在项目中引入适当的 polyfill。

4.2 API 差异

在使用 Taro 开发支付宝小程序时，虽然 Taro 提供了跨平台的 API 兼容性，但是由于各个小程序平台的底层架构和能力不同，仍然存在一些需要特别注意的 API 差异。以下将详细说明一些与原生微信小程序不同的、并且在支付宝小程序中经常会用到的特殊 API。

4.2.1 支付宝特有的 API

1. my.request 与 wx.request

尽管 Taro 封装了 Taro.request 来统一请求接口，但在某些特殊情况下，开发者可能需要直接使用原生 API。支付宝小程序的 my.request 与微信的 wx.request 基本相同，但支持一些额外的配置选项，如 timeout 等。

示例：

// 支付宝小程序

my.request({

  url: 'https://api.example.com/data',

  method: 'GET',

  timeout: 5000, // 设置请求超时时间

  success: (res) => {

    console.log(res.data);

  },

  fail: (err) => {

    console.error(err);

  }

});

在微信小程序中，wx.request 不支持 timeout 配置。

2. my.alert 和 wx.showModal

my.alert 是支付宝小程序中用来展示提示框的 API，而微信小程序使用 wx.showModal 来实现类似功能。my.alert 仅支持一个按钮，而 wx.showModal 可以支持两个按钮（确定和取消）。

示例：

// 支付宝小程序

my.alert({

  title: '提示',

  content: '这是一个提示框',

  buttonText: '我知道了',

  success: () => {

    console.log('用户点击了确定按钮');

  }

});



// 微信小程序

wx.showModal({

  title: '提示',

  content: '这是一个提示框',

  showCancel: false, // 不显示取消按钮

  success: (res) => {

    if (res.confirm) {

      console.log('用户点击了确定按钮');

    }

  }

});

3. my.getAuthCode 与 wx.login

支付宝小程序的 my.getAuthCode 用于获取用户的授权码，通常用于登录验证或支付场景。而微信小程序使用 wx.login 获取用户的登录凭证（code），这两者在使用上有所不同。

示例：

// 支付宝小程序

my.getAuthCode({

  scopes: 'auth_user',

  success: (res) => {

    console.log('用户授权码:', res.authCode);

  },

  fail: (err) => {

    console.error('获取授权码失败:', err);

  }

});



// 微信小程序

wx.login({

  success: (res) => {

    console.log('用户登录凭证:', res.code);

  },

  fail: (err) => {

    console.error('获取登录凭证失败:', err);

  }

});

4. my.navigateToMiniProgram 与 wx.navigateToMiniProgram

这两个 API 都用于跳转到其他小程序。虽然功能类似，但在支付宝小程序中，my.navigateToMiniProgram 有一些额外的参数，比如 extraData，用于在跳转时传递数据。

示例：

// 支付宝小程序

my.navigateToMiniProgram({

  appId: '2021000000000000',

  path: 'pages/index/index',

  extraData: {

    foo: 'bar'

  },

  success: () => {

    console.log('跳转成功');

  },

  fail: (err) => {

    console.error('跳转失败:', err);

  }

});



// 微信小程序

wx.navigateToMiniProgram({

  appId: 'wx1234567890',

  path: 'pages/index/index',

  extraData: {

    foo: 'bar'

  },

  success: () => {

    console.log('跳转成功');

  },

  fail: (err) => {

    console.error('跳转失败:', err);

  }

});

5. my.tradePay 与 wx.requestPayment

my.tradePay 是支付宝小程序用于发起支付的 API，而微信小程序使用 wx.requestPayment 实现同样的功能。两者的参数配置有所不同，尤其是在支付方式和返回结果处理上。

示例：

// 支付宝小程序

my.tradePay({

  tradeNO: '202408280000000000001',

  success: (res) => {

    if (res.resultCode === '9000') {

      console.log('支付成功');

    } else {

      console.log('支付失败', res.resultCode);

    }

  },

  fail: (err) => {

    console.error('支付失败:', err);

  }

});



// 微信小程序

wx.requestPayment({

  timeStamp: '1609459200',

  nonceStr: '5K8264ILTKCH16CQ2502SI8ZNMTM67VS',

  package: 'prepay_id=wx20170101abc1234567890',

  signType: 'MD5',

  paySign: 'ABCD1234',

  success: () => {

    console.log('支付成功');

  },

  fail: (err) => {

    console.error('支付失败:', err);

  }

});

6. my.chooseCity 与 wx.chooseLocation

支付宝小程序提供了 my.chooseCity API 用于选择城市，而微信小程序没有直接对应的 API，但 wx.chooseLocation 可以选择位置，且在选址过程中包含了城市信息。

示例：

// 支付宝小程序

my.chooseCity({

  showLocatedCity: true, // 显示当前所在城市

  success: (res) => {

    console.log('选择的城市:', res.city);

  }

});



// 微信小程序

wx.chooseLocation({

  success: (res) => {

    console.log('选择的位置:', res.name);

    console.log('所在城市:', res.address);

  }

});

4.2.2 差异化 API 使用的注意事项

通过对以上 API 差异的详细了解，希望我们可以更好地在 Taro 项目中处理支付宝小程序与微信小程序的不同需求，提升应用的跨平台兼容性和用户体验。

4.3 路由管理

在 Taro 中，路由管理是跨平台开发中非常重要的一环。尽管 Taro 封装了微信小程序和支付宝小程序的路由操作，但在使用过程中仍然存在一些差异。以下详细说明 Taro 在支付宝和微信小程序中的路由管理方式，包括不同的跳转方式及参数的获取。

4.3.1 路由跳转方式

Taro 中提供了多种路由跳转方式，主要包括 Taro.navigateTo、Taro.redirectTo、Taro.switchTab、Taro.reLaunch 和 Taro.navigateBack。这些方法封装了微信和支付宝小程序的原生跳转方式，适用于不同的使用场景。

1. Taro.navigateTo

Taro.navigateTo 用于跳转到应用内的指定页面，新的页面会被加入到页面栈中。

示例：

Taro.navigateTo({

  url: '/pages/detail/index?id=123&name=abc'

});

• 微信小程序： 页面栈最大深度为10，超过后会自动释放栈顶页面。


• 支付宝小程序： 页面栈最大深度为10，同样超过后会自动释放栈顶页面。

2. Taro.redirectTo

Taro.redirectTo 用于关闭当前页面并跳转到指定页面，跳转后无法返回到原页面。

示例：

Taro.redirectTo({

  url: '/pages/home/index'

});

• 微信小程序 和 支付宝小程序 都会将当前页面从栈中移除，不允许用户回退。

3. Taro.switchTab

Taro.switchTab 用于跳转到指定的 tabBar 页面，并关闭其他所有非 tabBar 页面。

示例：

Taro.switchTab({

  url: '/pages/home/index'

});

• 微信小程序： url 必须是 tabBar 页面，否则会报错。


• 支付宝小程序： 同样必须是 tabBar 页面，但支付宝小程序支持使用 extraData 传递额外数据。

4. Taro.reLaunch

Taro.reLaunch 用于关闭所有页面并跳转到指定页面，适用于需要重置应用状态的场景。

示例：

Taro.reLaunch({

  url: '/pages/home/index'

});

• 微信小程序 和 支付宝小程序 行为一致，都会关闭所有页面并创建一个新的页面栈。

5. Taro.navigateBack

Taro.navigateBack 用于关闭当前页面并返回到上一级页面或多级页面。

示例：

Taro.navigateBack({

  delta: 1 // 返回上一级页面

});

• 微信小程序 和 支付宝小程序 都支持通过 delta 指定返回的页面层级。

4.3.2 获取路由参数

无论是通过哪种方式跳转，页面之间通常需要传递参数。在 Taro 中，参数的传递和获取可以通过 this.$router.params 实现。以下是如何在页面中获取路由参数的详细说明。

1. URL 参数传递

当使用 Taro.navigateTo 或其他跳转方法时，可以在 url 中通过 query 传递参数。

示例：

// 页面跳转

Taro.navigateTo({

  url: '/pages/detail/index?id=123&name=abc'

});



// 在目标页面获取参数

componentDidMount() {

  const { id, name } = this.$router.params;

  console.log('ID:', id); // 输出：ID: 123

  console.log('Name:', name); // 输出：Name: abc

}

• 微信小程序： 参数会自动编码并附加到 URL 后。


• 支付宝小程序： 行为类似微信小程序，参数通过 URL query 传递。

2. extraData 参数传递

支付宝小程序允许通过 extraData 传递复杂对象，这在某些复杂场景下非常有用。

示例：

// 页面跳转

my.navigateTo({

  url: '/pages/detail/index',

  extraData: {

    info: {

      id: 123,

      name: 'abc'

    }

  }

});



// 在目标页面获取参数

componentDidMount() {

  const { info } = this.$router.params;

  console.log('Info:', info); // 输出：Info: { id: 123, name: 'abc' }

}

• 微信小程序： 目前不支持 extraData 参数传递，但可以通过 globalData 或其他全局状态管理工具如 Redux 实现类似效果。

3. 场景值与 scene 参数

在小程序的入口页面，通常会涉及到场景值（scene）的获取。Taro 提供了 this.$router.params.scene 来获取微信小程序中的 scene 值，这在处理分享或扫码进入时非常重要。

示例：

componentDidMount() {

  const scene = this.$router.params.scene;

  console.log('Scene:', scene); // 输出对应的场景值

}

• 微信小程序： 支持 scene 参数传递，主要用于扫码进入或分享。


• 支付宝小程序： 不直接支持 scene，但可以通过其他方式获取进入场景（如 my.getLaunchOptionsSync）。

4.3.3 注意事项

4.3.4 其他事项

通过上面的一些介绍，就可以更加灵活地使用 Taro 进行路由管理，充分利用不同平台的特性，提升应用的导航体验和用户体验。在使用 Taro 开发多端应用时，除了路由管理和 API 差异之外，还有一些关键点和常见的坑需要注意，以确保应用的稳定性、性能和可维护性。以下是一些使用 Taro 过程中需要特别注意的事项：

1. 跨平台兼容性

尽管 Taro 旨在提供跨平台的开发体验，但不同平台在渲染引擎、组件行为和 API 支持上仍有差异。开发者需要在每个目标平台上进行充分测试，确保功能和表现一致。

注意事项：

• 组件兼容性：某些 Taro 组件在不同平台上的表现可能有所不同，如 scroll-view 的行为在微信和支付宝小程序中略有差异。


• 样式兼容性：不同平台的样式支持不尽相同，如支付宝小程序对部分 CSS 属性的支持较弱，需要进行适配。


• API 兼容性：Taro 提供的统一 API 在不同平台上可能会有细微的差异，建议使用 Taro.getEnv() 进行环境判断，以便针对特定平台编写适配代码。

2. 状态管理

Taro 支持使用多种状态管理工具，如 Redux、MobX、Recoil 等。根据项目的复杂度和团队的技术栈选择合适的状态管理方案。

注意事项：

• 全局状态管理：对于跨页面的数据共享，使用全局状态管理工具能有效避免组件之间直接传递数据的问题。


• 性能优化：在使用状态管理工具时，注意避免不必要的状态更新，尤其是在大规模应用中，应当进行性能调优以减少重渲染。

3. 性能优化

Taro 封装了小程序的框架，尽管提供了便捷性，但这也带来了一些性能开销。性能优化是确保 Taro 应用顺畅运行的关键。

注意事项：

• 懒加载：对不常用的组件或页面使用懒加载技术，减少初次渲染的压力。


• 分包加载：对于较大的应用，可以使用分包加载（特别是在微信小程序中）来优化启动速度。


• 减少组件嵌套：过多的组件嵌套会增加渲染负担，尽量保持组件结构的扁平化。


• 长列表优化：对长列表（如商品列表、评论列表）使用虚拟列表技术，避免一次性加载大量数据。

4. 开发工具与调试

Taro 提供了开发者工具来简化开发和调试过程，但在实际项目中，调试复杂问题时可能会遇到一些挑战。

注意事项：

• 使用 Taro CLI：Taro CLI 提供了丰富的命令行工具，帮助你快速生成项目、构建应用和调试代码。


• 跨平台调试：确保在每个平台的开发者工具中进行调试，并使用平台特有的工具，如微信小程序开发者工具和支付宝 IDE。


• 源代码映射：使用源代码映射（Source Map）功能来调试编译后的代码，方便追踪错误。

5. 小程序的限制

各个小程序平台都有其独特的限制，如包大小限制、API 速率限制、页面栈限制等。在开发过程中，必须遵守这些限制，以免在发布或运行时遇到问题。

注意事项：

• 包大小限制：微信和支付宝小程序对主包和分包的大小都有严格限制，尽量减少不必要的资源，压缩图片和代码。


• 页面栈限制：小程序的页面栈深度通常为 10 层，超出后可能会引发崩溃，需要合理设计页面的跳转逻辑。


• 请求速率限制：各平台对网络请求的速率和并发量都有要求，应当合并请求或使用请求队列来控制频率。

6. 国际化支持

如果应用需要支持多语言，Taro 提供了基础的国际化支持，但由于不同平台的特性，可能需要额外的配置和适配。

注意事项：

• 文本管理：使用统一的国际化管理工具，如 i18next 或自定义的国际化方案。


• 格式化问题：不同平台对日期、货币等格式化方式支持不同，使用第三方库（如 moment.js）来统一格式化操作。


• 右到左（RTL）布局：如果应用需要支持 RTL 语言，确保在每个平台上都正确实现 RTL 布局。

7. 版本管理与更新

在多端开发中，版本管理和应用更新也是需要特别注意的地方。不同平台对更新机制的支持不尽相同，需要有针对性的处理策略。

注意事项：

• 小程序版本控制：在不同平台上发布新版本时，注意同步版本号，并在应用内做好版本控制。


• 热更新：Taro 目前不直接支持热更新，但可以通过后台配置管理、版本检测等方式实现相似的效果。


• 数据迁移：在更新过程中，可能需要进行数据迁移（如数据库结构变更），确保用户数据的完整性。

8. 社区与文档支持

Taro 社区活跃，文档也在不断完善，但在实际开发中遇到问题时，了解如何有效利用社区资源和官方文档也很重要。

注意事项：

• 官方文档：Taro 官方文档非常详细，建议在遇到问题时首先查阅文档，以获取官方推荐的解决方案。


• 社区支持：遇到文档未覆盖的问题，可以到 GitHub Issues、Gitter 或其他开发者社区寻求帮助。


• 示例项目：参考官方或社区提供的示例项目，可以帮助你快速上手并解决常见问题。

通过注意以上关键点，开发者可以更好地利用 Taro 的跨平台能力，同时避免常见的坑和问题，提升开发效率和应用质量。
官方文档地址： docs.taro.zone/docs

5. 结语

结语

Taro 的出现不仅解决了多端开发的复杂性问题，还大大提升了开发效率和代码的可维护性。通过统一的 API 和组件库，Taro 让开发者无需深入了解每个小程序平台的细节，即可快速构建和部署功能丰富的应用。

然而，正如任何工具或框架一样，Taro 并非完美无缺。跨平台开发固有的挑战仍然存在，包括平台间的差异、性能优化需求、状态管理复杂性，以及不同平台特有的限制。这些挑战提醒我们，尽管 Taro 能够极大地简化开发流程，但在开发过程中依然需要细致地进行测试、调优和适配工作。

从选择 Taro 作为开发框架，到深入了解其核心功能和最佳实践，再到避开潜在的坑和问题，需要全方位地掌握 Taro 的使用技巧。通过合理使用 Taro 的能力，结合自身项目的实际需求，开发者可以实现跨平台的一致用户体验，并保持代码库的可扩展性和维护性。

展望未来，随着小程序生态的不断发展和 Taro 框架的持续更新，开发者将会有更多的机会去探索和创新。Taro 的灵活性和强大的跨平台能力为我们提供了无限的可能，无论是在支付宝小程序、微信小程序，还是在更多的平台上，都能为用户带来一致、流畅的体验。

在使用 Taro 进行多端开发的过程中，我们不仅仅是编写代码，更是在打造一款能够适应多平台需求的高质量应用。通过不断学习和实践，我们能够充分发挥 Taro 的潜力，让每一个用户无论在哪个平台上使用我们的应用，都能感受到同样的便捷与愉悦。

最终，无论是初次使用 Taro 的新手，还是已经熟练掌握的老手，持续学习和优化始终是提升开发能力的关键。Taro 为我们提供了强大的工具，剩下的就是如何用好这些工具，创造出色的产品。相信随着更多开发者的加入和贡献，Taro 生态将会更加繁荣，为跨平台开发带来更多的可能性和惊喜。

作者：洞窝-海林

前言

翌日

我吃着早餐，划着水。

不一会，领导走了过来。

领导：小伙子，你去XX项目实现一个设备能源图，要求能根据剩余能量显示水波高低。

我： 啊？我？这个项目我没看过代码。

领导：任务有点急，你自己安排时间吧，好好搞，给你争取机会。

我：好吧。（谁叫咱只是一个卑微的打工人，只能干咯😎👌😭。）

分析

看到图，类似要实现这样一个立方体形状的东西，然后需要根据剩余电量显示波浪高低。

我心想，这不简单吗，这不就是一个水球图，恰好之前看过echarts中有一个水球图的插件。

想到这，我立马三下五除二，从echarts官网上下载了这个插件，心想下载好了就算搞定了。

波折

哪知，这个需求没有想象中的那么简单，UI设计的图其实是一个伪3D立方体，通过俯视实现立体效果。并且A面和B面都要有波浪。

这就让我犯了难，因为官方提供的demo没有这样的形状，最相近也就是最后一个图案。

那把两个最后一个图案拼接起来，组成A、B面，不就可以达到我们的效果了吗，然后最后顶上再放一个四边形C面，不就可以完美解决了。

想法是好的，但是具体思考实践方案起来就感觉麻烦了。根据我平时的解决问题的经验：如果方案实践起来，发现很麻烦就说明方法错了，需要换个方向思考。

于是我开始翻阅官方文档，找到了关于形状的定义shape属性。

救世主shape

它支持三种方式定义形状

我们可以看到第二种方式实现复杂的图形有局促性，第三种方式告诉我们他支持svg的path路径时，这就给了我们非常多的可能性，我们可以通过路径绘制任意想要的图形。

看到这个属性后，岂不是只需要将UI切的svg文件中的path传入进去就可以实现这个效果了？随后开始了分析。

我们的图形可以由三个四边形构成，每个四边形四个顶点，合计12个顶点。

从svg文件我们可以得到如下内容

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="362.74609375"

        height="513.7080078125" viewBox="0 0 362.74609375 513.7080078125" fill="none">

        <path d="M128.239 177.367L128.239 512.015L361.056 397.17L361.056 76.6519L128.239 177.367Z" stroke="rgba(0, 0, 0, 1)"

            stroke-width="3.3802816901408472" stroke-linejoin="round" fill="#FFFFFF">

        </path>

        <path d="M1.69043 107.409L128.231 177.364L361.048 76.6482L229.656 1.69043L1.69043 107.409Z"

            stroke="rgba(0, 0, 0, 1)" stroke-width="3.3802816901408472" stroke-linejoin="round" fill="#FFFFFF">

        </path>

        <path d="M1.69043 107.413L1.69043 442.06L128.231 512.015L128.231 177.368L1.69043 107.413Z" stroke="rgba(0, 0, 0, 1)"

            stroke-width="3.3802816901408472" stroke-linejoin="round" fill="#FFFFFF">

        </path>

    </svg>

我们可以发现，它是由三个path路径构成，而我们的水球图只支持一个path：//开头的path路径字符串。解决这个问题也很简单，我们只需要将三个路径给他合并在一起就可以了，我们就可以实现这种伪3D效果了。

如此，我们便得到了路径。

path://M128.239 177.367L128.239 512.015L361.056 397.17L361.056 76.6519L128.239 177.367Z M1.69043 107.409L128.231 177.364L361.048 76.6482L229.656 1.69043L1.69043 107.409Z M1.69043 107.413L1.69043 442.06L128.231 512.015L128.231 177.368L1.69043 107.413Z

效果如图：

哇瑟，真不赖，感觉已经实现百分之七八十了，内心已经在幻想，领导看到实现后大悦，说不愧是你呀，然后给我升职加薪，推举升任CTO，赢取白富美，翘着腿坐在库里南里的场景了。

等等！我的线条呢？整个水球图（也不能叫球了，水立方？）只有外轮廓，看不到线条棱角了，其实我觉得现在这种情况还蛮好看的，但是为了忠于UI设计的还原，还是得另寻办法，可不能让人家说菜，这么简单都实现不了。

好在，解决这个问题也很简单，官方提供了边框的配置项。（真是及时雨啊）

 backgroundStyle: {

    borderColor: "#000",// 边框的颜色

    borderWidth: 2,     // 边框线条的粗细

    color: "#fff",      // 背景色

 },

配置完边框线的粗细后，啊哈！这不就是我们想要的效果吗？

最后还差一点，再将百分比显示出来，如下图，完美！

拓展

然后我们类比别的图案也是类似，也是只需要将多个path组合在一起就可以了。

悟空

某支

钢铁侠

是不是看起来非常的炫酷，实现方式也是一样，我们只需要将这些图案的path路径传入这个shape属性就行了，然后调整适当的颜色。

注意点：

• 如果图形中包含填充的区域，可以让UI小姐姐，把填充改成线条模拟，用多个线条组成一个面模拟，类似微积分。


• 图形的样式取决于path路径，水球图只支持路径，因此路径上的颜色不能单独设置了，只能通过配置项配置一个整体的颜色。


• 关于svg矢量图标来源，可以上素材网站寻找，如我比较喜欢用的字节图标库、阿里图标库等等

思考

上面实现的水球图有一点让我十分在意，就是图案的是怎么做到根据波浪是否遮挡文字，改变文字的颜色，它做到了即使水球图的波浪漫过了文字，文字会呈现白色，不会因为水漫过后，文字颜色与水球图颜色一致，导致文字不可见。

这个特性也太酷了吧，对于用户体验来说大大增强。

由于强烈的好奇心，我开始研究源码这个是怎么实现的。

看了源码后，恍然大悟，原来是这样的

这样，我们就完成了这个神奇的效果。

下面我提供了一个demo，大家可以通过注释draw中的函数，就能很快明白是怎么一回事了。

值得注意的是

• 内层文本与外层文本的位置需要在同一个位置。


• 裁剪区域位置、大小和波浪的位置、大小重合。

总结

完成这个需求后，领导果然非常高兴给我升了职、加了薪，就在我得意洋洋幻想当上CTO的时候，中午闹钟响了，原来只是中午做了个梦，想到下午还有任务，就继续搬砖去了🤣。

最近把五年前写的一个弹幕库给重构了一下，本来两年前就想着做这件事，但是其中有一段工作时间压力很大，所以就搁置了，导致没有时间来做这件事情，最近周末 + 晚上花一些时间重构了下，并把文档好好写了一下。言归正传，这篇文章会介绍部分这个弹幕库有的能力，如果正好符合你的需求或者感兴趣，可以帮忙点点 star 来支持一下。

我们有哪些能力

我们提供了灵活调整轨道，自定义弹幕和容器样式，弹幕运动算法等能力，还在提供非常丰富的钩子来让用户处理自定义的行为，只要你想要的，都能做到，本文档会简单介绍一些能力和一些功能的实现。

• 在线 demo: imtaotao.github.io/danmu/


• github: github.com/imtaotao/da…


• 官方文档：imtaotao.github.io/danmu/docum…

快速开始

对于一个开箱即用的 demo，可以非常简单的接入，如下所示：

import { create } from 'danmu';



const manager = create();



manager.mount('#root');

manager.startPlaying();



// 发送弹幕

manager.push('弹幕内容')

对轨道进行调整

我们对支持类似 CSS calc 表达式的能力，一些位置/宽高等信息都可以用表达式来计算。所以对于轨道来说可以很方便的进行调整。

// 例如，这里的 100% 是指容器宽度（如果是高度相关的配置 100%  就是容器的高度）

manager.setGap('(100% - 10px) / 5');

限制为顶部 3 条弹幕

// 如果我们希望轨道高度为 50px

manager.setTrackHeight('100% / 3');



// 如果不设置渲染区域，轨道的高度会根据默认的 container.height / 3 得到，

// 这可能导致轨道高度不是你想要的

manager.setArea({

  y: {

    start: 0,

    // 3 条轨道的总高度为 150px

    end: 150,

  },

});

限制为中间 3 条弹幕

manager.setTrackHeight('100% / 3');



manager.setArea({

  y: {

    start: `50%`,

    end: `50% + 150`,

  },

});

限制为几条不连续的轨道

限制为几条不连续的轨道，除了要做和连续轨道的操作之外，还需要借助 willRender 这个钩子来实现。

// 如果我们希望轨道高度为 50px，并渲染 0，2，4 这几条轨道

manager.setTrackHeight('100% / 6');



// 设置容器的渲染区域

manager.setArea({

  y: {

    start: 0,

    // 6 条轨道的总高度为 300px

    end: 300,

  },

});



manager.use({

  willRender(ref) {

    // 高级弹幕和轨道不强相关，没有 trackIndex 这个属性

    if (ref.trackIndex === null) return ref;



    // 如果为 1，3，5 这几条轨道就阻止渲染，并重新添加等待下次渲染

    if (ref.trackIndex % 2 === 1) {

      ref.prevent = true;

      manager.unshift(ref.danmaku);

    }

    return ref;

  },

});

自定义渲染

弹幕和容器都允许自定义的渲染样式，你可以很方便的做到。

自定义弹幕的样式

1. 通过 manager.setStyle 来设置

import { create } from 'danmu';



// 需要添加的样式

const styles = {

  color: 'red',

  fontSize: '15px',

  // .

};



const manager = create();



// 后续渲染的弹幕和当前已经渲染的弹幕会设置上这些样式。

for (const key in styles) {

  manager.setStyle(key, styles[key]);

}

2. 通过 danamaku.setStyle 来设置

import { create } from 'danmu';



// 需要添加的样式

const styles = {

  color: 'red',

  fontSize: '15px',

  // .

};



// 初始化的时候添加钩子处理，这样当有新的弹幕渲染时会自动添加上这些样式

const manager = create({

  plugin: {

    $moveStart(danmaku) {

      for (const key in styles) {

        danmaku.setStyle(key, styles[key]);

      }

      // 你也可以在这里给弹幕 DOM 添加 className

      danmaku.node.classList.add('className');

    },

  },

});



// 对当前正在渲染的弹幕添加样式

manager.asyncEach((danmaku) => {

  for (const key in styles) {

    danmaku.setStyle(key, styles[key]);

  }

});

自定义容器样式

import { create } from 'danmu';



// 需要添加的样式

const styles = {

  background: 'red',

  // .

};



const manager = create({

  plugin: {

    // 你可以在初始化的时候添加钩子处理

    init(manager) {

      for (const key in styles) {

        manager.container.setStyle(key, styles[key]);

      }

      // 你也可以在这里给容器 DOM 添加 className

      manager.container.node.classList.add('className');

    },

  },

});



// 或者直接调用 api

for (const key in styles) {

  manager.container.setStyle(key, styles[key]);

}

高级弹幕的示例

本章节将介绍如何将弹幕固定在某一位置，以 top 和 left 这两个位置举例。由于我们需要自定义位置，所以我们需要使用高级弹幕的能力。

将弹幕固定在顶部

// 这条弹幕将会居中距离顶部 10px 的位置悬停 5s

manager.pushFlexibleDanmaku('弹幕内容', {

  duration: 5000,

  direction: 'none',

  position(danmaku, container) {

    return {

      x: `50% - ${danmaku.getWidth() / 2}`,

      y: 10, // 具体容器顶部的距离为 10px

    };

  },

});

固定在顶部第 2 条轨道上

// 这条弹幕将会在第二条轨道居中的位置悬停 5s

manager.pushFlexibleDanmaku('弹幕内容', {

  duration: 5000,

  direction: 'none',

  position(danmaku, container) {

    // 渲染在第 3 条轨道中

    const { middle } = manager.getTrackLocation(2);

    return {

      x: `50% - ${danmaku.getWidth() / 2}`,

      y: middle - danmaku.getHeight() / 2,

    };

  },

});

将弹幕固定在左边

// 这条弹幕将会在容器中间距离左边 10px 的地方停留 5s

manager.pushFlexibleDanmaku('弹幕内容', {

  duration: 5000,

  direction: 'none',

  position(danmaku, container) {

    // 渲染在第 3 条轨道中

    const { middle } = manager.getTrackLocation(2);

    return {

      x: 10,

      y: `50% - ${danmaku.getHeight() / 2}`,

    };

  },

});

发送带图片的弹幕

要让弹幕里面能够携带图片，要在弹幕的节点内部添加自定义的内容，实际上不止图片，你可以往弹幕的节点里面添加任何的内容。

本章节的组件以 React 来实现演示。

开发弹幕组件

export function Danmaku({ danmaku }) {

  return (

    <div>

      <img src="https://abc.jpg" />

      {danmaku.data}

    </div>

  );

}

渲染弹幕

import ReactDOM from 'react-dom/client';

import { create } from 'danmu';

import { Danmaku } from './Danmaku';



const manager = create<string>({

  plugin: {

    // 将组件渲染到弹幕的内置节点上

    $createNode(danmaku) {

      ReactDOM.createRoot(danmaku.node).render(<Danmaku danmaku={danmaku} />);

    },

  },

});

编写一个插件

编写一个插件是很简单的，但是借助内核暴露出来的钩子和 API，你可以很轻松的实现强大且定制化的需求。由于内核没有暴露出来根据条件来实现过滤弹幕的功能，原因在于内核不知道弹幕内容的数据结构，这和业务的诉求强相关，所以我们在此通过插件来实现精简弹幕的功能用来演示。

编写一个插件

• 你编写的插件应当取一个 name，以便于调试定位问题（注意不要和其他插件冲突了）。


• 插件可以选择性的声明一个 version，这在你的插件作为独立包发到 npm 上时很有用。

export function filter({ userIds, keywords }) {

  return (manager) => {

    return {

      name: 'filter-keywords-or-user',

      version: '1.0.0', // version 字段不是必须的

      willRender(ref) {

        const { userId, content } = ref.danmaku.data.value;

        console.log(ref.type); // 可以根据此字段来区分是普通弹幕还是高级弹幕



        if (userIds && userIds.includes(userId)) {

          ref.prevent = true;

        } else if (keywords) {

          for (const word of keywords) {

            if (content.includes(word)) {

              ref.prevent = true;

              break;

            }

          }

        }

        return ref;

      },

    };

  };

}

注册插件

你需要通过 mananger.use() 来注册插件。

import { create } from 'danmu';



const manager = create<{

  userId: number;

  content: string;

}>();



manager.use(

  filter({

    userIds: [1],

    keywords: ['菜'],

  }),

);

发送弹幕

• ❌ 会被插件阻止渲染

manager.push({

  userId: 1,

  content: '',

});

• ❌ 会被插件阻止渲染

manager.push({

  userId: 2,

  content: '你真菜',

});

• ✔️ 不会被插件阻止渲染

manager.push({

  userId: 2,

  content: '',

});

• ✔️ 不会被插件阻止渲染

manager.push({

  userId: 2,

  content: '你真棒',

});

总结

本文档只是简单介绍了下现在的部分能力，更详细的文档在官网可以查看，如果对你的业务或者学习有帮助的，给个 star 支持一下作者，也欢迎大家评论探讨（不止弹幕，哈哈）。

在前端开发中，我们经常需要处理URL，例如在发起HTTP请求时构建API端点，或在页面导航时构建动态链接、拼接动态参数。
过去，我们习惯于使用模板语法和字符串拼接来构建这些URL，现在在代码中依然可以看到新的代码还在使用这种方法。
但这种方法不仅容易出错，而且在维护和阅读代码时也不够直观。本文将介绍更现代和更安全的URL构建方法，并展示如何在实际项目中应用它们。

传统上，我们常使用字符串拼接或模板语法来构建URL。例如：

const baseUrl = "https://api.example.com";

const userId = 12345;

const endpoint = baseUrl + "/users/" + userId + "/details";

console.log(endpoint); // "https://api.example.com/users/12345/details"

import { TYPE_EDIT } from '@/constants/type.ts'

const type = TYPE_EDIT

const url = 'https://api.example.com/userInfo'

const newUrl = url + '?type=' + type + '&model=1&share=1&fromModule=wechat'

console.log(urlUrl) // https://api.example.com/userInfo?type=TYPE_EDIT&model=1&share=1&fromModule=wechat

或使用ES6模板字符串：

const baseUrl = "https://api.example.com";

const userId = 12345;

const endpoint = `${baseUrl}/users/${userId}/details`;

console.log(endpoint); // "https://api.example.com/users/12345/details"

import { TYPE_EDIT } from '@/constants/type.ts'

const type = TYPE_EDIT

const url = 'https://api.example.com/userInfo'

const newUrl = url + `?type=${type}&model=1&share=1&fromModule=wechat`

console.log(urlUrl) // https://api.example.com/userInfo?type=TYPE_EDIT&model=1&share=1&fromModule=wechat

虽然模板字符串在一定程度上提高了可读性，但这种方法仍存在几个问题：

使用URL构造器

为了解决这些问题，现代JavaScript引入了URL构造器，可以更优雅和安全地处理URL。URL构造器提供了一种更结构化和直观的方法来构建和操作URL。

基本用法

const baseUrl = "https://api.example.com";

const userId = 12345;

const url = new URL(`/users/${userId}/details`, baseUrl);

console.log(url.href); // "https://api.example.com/users/12345/details"

添加查询参数

URL构造器还提供了一种简便的方法来添加和操作查询参数：

const baseUrl = "https://api.example.com";

const userId = 12345;



const url = new URL(`/users/${userId}/details`, baseUrl);

url.searchParams.append('type', 'EDIT');

url.searchParams.append('module', 'wechat');

console.log(url.href); // "https://api.example.com/users/12345/details?type=EDIT&module=wechat"

拼接数组参数

假设我们有一个URL，需要将一个数组作为查询参数添加到URL中。

const baseUrl = 'https://example.com';

const url = new URL(baseUrl);



const arrayParam = ['value1', 'value2', 'value3'];

// 将数组转换为逗号分隔的字符串

url.searchParams.set('array', arrayParam.join(','));



console.log(url.toString()); // https://example.com/?array=value1,value2,value3

解析数组参数

当我们获取URL并需要解析其中的数组参数时，可以使用URLSearchParams对象进行解析。

const urlString = 'https://example.com/?array=value1,value2,value3';

const url = new URL(urlString);



const arrayParamString = url.searchParams.get('array');

// 将逗号分隔的字符串转换回数组

const arrayParam = arrayParamString ? arrayParamString.split(',') : [];



console.log(arrayParam); // ['value1', 'value2', 'value3']

以下是一个完整示例，包括拼接和解析数组参数的操作：

// 拼接数组参数到URL

const baseUrl = 'https://example.com';

const url = new URL(baseUrl);



const arrayParam = ['value1', 'value2', 'value3'];

url.searchParams.set('array', arrayParam.join(','));



console.log(url.toString()); // https://example.com/?array=value1,value2,value3



// 解析数组参数从URL

const urlString = url.toString();

const parsedUrl = new URL(urlString);



const arrayParamString = parsedUrl.searchParams.get('array');

const parsedArrayParam = arrayParamString ? arrayParamString.split(',') : [];



console.log(parsedArrayParam); // ['value1', 'value2', 'value3']

处理多个同名参数

有时我们可能会遇到需要处理多个同名参数的情况，例如?array=value1&array=value2&array=value3。可以使用URLSearchParams的getAll方法：

// 拼接多个同名参数到URL

const url = new URL(baseUrl);



const arrayParam = ['value1', 'value2', 'value3'];

arrayParam.forEach(value => url.searchParams.append('array', value));



console.log(url.toString()); // https://example.com/?array=value1&array=value2&array=value3



// 解析多个同名参数从URL

const urlString = url.toString();

const parsedUrl = new URL(urlString);



const parsedArrayParam = parsedUrl.searchParams.getAll('array');



console.log(parsedArrayParam); // ['value1', 'value2', 'value3']

通过这些方法，可以更加优雅和简便地处理URL中的数组参数，提升代码的可读性和可维护性。

但实际情况往往比上面的示例更复杂，比如参数是一个对象、根据实际情况来设置参数的值、要处理undefined、'undefined'、0、'0'、Boolean、'true'、NaN等不同类型和异常的值，每次使用时都去处理显然是不合理的，这时候就可以将拼接和移除参数的函数封装成方法来使用。

/**

 * 获取URL查询参数并返回一个对象，支持数组

 * @param {string} urlString - 需要解析的URL字符串

 * @returns {Object} - 包含查询参数的对象

 */

function getURLParams(urlString) {

    const url = new URL(urlString);

    const params = new URLSearchParams(url.search);

    const result = {};



    for (const [key, value] of params.entries()) {

        if (result[key]) {

            if (Array.isArray(result[key])) {

                result[key].push(value);

            } else {

                result[key] = [result[key], value];

            }

        } else {

            result[key] = value;

        }

    }



    return result;

}



/**

 * 设置URL的查询参数，支持对象和数组

 * @param {string} urlString - 基础URL字符串

 * @param {Object} params - 需要设置的查询参数对象

 * @returns {string} - 带有查询参数的URL字符串

 */

function setURLParams(urlString, params) {

    const url = new URL(urlString);

    const searchParams = new URLSearchParams();



    for (const key in params) {

        if (params.hasOwnProperty(key)) {

            const value = params[key];

            if (Array.isArray(value)) {

                value.forEach(val => {

                    if (val !== undefined && !Number.isNaN(val)) {

                        searchParams.append(key, val);

                    } else {

                        console.warn(`Warning: The value of "${key}" is ${val}, which is invalid and will be ignored.`);

                    }

                });

            } else if (value !== undefined && !Number.isNaN(value)) {

                searchParams.append(key, value);

            } else {

                console.warn(`Warning: The value of "${key}" is ${value}, which is invalid and will be ignored.`);

            }

        }

    }



    url.search = searchParams.toString();

    return url.toString();

}



// 测试用例

const baseUrl = 'https://example.com';



// 测试 getURLParams 方法

const testUrl = 'https://example.com/?param1=value1&param2=value2&param2=value3';

const parsedParams = getURLParams(testUrl);

console.log(parsedParams); // { param1: 'value1', param2: ['value2', 'value3'] }



// 测试 setURLParams 方法

const params = {

    param1: 'value1',

    param2: ['value2', 'value3'],

    param3: undefined,

    param4: NaN,

    param5: 'value5',

    param6: 0,

};



const newUrl = setURLParams(baseUrl, params);

console.log(newUrl); // 'https://example.com/?param1=value1&param2=value2&param2=value3&param5=value5'