直接来看下着色器怎么写:

顶点着色器：

let vertexShader = /* glsl */`

varying vec2 vUv;

void main()

    {

      vUv = uv;

      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

    }

`;

主要是定义了 vUv 这个可传递变量，为了把内置的纹理坐标传递到 fragmentShader。

片元着色器：

 let fragShader = /* glsl */`

    uniform float progress;

    uniform float edgeWidth;

    uniform vec3 edgeColor;

    uniform sampler2D mainTexture; 

    uniform sampler2D noiseTexture;  

    varying vec2 vUv;void main(void){

    

        vec4 originalColor = texture2D(mainTexture, vUv);   

        float noiseValue = texture2D(noiseTexture, vUv).r;

        vec4 finalColor = originalColor;

        

        if(noiseValue > progress)

        {

            discard;

        }



        if(noiseValue + edgeWidth > progress){

          finalColor = vec4(edgeColor, 1.0);

        }



        gl_FragColor = finalColor;



	}

`;

其中 originColor 是原始材质贴图，类型是 vec4，noiseValue 是读取的噪波贴图取 r 通道的值，事实上，噪波图是灰度图，所以取 rgb 任意通道的都可以。然后对于 noiseValue ，随着 progress 逐渐增大，小于 progress 数值的噪波片元越来越少，模型出现。下面那句 + edgeWidth 则是把 edgeColor 填充到里面，原理是一样的。最后输出颜色。

这是出现的逻辑，如果是要消失呢？控制下边界条件就可以了：

function render() {

  requestAnimationFrame(render);

  

  controller.update();

  // 出现

  if (uniforms.progress.value < 0) {

    uniforms.progress = 0;

    stride = dissolveSpeed;

  }

  // 消失

  if (uniforms.progress.value > 1) {

     uniforms.progress = 1;

     stride = -dissolveSpeed;

  }

  uniforms.progress.value += stride;



  renderer.render(scene, camera);

}

效果立竿见影：

再想一遍

写着色器和通用程序不大一样，单纯按上面这么讲可能不是很清晰，我们更深度地分析下，培养一下 rgb 思维。

已知出现和消失是互为逆过程，通过 CPU 端程序重新改变变化方向即可，我们按照一个状态，关注边界条件，分别从正向和逆向进行思考，给出两个版本分别的代码。

按照上面说的，我们关注，比如就 出现 的状态吧，边界条件是 阈值 和 噪波值 的比较结果。也就是 progress 和 noiseValue。

用 Exclidraw 画下示意图：

考虑 出现 的情况，剩余的进度或者叫阈值（越来越小）, 与当前片元噪声值比较大小，如果更大则舍弃掉表示还没出现的部分；与当前值往前剪掉的部分比较，如果更大则使用这个过渡色；其他情况是已经出现的部分，直接保留就可以了。

写成代码：

void main() {

	...

	

	float restProgress = 1.0 - dissolveProgress;

	if(noiseValue < restProgress) {

		discard;

	}

	if(noiseValue - edgeWidth < restProgress ) {

		gl_FragColor = finalColor;

	}



	...

}

反向来思考，随着阈值增加，出现的图像越来多，往前减掉过渡值（edgeWidth）, 这部分呈现过渡色；小于当前 noiseValue 的部分舍弃，是还没出现的部分。

写成代码：

void main() {

	...

	if(noiseValue > dissolveProgress)

	{

		discard;

	}

	

	if(noiseValue + edgeWidth > dissolveProgress){

		gl_FragColor = vec4(edgeColor, 1.0);

	}

	...

}

这样，我们就用两种等价的方法实现了同一效果，后面的章节我们使用 glsl 函数把 条件判断 语句去掉。

这里其实叫 edgeWidth 有歧义，换成 edgeThickness 可能比较符合，如果这个值过大，就会超出变化范围出现异常，所以还是要把其限制在一个比较小的范围，这里为了调试先让它最大值等于 1。

edgeWidth 值过大:

其他格式

我们拿更常用的其他格式来研究一下。通常 web 端会使用 gltf, fbx 等通用格式，我们这里拿 web 端最通用的 gltf 格式模型来说明，其他通用模型类型道理一样。

对于 gltf 格式来说，加载完模型就赋予了材质，可能的类型有 MeshStandardMaterial, MeshPhongMaterial, MeshBasicMaterial 等，我用封面的士兵模型，使用的是 MeshStandardMaterial 类型的材质，接下来看如何修改内置着色器而实现效果。

ShaderChunk 和 ShaderLib

来看下 three 的目录，较新版本的 three 把核心代码安排在 src 目录下，/examples/jsm 目录下则是以 插件addons的形式引入的额外功能，比如 GLTFLoader 之类比较通用的功能。而内部着色器的实现在 src/renderers/shaders 目录下：

我们直接打开 ShaderLib.js 文件找下模型使用的 MeshStandardMaterial 的定义：

可以看到是复用了 meshphysical 的着色器，这对着色器还在 MeshPhysicalMaterial 材质里被使用，通过材质类定义的 defines 字段来开启相应的计算，这样的做法使得 MeshStandardMaterial 作为 MeshPhysicalMaterial 的回退选项。到 ShaderChunk目录下打开 meshphysical.glsl.js 看下宏定义：

OK，已经了解了材质定义和对应着色器的关系了，接下来就是如何把我们的逻辑加到相应着色器字符串里了。

onBeforeCompile

官方文档约等于没写，还是去看 examples 的代码吧，关键字 onBeforeCompile 搜索下：

右下角点进去看代码：

这下就明白了，顾名思义，这个函数可以在编译着色器程序之前允许我们插入自己的代码， 我们可以根据功能对相应模块进行覆写或者添加功能，我们不希望修改修改默认着色器的内容，直接把溶解效果加到最后，接下来看下怎么做。

调试

按照这个做法，非常依赖 javascript 的 replace 方法，我们需要小心操作，经过实验，把所有代码放到同一串里是没问题的，这里需要反复打印调试，如果有问题请使用双引号来使用原始字符串。

如果没有处理格式，直接塞进去不会对齐的，很好辨认：

接下来直接移植代码：

看到注释的那句话了吗，如果注释掉，并把阈值开到最大覆盖全部范围，可以明显看到和设置的颜色不一样，原因是因为之前的 shader 代码处理结果是转化到线性输出显示的，我们在标准着色器最后处理，一样要做线性转化。这个线性转化的意思是 gamma 变换的逆变换， gamma 变换是由于人眼对于颜色的感知非线性，非线性的原因和视锥细胞，视杆细胞数量比例不一样有关，省略一万字，大家有兴趣自己去搜~

没有线性转换：

线性转换后颜色就正常了：

拓展

再换一种写法

之前我们用直接舍弃片元的方法来实现过渡，接下来我们使用更 shader 风格的写法来重写，因为这个效果显示和消失具有二值性（要么有颜色要么透明），可以用 step(x,y) 函数来写，这个函数比较 y > x 的结果，true 则返回 1，否则返回 0 , 正好可以来表达透明度。

看代码，只有 fragmentShader 不一样：

这里的想法是先控制是否显示颜色，找的边界就是 noiseValue - edgeWidth，然后再判断使用原来的像素或者过渡色，如果大于 noiseValue 使用原来的像素，否则使用过渡的颜色，然后 mix 函数这里的第三个变量刚好是 step 函数的结果，所以就可以切换这两颜色了。

哦对，记得设置这个 material.transparent = true; ，否则会使用默认的混合颜色白色：

整活

昨天在沸点发了两张图，其实很简单，到这里把过渡色换成贴图采样就行了，比如这样：

学会了吗？赶紧搬到项目里惊艳领导吧。

思考

• 能否和环境做交互？

更新

代码： github.com/wwjll/three…

在线 Demo: wwjll.github.io/three-pract…

写文章不易，点赞收藏是最好的支持~

效果展示

• 先录制的视频，再转化为GIF图片导致展示效果有点延迟，实际效果还是挺丝滑的，感兴趣的可以上手尝试一下
  

人物模型和动画获取

• 在mixamo.com网站，需要先登录一下，可以直接使用Google邮箱登录，然后来到Characters页，下方有100多种人物模型，点击左边卡片可以选择自己喜欢的人物模型，或者如下图和我选的一样
  


• 然后来到Animations页，默认如下图红框内展示的也是刚才我们选择的人物模型，如果右侧展示不对，需要回到Characters页重新选择人物模型
  


• 因为动画比较多，这里我们直接在左上角搜索框内搜索自己想要的动作动画即可，首先搜索Idle，我这里使用的动画是Happy Idle，还将右侧的Overdrive的值从50调整到75，值越大动画频率越快，调整好后直接点击右上方的DOWNLOAD
  


• 弹出的弹窗里的内容都不想要修改，直接点击如下图右下角的DOWNLOAD，等待一会后，选择本地文件夹下载即可
  


• 接着左上角搜索Running，选择Running卡片，并且勾选右侧的In Place，让人物模型在原地跑动；如果不勾选的话，因为动画本身带有位移，会影响我们使用ThreeJS改变人物模型的position控制人物位移的；设置好后直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 继续左上角搜索Jump，选择Jump卡片，并且勾选右侧的In Place，让人物模型在原地跑动；设置好后直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 继续左上角搜索Death，选择Falling Back Death卡片，这个动画不需要其他调整，直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 这样就下载好了Idle(待机动作)、Running(跑步动作)、Jump(跳跃动作)、Death(死亡动作)的一组动作，以上动作的都可以根据个人喜好调整；如果打开mixamo.com网站比较慢或者下载有问题的话，也可以直接使用我下载好的actions里的动画模型
  

动画模型合并

• 打开Blender新建文件选择常规，我使用的版本是3.6.14的，不同版本可能存在差异
  


• 在右上角场景集合内，鼠标左键拖拽框选默认已有的Camera、Cube和Light，然后右键选择删除或者英文输入法下按下x键快速删除；后续在Blender里的所有操作，均需将输入法切换到英文输入；如果对Blender不是特别熟悉，可以优先阅读我之前整理的Blender学习整理这篇文章
  


• 选择左上角菜单栏里文件-->导入-->FBX(.fbx)，就会弹出导入设置弹窗
  


• 弹窗内只需选中之前下载好的Idle.fbx文件，然后直接点击右下角导入FBX即可
  


• 文件导入后，在右上角场景集合内，将动画下一级的目录鼠标双击重命名成idle
  


• 在中间布局窗口，将右上角的视图着色方式切换到材质预览，然后把观察点切换到-X方向，将下方窗口切换到非线性动画
  


• 点击动画右侧的按键，作用是下推动作块(将动作块作为新的片段下推到NLA堆栈顶部)，有点类似展开下拉菜单的效果，实际作用是创建NLA轨道，然后将idle动作放到一个单独的通道中
  


• 取消勾选通道对结果是否有影响(切换通道是否启用)
  


• 导入Running.fbx，导入流程和上述一致，导入后在右上角场景集合内重命名动画下一级目录为running
  


• 同样点击动画右侧的按键，下推动作块
  


• 同样取消勾选通道对结果是否有影响(切换通道是否启用)
  


• 鼠标点击选中idle动作，变成如下图颜色即被选中
  


• 选择上方添加-->添加动作片段
  


• 然后选中running
  


• 这时，在idle动作上方就添加了一个running动作通道，双击左侧如下图红框内重命名为running，左侧的名称就是我们后续使用ThreeJS控制人物模型切换动画时要使用的动作变量名
  


• 在右上角场景集合内，选中后面导入的模型右键后点击删除或者按下x键快速删除，将其删除
  


• 第一次删除可能删除不干净，场景集合内还有多余的文件，布局窗口也有遮挡物，这个遮挡物其实就是第二个模型里的人物建模，第一次只是把动画给删除掉了，所以需要再次如下图选中右侧红框内文件继续删除才能删除干净；注意删除的时候最好把导入的第一个模型收起来，防止误删
  


• 如上述操作后，就把idle动画和running动画合并到一个人物模型里，再重复上述操作，把Jump.fbx和Death.fbx文件依次导入进来，并且把jump动画和death动画添加到idle动画上方，每个动作一个通道；全部搞定后，可以点击如下图红框内的五角星，实心就代表被选中，依次选中每个动作，取消勾选通道影响，还可以按下键盘的空格播放各个动画
  


• 最后选择左上角文件-->导出-->glTF2.0(.glb/.gltf)，会弹出导出设置弹窗
  


• 弹窗内选择本地合适的文件夹，直接点击右下角的导出glTF2.0即可
  


• 可以参考我仓库里的models里的actions.glb
  

跨栏和跑道模型获取

• 在sketchfab.com网站，首先需要先登录，同样可以使用Google邮箱登录，然后在搜索框输入hurdle，按下回车
  


• 然后可以在下方很多的跨栏模型中选择自己喜欢的，我这里选择的是Wii - Wii Play - Hurdle
  


• 点击模型左下角的Download 3D Model，会弹出下载选项弹窗
  


• 弹窗里选择下载GLB格式的文件，这个格式会将所有内容(包含模型的结构、材质、动画和其他元数据等)打包在一起，文件大小可能会更大，但管理方便，所有内容都在一个文件中
  


• 下载到本地后，重命名为hurdle.glb
  


• 同样的方式，搜索track，我这边使用的模型是Dusty foot path way in grass garden，忘记了当时的筛选条件了，怎么就在搜索track的时候找到了这个模型；因为需要游戏里面的跑道不间断的出现，所以需要这种能够重复拼接的跑道模型，大家也可以自行选择喜欢的模型，下载好后，本地重命名为track.glb
  


• 如果访问sketchfab.com网站比较慢，或者下载有问题的话，可以直接使用我仓库里的models里的hurdle.glb和track.glb
  

模型合并

• 为了和之前的内容不搅合，就不在之前的actions.blender文件里添加其他两个模型，这里使用Blender新建一个常规文件，同样删除默认的Camera、Cube和Light
  


• 选择左上角文件-->导入-->glTF2.0(.glb/.gltf)，会弹出导入弹窗
  


• 选择之前保存的actions.glb，直接点击右下角的导入glTF2.0即可
  


• 导入后，同样把视图着色方式切换到材质预览，观察点切换到—X方向上
  


• 在右上角的场景集合内，将当前模型重命名为acitons
  


• 导入下载好的hurdle.glb，在右上角的场景集合内，刚导入的模型只有最里面的Object_2才是真的跨栏网格对象，外面两层结构没有作用，还可能出现外层结构的旋转缩放等属性和内部实际的网格对象的属性不一致，影响我们对实际网格对象的控制，所以最好删除掉
  


• 依次选中外面两层文件，按下x键删除，最后把Object_2重命名为hurdle
  


• hurdle模型尺寸比较大，旋转方向也不对，鼠标左键选中hurdle模型，然后在属性栏，将旋转的X调整成-1.0，将缩放的XYZ全部调整成0.1，这里不需要调整的特别精确，后续编码时还能使用ThreeJS继续调整模型的旋转和尺寸；如果布局窗口没有属性栏，可以按下n键显示/隐藏属性栏；输入值时，鼠标拖动三个输入框能够同时改变XYZ的值
  


• 继续选中hurdle模型，按下ctrl + a然后选择全部变换，需要把之前调整的旋转和缩放应用为自身数据
  


• 导入下载好的track.glb，可以切换右侧红框的眼睛图标显示/隐藏该对象来观察整体模型变化，会发现实际起作用的是Object_2和Object_3的两个网格对象，两个外层结构的显示/隐藏看似对模型的显示没有影响，其实它们是有属性是对模型有影响的，需要把它们的属性变换应用到自身
  


• 在右上角场景集合选中第一层结构，在属性栏会发现它有一些旋转和缩放，在布局窗口按下ctrl+a，然后选择应用全部变换；再选中第二层结构，同样按下ctrl+a应用全部变换
  


• 这时就会发现，外层的旋转和缩放都已经作用到Object_2和Object_3的两个网格对象上了，就可以依次选中两个外层结构，按下x键删除两个外层结构了；并且依次选中Object_2和Object_3的两个网格对象按下ctrl+a选择全部变换把外层结构的旋转和缩放应用到自身
  


• 然后在右上角场景集合内，鼠标先选中Object_3，按下shift键再选中Object_2，然后鼠标回到布局窗口，按下ctrl+p选择物体，这里发现Object_2变成了Object_3的子级了，理论上最后被选中的对象是父级，我想要的效果是Object_3变成了Object_2的子级，所以这里我又撤销(ctrl+z)重新先选中Object_2，按下shift键再选中Object_3，再按下ctrl+p选择物体绑定的父子关系；这里不清楚是因为我使用中文翻译的问题还是Blender有更新，有了解的大佬希望帮忙解释一下
  


• 将合并后的父级Object_2重命名为track
  


• 左键选中track模型，右键选择设置原点-->原点->几何中心
  


• 在选中track模型的情况下，继续按下shift+s选择选中项->游标，如果游标没有在世界原点，需要先将游标设置到世界原点
  


• 将观察点切换到顶视图，按下r+z绕着Z轴旋转，使跑道的长边和Y轴平行
  


• 再切换到-X方向，按下r+x绕着X轴旋转，使跑道的上面和Y轴平行
  


• 选择左上角文件-->导出-->glTF2.0(.glb/.gltf)
  


• 导出设置弹窗内，直接将合并后的模型导出到我们后续编码要用的文件夹内，其他无需设置，直接选择导出glTF2.0即可
  

编码渲染

• 使用vite搭建的项目工程，完整源码点这里code，整个渲染过程都在src/hooks/userDraw.js文件里
  


• 首先是ThreeJS的基础代码，放到了src/hooks/modules/base.js文件里，我这里只是往scene添加了一个背景纹理，最后就是把scene、camera、renderer暴露出来方便其他模块引用

import * as THREE from 'three';



/**

 * 基础代码

 */

export default function () {

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(

        75,

        window.innerWidth / window.innerHeight,

        0.1,

        1000

    );

    camera.position.set(0, 0, 5); // 设置相机位置

    const renderer = new THREE.WebGLRenderer({

        antialias: true // 开启抗锯齿

    });

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);



    // 加载背景纹理

    const textureLoader = new THREE.TextureLoader();

    textureLoader.load('./bg.jpeg', function (texture) {

        // 将纹理设置为场景背景

        scene.background = texture;

    });



    // 适配窗口

    window.addEventListener('resize', () => {

        camera.aspect = window.innerWidth / window.innerHeight; // 重置摄像机视锥体的长宽比

        camera.updateProjectionMatrix(); // 更新摄像机投影矩阵

        renderer.setSize(window.innerWidth, window.innerHeight); // 重置画布大小

    });



    return {

        scene,

        camera,

        renderer

    };

}

• 在src/hooks/modules/controls.js文件里添加控制器，并且需要禁用控制器

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';



/**

 * 控制器

*/

export default function (camera, renderer) {

    const orbitControls = new OrbitControls(camera, renderer.domElement); // 轨道控制器

    orbitControls.enabled = false; // 禁用控制器

    orbitControls.update(); // 更新控制器

}

• 在src/hooks/modules/light.js文件里添加环境光，上下方各添加了一个平行光

import * as THREE from 'three';



/**

 * 灯光

 */

export default function (scene) {

    const ambientLight = new THREE.AmbientLight(0x404040, 20); // 环境光

    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 5); // 平行光

    directionalLight.position.set(0, 10, 5);

    scene.add(directionalLight);

    const directionalLight2 = new THREE.DirectionalLight(0xffffff, 5); // 平行光

    directionalLight2.position.set(0, -10, -5);

    scene.add(directionalLight2);

}

• src/hooks/userDraw.js文件没有进一步优化，下面主要介绍几个核心部分
  
  
  
  • 把之前合并好的模型，使用GLTFLoader加载进来，然后初始化人物、跨栏、跑道等模型；因为模型的XYZ轴向和ThreeJS的没有对应上，所以需要给各个模型创建一个Gr0up方便单独控；获取跑道宽度时，因为获取的不是特别准确，所以又减去了2，让跑道叠加在一起了，不是特别严丝合缝；然后就是创建动画混合器，把动作保存起来了，然后默认播放待机动作；最后开始帧循环渲染
  
  
  
  

  // 加载人物模型
  
  const loader = new GLTFLoader();
  
  loader.load('./models/group.glb', function (gltf) {
  
      const children = [...gltf.scene.children];
  
  
  
      // 初始化人物模型
  
      global.characterGr0up.add(children[0]);
  
      global.characterGr0up.rotation.set(0, Math.PI / 2, 0); // 改变人物朝向
  
      scene.add(global.characterGr0up);
  
  
  
      // 初始化跨栏模型
  
      global.hurdleGr0up.add(children[1]);
  
      global.hurdleGr0up.scale.set(0.7, 0.7, 0.7); // 缩小跨栏
  
      global.hurdleGr0up.rotation.set(0, Math.PI / 2, 0); // 改变跨栏朝向
  
      global.hurdleGr0up.position.set(3, 0, 0); // 设置第一个跨栏位置
  
      global.hurdleArr.push(global.hurdleGr0up); // 添加第一个跨栏触发碰撞检测
  
      scene.add(global.hurdleGr0up);
  
  
  
      // 初始化跑道模型
  
      global.trackGr0up.add(children[2]);
  
      global.trackGr0up.rotation.set(0, Math.PI / 2, 0); // 改变跑道朝向
  
      scene.add(global.trackGr0up);
  
  
  
      // 获取跑道宽度
  
      const boundingBox = new THREE.Box3().setFromObject(global.trackGr0up); // 创建包围盒
  
      const size = new THREE.Vector3(); // 计算包围盒的尺寸
  
      boundingBox.getSize(size);
  
      global.trackWidth = size.x - 2; // 跑道宽度不是特别准确，需要模糊计算
  
      // 默认使用trackNum个跑道拼接
  
      for (let i = 0; i < trackNum; i++) {
  
          const newTrackModel = global.trackGr0up.clone(); // 克隆原始跑道模型
  
          newTrackModel.position.x = i * global.trackWidth; // 按照宽度依次排列
  
          scene.add(newTrackModel);
  
          global.trackArr.push(newTrackModel); // 保存引用
  
      }
  
  
  
      // 创建动画混合器
  
      global.animationMixer = new THREE.AnimationMixer(global.characterGr0up);
  
  
  
      // 将每个动画剪辑存储在actions对象中
  
      gltf.animations.forEach((clip) => {
  
          global.actions[clip.name] = global.animationMixer.clipAction(clip);
  
      });
  
  
  
      // 播放默认的 idle 动作
  
      global.currentAction = global.actions['idle'];
  
      global.currentAction.play();
  
  
  
      // 开始渲染循环
  
      animate();
  
  });
  
  

  
  
  
  
  • animate函数里主要功能有开启帧循环；更新动画混合器；在跳跃动作结束后切换回跑步动作；当人物处于跑步和跳跃动作时，更新人物位置及让相机跟随人物移动，并且在移动过程中，在间隔帧数内生成新的跨栏；更新跑道的位置，如果最左侧的跑道超出屏幕后，把它移动到最右侧；当人物处于跳跃动作时，更新人物Y轴位置；如果人物和跨栏发生碰撞时，切换到死亡动作并且开启死亡状态，防止键盘按键还能继续触发；当播放完死亡动作后，提示游戏结束，并结束帧数循环；渲染场景
  
  
  
  

  function animate() {
  
      global.frame = requestAnimationFrame(animate); // 开启帧循环
  
  
  
      global.animationMixer.update(global.clock.getDelta()); // 更新动画混合器
  
  
  
      // 检查 jump 动作是否完成，并恢复到 running 动作
  
      if (
  
          global.currentAction === global.actions['jump'] &&
  
          global.currentAction.time >= global.currentAction.getClip().duration
  
      ) {
  
          switchAction('running', 0.3);
  
      }
  
  
  
      // 当处于 running 动作时，移动相机
  
      if (
  
          global.currentAction === global.actions['running'] ||
  
          global.currentAction === global.actions['jump']
  
      ) {
  
          global.characterGr0up.position.x += moveSpeed;
  
          camera.position.x = global.characterGr0up.position.x;
  
  
  
          // 间隔随机帧数生成跨栏
  
          if (
  
              global.hurdleCountFrame++ >
  
              hurdleInterval + Math.random() * hurdleInterval
  
          ) {
  
              generateHurdles(global.hurdleGr0up, global.hurdleArr, scene); // 生成跨栏
  
              global.hurdleCountFrame = 0;
  
          }
  
      }
  
  
  
      // 更新跑道位置
  
      updateTrack(camera, global.trackArr, global.trackWidth);
  
  
  
      // 当人物处于跳跃动作时，更新人物位置
  
      updateCharacterPosition(
  
          global.animationMixer,
  
          global.clock,
  
          global.currentAction,
  
          global.actions,
  
          global.characterGr0up
  
      );
  
  
  
      // 碰撞检测
  
      if (
  
          checkCollisions(
  
              global.characterGr0up,
  
              global.characterBoundingBox,
  
              global.hurdlesBoundingBoxes,
  
              global.hurdleArr
  
          )
  
      ) {
  
          switchAction('death');
  
          global.isDeath = true;
  
      }
  
  
  
      // 如果 death 动作完成了，则停止帧动画
  
      if (
  
          global.currentAction === global.actions['death'] &&
  
          !global.currentAction.isRunning()
  
      ) {
  
          Modal.error({
  
              title: 'Game Over',
  
              width: 300
  
          });
  
          cancelAnimationFrame(global.frame);
  
      }
  
  
  
      // 渲染场景
  
      renderer.render(scene, camera);
  
  }
  
  

  
  
  
  
  • 切换动作函数主要是在一定时间内淡出前一个动作，并且淡入新动作，如果是跳跃动作或者死亡动作的话只执行一次
  
  
  
  

  function switchAction(newActionName, fadeDuration = 0.5) {
  
      const newAction = global.actions[newActionName];
  
      if (newAction && global.currentAction !== newAction) {
  
          global.previousAction = global.currentAction; // 保留当前的动作
  
          // 淡出前一个动作
  
          if (global.previousAction) {
  
              global.previousAction.fadeOut(fadeDuration);
  
          }
  
  
  
          // 如果切换到 jump 动作，设置播放一次并在结束后停止
  
          if (newActionName === 'jump') {
  
              newAction.loop = THREE.LoopOnce;
  
              newAction.clampWhenFinished = true; // 停止在最后一帧
  
          }
  
  
  
          // 如果切换到 death 动作，设置播放一次并在结束后停止
  
          if (newActionName === 'death') {
  
              newAction.loop = THREE.LoopOnce;
  
              newAction.clampWhenFinished = true; // 停止在最后一帧
  
          }
  
          global.currentAction = newAction; // 设置新的活动动作
  
  
  
          // 复位并淡入新动作
  
          global.currentAction.reset();
  
          global.currentAction.setEffectiveTimeScale(1);
  
          global.currentAction.setEffectiveWeight(1);
  
          global.currentAction.fadeIn(fadeDuration).play();
  
      }
  
  }
  
  

  
  
  
  
  • 键盘事件监听，给按键WSAD和方向键上下左右都添加了切换动作的功能，如果是死亡状态的，按键失效
  
  
  
  

  window.addEventListener('keydown', (event) => {
  
      if (global.isDeath) {
  
          return;
  
      }
  
      switch (event.code) {
  
          case 'keyD':
  
          case 'ArrowRight':
  
              switchAction('running');
  
              break;
  
          case 'keyA':
  
          case 'ArrowLeft':
  
              switchAction('idle');
  
              break;
  
          case 'keyW':
  
          case 'ArrowUp':
  
              switchAction('jump');
  
              break;
  
      }
  
  });
  
  

  
  


• src/configs/index.js文件配置了一些常量，可以用来控制游戏状态

// 初始跑道数量

export const trackNum = 3;



// 跨栏之间的间隔帧数

export const hurdleInterval = 50; // 50～100帧之间



// 跨栏之间的间隔最小距离

export const hurdleMinDistance = 5; // 5～10距离之间



// 人物移动的速度

export const moveSpeed = 0.03;

• src/utils/index.js文件主要是一些辅助函数

import * as THREE from 'three';

import { hurdleMinDistance } from '../configs/index';



/**

 * 生成新的跨栏

 *

 * @param {Object} oldModel - 要克隆的原始跨栏模型。

 * @param {Array} hurdleArr - 现有跨栏模型的数组。

 * @param {Object} scene - 要添加新跨栏模型的场景。

 * @return {undefined}

 */

export function generateHurdles(oldModel, hurdleArr, scene) {

    const newModel = oldModel.clone(); // 克隆原始跨栏模型



    const nextPosition =

        hurdleArr[hurdleArr.length - 1].position.x +

        hurdleMinDistance +

        Math.random() * hurdleMinDistance;



    newModel.position.set(nextPosition, 0, 0);

    hurdleArr.push(newModel);

    scene.add(newModel);

}



/**

 * 更新跑道位置

 *

 * @param {Object} camera - 具有位置属性的摄像机对象。

 * @param {Array} trackArr - 具有位置属性的轨道段对象数组。

 * @param {Number} trackWidth - 每个轨道段的宽度。

 * @return {undefined}

 */

export function updateTrack(camera, trackArr, trackWidth) {

    const cameraPositionX = camera.position.x; // 相机的 x 坐标

    // 遍历所有跑道段

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

        const trackSegment = trackArr[i];

        // 提前检测跑道段是否即将超出视野（增加一个提前量，比如半个跑道段的宽度）

        const threshold = cameraPositionX - trackWidth * 1.5;

        if (trackSegment.position.x < threshold) {

            // 找到当前最右边的跑道段

            let maxX = -Infinity;

            for (let j = 0; j < trackArr.length; j++) {

                if (trackArr[j].position.x > maxX) {

                    maxX = trackArr[j].position.x;

                }

            }

            // 将当前跑道段移动到最右边

            trackSegment.position.x = maxX + trackWidth;

        }

    }

}



/**

 * 人物跳跃时，更新人物Y轴位置

 *

 * @param {Object} animationMixer - 动画混合器对象。

 * @param {Object} clock - 用于获取增量时间的时钟对象。

 * @param {Object} currentAction - 当前正在执行的动作。

 * @param {Object} action - 可用动作的集合。

 * @param {Object} characterGr0up - 角色组对象。

 * @return {undefined}

 */

export function updateCharacterPosition(

    animationMixer,

    clock,

    currentAction,

    actions,

    characterGr0up

) {

    // 更新动画混合器

    animationMixer.update(clock.getDelta());



    // 检查动画状态并调整位置

    if (currentAction === actions['jump']) {

        // 根据跳跃动画的时间调整人物位置

        const jumpHeight = 0.8; // 你可以调整这个值

        characterGr0up.position.y =

            Math.sin(currentAction.time * Math.PI) * jumpHeight;

    } else {

        characterGr0up.position.y = 0; // 恢复到地面位置

    }

}



/**

 * 检测人物是否与跨栏发生了碰撞

 *

 * @param {Object} characterGr0up - 角色组对象。

 * @param {Object} characterBoundingBox - 角色的边界框对象。

 * @param {Array} hurdlesBoundingBoxes - 跨栏的边界框数组。

 * @param {Array} hurdleArr - 跨栏对象数组。

 * @return {Boolean} 是否发生了碰撞。

 */

export function checkCollisions(

    characterGr0up,

    characterBoundingBox,

    hurdlesBoundingBoxes,

    hurdleArr

) {

    // 更新人物的边界框

    if (characterGr0up) {

        characterBoundingBox.setFromObject(characterGr0up);

    }



    // 更新跨栏的边界框

    hurdlesBoundingBoxes = hurdleArr.map((hurdle) => {

        const box = new THREE.Box3();

        box.setFromObject(hurdle);

        return box;

    });



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

        if (characterBoundingBox.intersectsBox(hurdlesBoundingBoxes[i])) {

            return true; // 检测到碰撞

        }

    }

    return false; // 没有检测到碰撞

}

不足

• 跑道的纹理和材质没有渲染出来，不知道是否是导出的模型有问题，有懂的大佬可以帮忙看看


• 目前合并后的模型导出后体积比较大，还需要解决模型压缩的问题

这段时间 weapp-vite 的功能更新与优化

自从上次宣布 weapp-vite 的发布，已经过去三个月；weapp-vite 也逐渐迭代至 1.7.6 版本。

在此期间，我对其进行了多项功能的增强和优化，接下来我将为大家详细介绍近期的阶段性成果。

下面列出的功能皆为增强特性，开发者可自由选择启用或关闭，不影响原生小程序的兼容性。

核心功能更新

1. 自动构建 npm

在项目启动时，weapp-vite 会自动构建 npm 依赖，无需再手动点击微信开发者工具中的 构建 npm，提升了一定程度的开发体验。

详细信息请参考：自动构建 npm 文档。

2. 语法增强

2.1 JSON 文件增强

1. 支持注释

weapp-vite 支持在项目中的 JSON 文件中添加注释。例如：

{

  /* 这是一个组件 */

  "component": true,

  "styleIsolation": "apply-shared",

  "usingComponents": {

    // 导航栏组件

    "navigation-bar": "@/navigation-bar/navigation-bar"

  }

}

这些注释会在最终产物内被去除。

注意： project.config.json 和 project.private.config.json 不支持注释，因为这些文件直接由微信开发者工具读取。

2. 智能提示

我生成了许多小程序的 $schema 文件，部署在 vite.icebreaker.top 上。

通过指定 JSON 的 $schema 字段，实现了配置文件的智能提示功能，优化了一点点开发体验。

详见：JSON 配置文件的智能提示。

3. 别名支持

可以在 vite.config.ts 中配置 jsonAlias.entries 字段, 在 usingComponents 中使用别名定义路径，这些在构建时会自动转化为相对路径。

例如:

import type { UserConfig } from 'weapp-vite/config'

import path from 'node:path'



export default <UserConfig>{

  weapp: {

    jsonAlias: {

      entries: [

        {

          find: '@',

          replacement: path.resolve(__dirname, 'components'),

        },

      ],

    },

  },

}

那么就可以在 json 中这样编写:

{

  "usingComponents": {

    "navigation-bar": "@/navigation-bar/navigation-bar",

    "ice-avatar": "@/avatar/avatar"

  }

}

构建结果：

{

  "usingComponents": {

    "navigation-bar": "../../components/navigation-bar/navigation-bar",

    "ice-avatar": "../../components/avatar/avatar"

  }

}

4. 编程支持

weapp-vite 支持使用 JS/TS 文件来编写 JSON，你需要将 component.json 更改为 component.json.ts：

智能提示定义 API 都在 weapp-vite/json 中导出

比如普通写法:

import { defineComponentJson } from 'weapp-vite/json'



export default defineComponentJson({

  component: true,

  styleIsolation: 'apply-shared',

  usingComponents: {},

})

还支持引入异步数据、编译时变量或其他文件：

import type { Page } from 'weapp-vite/json'

import fs from 'node:fs/promises'

import path from 'node:path'

import shared0 from '@/assets/share'

import shared1 from './shared.json'



console.log('import.meta.env: ', import.meta.env)

console.log('import.meta.dirname: ', import.meta.dirname)

console.log('MP_PLATFORM: ', import.meta.env.MP_PLATFORM)

console.log(import.meta.env.DEV, import.meta.env.MODE, import.meta.env.PROD)

const key = await fs.readFile(

  path.resolve(import.meta.dirname, 'x.txt'),

  'utf8'

)



export default <Page>{

  usingComponents: {

    't-button': 'tdesign-miniprogram/button/button',

    't-divider': 'tdesign-miniprogram/divider/divider',

    'ice-avatar': '@/avatar/avatar',

  },

  ...shared0,

  ...shared1,

  key,

}

2.2 WXML 文件增强

事件绑定语法糖

weapp-vite 借鉴了 Vue 的事件绑定风格，为 WXML 增加了事件绑定语法糖：

这里我们以最常用的 tap 事件为例:

<!-- 原始代码 -->

<view @tap="onTap"></view>

<!-- 编译后 -->

<view bind:tap="onTap"></view>

支持的事件绑定增强规则如下：

详见：事件绑定增强文档。

这部分还能做的更多，欢迎与我进行讨论！

2.3 WXS 增强

编程支持（实验性）

weapp-vite 为 WXS 提供了 JS/TS 编程支持，支持通过更改 wxs 后缀为 wxs.js 或 wxs.ts 文件定义逻辑：

比如 index.wxs.ts:

export const foo = '\'hello world\' from hello.wxs.ts'



export const bar = function (d: string) {

  return d

}

另外内联 WXS 也支持使用 lang="js" 或 lang="ts" 直接启用编译功能:

<view>{{test.foo}}</view>

<view @tap="{{test.tigger}}">{{test.abc}}</view>



<wxs module="test" lang="ts">

const { bar, foo } = require('./index.wxs.js')

const bbc = require('./bbc.wxs')

export const abc = 'abc'



export function tigger(value:string){

  console.log(abc)

}



export {

  foo,

  bar,

  bbc

}

</wxs>

详情请参考：Wxs 增强。

3. 生成脚手架

weapp-vite 内置了生成脚手架工具，可快速生成一系列文件（如 js、wxml、wxss 和 json），用于提升开发效率。

最基础的用法只需要 weapp-vite g [outDir]

详情请参考：生成脚手架文档。

4. 分包支持

针对普通分包和独立分包的加载需求进行了优化，用户几乎无需额外配置即可实现分包加载。

尤其是独立分包的场景，创建了独立的编译上下文。

详情请参考：分包加载文档。

不忘初心，持续改进

weapp-vite 的初衷是实现对原生小程序的增强，现有原生小程序几乎可以零成本地迁移过来，并享受更高效的开发体验。

在此，希望各位开发者试用，欢迎反馈与参与。

如果您对文中的任何功能或增强有疑问、建议，欢迎到 Github Discussions 提出讨论！

前言

内存，作为计算机系统中存储数据和指令的关键资源，其管理效率直接影响着程序的性能和稳定性。在JavaScript的世界里，理解内存机制并非遥不可及，每一位开发者必须面对并掌握的实用技能。无论是初涉开发的新手，还是经验丰富的老手，深入理解JavaScript的内存机制都是通往更高层次编程能力的必经之路。

语言类型

静态语言

静态语言是指在编译时变量的数据类型就已经确定的语言，比如java定义一个整数类型需要先用int去定义一个变量。这类语言在编写程序时，要求开发者明确地声明变量的类型，并且在程序的整个生命周期内，该变量的类型都不能改变。换句话说，静态语言的类型检查是在编译阶段完成的，而不是在运行时，常见的静态语言包括Java、C++、C#、Go等。

动态语言

动态语言（Dynamic Language），也称为动态编程语言或动态类型语言，与静态语言相反，是指在程序运行时可以改变其结构的语言。这种改变可能包括引进新的函数、删除已有的函数，或者在运行时确定变量的类型等。动态语言的特点使得它们通常具有更高的灵活性和表达能力。常见的动态语言有我们学的JavaScript，还有Python,PHP等。

弱类型语言

弱类型语言是指变量的类型检查和转换方式相对宽松的一种编程语言。在弱类型语言中，变量可以在不明确声明类型的情况下直接使用，并且在运行时可以自动改变类型，或者可以在不同类型之间自由进行操作和转换，常见的弱类型语言包括JavaScript、Python等。

强类型语言

强类型语言（Strongly Typed Language）是一种在编译时期就进行类型检查的编程语言。这类语言要求变量在使用前必须明确声明其类型，并且在使用过程中，变量的类型必须保持一致，不能随意更改，常见的强类型语言包括Java、C++、C#、Go等。

数据类型

在每种语言里面都会有一个方法去查看数据的类型，js也不例外，我们可以用typeof去查看一个数据的类型，那我们来看看js中所有的数据类型吧

let a = 1

// console.log(typeof a);  //Number

a = 'hello'

// console.log(typeof a);  //String

a = true

// console.log(typeof a);  //boolean

a = null

// console.log(typeof a);  //object

a = undefined

// console.log(typeof a);  //undefined

a = Symbol(1)

// console.log(typeof a);  //symbol

a = 123n

// console.log(typeof a);  //bigint

a = []

// console.log(typeof a);  // object

a = {}

// console.log(typeof a);  //object

a = function () {}

// console.log(typeof a);  // function

我们可以看到所有判断类型的结果，大部分还正常，可是数组和null怎么也被判断成了object类型呢？

那我们要来了解一下typeof的判断原理，怎么给a判断出来它的数据类型的呢，其实是通过转换为计算机能看懂的二进制，然后通过二进制的数据进行的分析，所有的引用类型转换成二进制前三位一定是零，然后数组是引用类型，而typeof判断时如果前三位是零，那么就无脑认为它是object类型，但是函数是一个特例，在js中函数是一个对象，它做了一些特殊操作，所以能够判断出来，但是null是原始数据类型，为什么也能被判断为object类型呢，因为null在被读取成二进制时，它会被读取为全是零。而这个不是编程语言能够决定的，在计算机创建出来时就是这样设定的，因此这是一个bug，在设计这门语言的的bug,这个bug如果要修复并不困难，但是一旦修复，所有用js语言开发的项目都需要修复，影响太大，因此这个bug就被默认为js语言里面的规则。

内存空间

内存空间的分布

在v8引擎执行你写的代码时，会占用一部分的运行空间，而执行时占用的内存空间在v8的视角里会被分布成这个样子的

代码空间是专门存储你所写的代码，栈空间就是我们之前讲过的调用栈juejin.cn/post/743706…

用来存储函数被调用时，它的执行上下文，维护函数的调用关系，调用栈被分布的空间是比较小的。

堆空间（Heap Space）是内存管理的一个重要部分，它用于存储动态分配的对象和数据结构。

栈和堆之间的关系

让我们来看看栈和堆之间的关系

function foo() {

    var a = 1

    var b = a

    var c = {name: '熊总'}

    var d = c

  }

  foo()

此时foo函数已经完成编译，且已经执行到了b=a这一行，然后将一个对象赋值给c的时候，并不会直接把这个对象存储在函数的执行上下文里面，而是会在旁边在创建一个堆空间，将对象存储在堆空间里面，而这个c存储的就是对象在堆空间的地址值

然后在执行将c的值赋给d其实就是将对象的地址值赋值给了d，因此c和d的地址值指向的是同一个对象，并没有创建出一个新的对象，如果这个对象发生改变，那么c和d所代表的对象都会发生改变。

那为什么原始数据类型可以直接存储在栈当中，而引用数据类型却要存储在堆空间里面，因为原始类型数据所占的空间小，而引用数据类型所占的空间较大，比如一个对象，它可以有无数个属性，而原始类型，它就只有一个固定的值，所占内存不大，而栈被分布的空间比较小，堆被分布的空间比较大，因此原始数据类型可以直接存储在栈当中，而引用数据类型要存储在堆当中。

栈设计为什么这么小

首先我们要明白栈是用来维护函数的调用关系，而如果将栈设计的很大，那么程序员就可以写很长作用域链，并且不考虑代码的执行效率，写出不断嵌套的屎山代码。举个例子，栈就好比在你身上的空间，比如你的衣服裤子口袋，而堆就相当于一个分层的柜子，你把衣服上的口袋设计的很大，不要柜子，把你的东西全部装在口袋里面，首先看起来就十分丑陋，其次，你如果想将你想要的东西拿出来就要在口袋里翻来覆去的找，那样的效率是很低的

成果检验

function fn(person) {

    person.age = 19

    person = {

      name: '庆玲',

      age: 19

    }

    return person

  }

  const p1 = {

    name: '凤如',

    age: 18

  }

  const p2 = fn(p1)

  

  console.log(p1); 

  console.log(p2); 

请分析上面的代码中的p1和p2的输出结果

我们创建全局上下文进行编译执行，然后对函数fn进行编译，编译过程中形参和实参要进行统一，接下来，我们要开始执行函数fn了，首先它将p1所指向的对象age修改为了19，然后再函数中它将p1的地址值修改指向为了新对象，并将新对象返回，然后在全局接着执行，将返回的地址值赋给了p2，所以p2的值就是函数中新对象的地址值，接下来输出p1,此时函数已经执行完毕，在调用栈中被销毁了，那我们就在全局中查找，在全局中p1的指向就是#001，但是函数销毁前他将地址值为#001的对象age属性修改为19，所以p1打印出来的只有age改为了19，而p2就是返回的新对象的值，然我们看看结果是不是我们分析的那样

没错，p1的name为'凤如',age为19，p2的name为'庆玲'，age为19

最后来一道添加闭包的内存管理机制代码分析，如果不熟悉闭包的概念，可以先看看这篇文章
](juejin.cn/post/743814…)

function foo() {

    var myname = '彭于晏'

    let test1 = 1

    const test2 = 2

    var innerBar = {

      setName: function (name) {

        myname = name

      },

      getName: function () {

        console.log(test1);

        return myname

      }

    }

    return innerBar

  }

  var bar = foo()

  bar.setName('金城武')

  console.log(bar.getName());

总结

本文探讨了JavaScript的内存机制，包括语言类型（静态与动态、强类型与弱类型）、数据类型及typeof的判断原理，并解析了内存空间的分布，特别是栈空间和堆空间的作用及它们之间的关系。通过示例代码，阐述了原始数据类型和引用数据类型在内存中的存储差异，以及栈为何设计得相对较小的原因。最后，通过实际代码演示和结果分析，检验了对JavaScript内存机制的理解。本文是掌握JavaScript编程能力的关键一步，适合各层次开发者阅读。

一、 背景

页面截图功能在前端开发中，特别是营销场景相关的需求中, 是比较常见的。比如截屏分享，相对于普通的链接分享，截屏分享具有更丰富的展示、更多的信息承载等优势。最近在需求开发中遇到了相关的功能，所以调研了相关的实现和原理。

二、相关技术

前端要实现页面截图的功能，现在比较常见的方式是使用开源的截图npm库，一般使用比较多的npm库有以下两个：

• dom-to-image: github.com/tsayen/dom-…


• html2canvas: github.com/niklasvh/ht…

以上两种常见的npm库，对应着两种常见的实现原理。实现前端截图，一般是使用图形API重新绘制页面生成图片，基本就是SVG（dom-to-image）和Canvas（html2canvas）两种实现方案，两种方案目标相同，即把DOM转为图片，下面我们来分别看看这两类方案。

三、 dom-to-image

dom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。

（一）使用方式

首先，我们先来简单了解一下dom-to-image提供的核心api，有如下一些方法：

• toSvg (dom转svg)


• toPng (dom转png)


• toJpeg (dom转jpg)


• toBlob (dom转二进制格式)


• toPixelData (dom转原始像素值)

如需要生成一张png的页面截图，实现代码如下：

import domtoimage from "domtoimage"



const node = document.getElementById('node');

domtoimage.toPng(node,options).then((dataUrl) => {

    const img = new Image();

    img.src = dataUrl;

    document.body.appendChild(img);

})

toPng方法可传入两个参数node和options。

node为要生成截图的dom节点；options为支持的属性配置，具体如下：filter，backgroundColor，width，height，style，quality，imagePlaceholder，cacheBust。

（二）原理分析

dom to image的源码代码不是很多，总共不到千行，下面就拿toPng方法做一下简单的源码解析，分析一下其实现原理，简单流程如下：

整体实现过程用到了几个函数：

• toPng（调用draw，实现canvas=>png ）


• Draw（调用toSvg，实现dom=>canvas）


• toSvg（调用cloneNode和makeSvgDataUri，实现dom=>svg）


• cloneNode（克隆处理dom和css）


• makeSvgDataUri（实现dom=>svg data:url）


• toPng

toPng函数比较简单，通过调用draw方法获取转换后的canvas，利用toDataURL转化为图片并返回。

function toPng(node, options) {

  return draw(node, options || {})

    .then((canvas) => canvas.toDataURL());

}

• draw

draw函数首先调用toSvg方法获得dom转化后的svg，然后将获取的url形式的svg处理成图片，并新建canvas节点，然后借助drawImage()方法将生成的图片放在canvas画布上。

function draw(domNode, options) {

  return toSvg(domNode, options)

  // 拿到的svg是image data URL, 进一步创建svg图片

    .then(util.makeImage)

    .then(util.delay(100))

    .then((image) => {

      // 创建canvas，在画布上绘制图像并返回

      const canvas = newCanvas(domNode);

      canvas.getContext("2d").drawImage(image, 0, 0);

      return canvas;

    });

  // 新建canvas节点，设置一些样式的options参数

  function newCanvas(domNode) {

    const canvas = document.createElement("canvas");

    canvas.width = options.width || util.width(domNode);

    canvas.height = options.height || util.height(domNode);

    if (options.bgcolor) {

      const ctx = canvas.getContext("2d");

      ctx.fillStyle = options.bgcolor;

      ctx.fillRect(0, 0, canvas.width, canvas.height);

    }

    return canvas;

  }

}

• toSvg


• toSvg函数实现从dom到svg的处理，大概步骤如下：


• 递归去克隆dom节点（调用cloneNode函数）


• 处理字体，获取所有样式，找到所有的@font-face和内联资源，解析并下载对应的资源，将资源转为dataUrl给src使用。把上面处理完的css rules放入中，并把标签加入到clone的节点中去。
  
• 处理图片，将img标签的src的url和css中backbround中的url，转为dataUrl使用。


• 获取dom节点转化的dataUrl数据（调用makeSvgDataUri函数）

function toSvg(node, options) {

  options = options || {};

  // 处理imagePlaceholder、cacheBust值

  copyOptions(options);

  return Promise.resolve(node)

    .then((node) =>

      // 递归克隆dom节点

      cloneNode(node, options.filter, true))

  // 把字体相关的csstext放入style

    .then(embedFonts)

  // clone处理图片，将图片链接转换为dataUrl

    .then(inlineImages)

  // 添加options里的style放入style

    .then(applyOptions)

    .then((clone) =>

      // node节点转化成svg

      makeSvgDataUri(clone,

        options.width || util.width(node),

        options.height || util.height(node)));

  // 处理一些options的样式

  function applyOptions(clone) {

    ...

    return clone;

  }

}

• cloneNode

cloneNode函数主要处理dom节点，内容比较多，简单总结实现如下：

• 递归clone原始的dom节点，其中, 其中如果有canvas将转为image对象。


• 处理节点的样式，通过getComputedStyle方法获取节点元素的所有CSS属性的值，并将这些样式属性插入新建的style标签上面, 同时要处理“:before，:after”这些伪元素的样式, 最后处理输入内容和svg。

function cloneNode(node, filter, root) {

  if (!root && filter && !filter(node)) return Promise.resolve();

  return Promise.resolve(node)

    .then(makeNodeCopy)

    .then((clone) => cloneChildren(node, clone, filter))

    .then((clone) => processClone(node, clone));

  function makeNodeCopy(node) {

  // 将canvas转为image对象

    if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());

    return node.cloneNode(false);

  }

  // 递归clone子节点

  function cloneChildren(original, clone, filter) {

    const children = original.childNodes;

    if (children.length === 0) return Promise.resolve(clone);

    return cloneChildrenInOrder(clone, util.asArray(children), filter)

      .then(() => clone);

    function cloneChildrenInOrder(parent, children, filter) {

      let done = Promise.resolve();

      children.forEach((child) => {

        done = done

          .then(() => cloneNode(child, filter))

          .then((childClone) => {

            if (childClone) parent.appendChild(childClone);

          });

      });

      return done;

    }

  }

  function processClone(original, clone) {

    if (!(clone instanceof Element)) return clone;

    return Promise.resolve()

      .then(cloneStyle)

      .then(clonePseudoElements)

      .then(copyUserInput)

      .then(fixSvg)

      .then(() => clone);

    // 克隆节点上的样式。

    function cloneStyle() {

       ...

    }

    // 提取伪类样式，放到css

    function clonePseudoElements() {

       ...

    }

    // 处理Input、TextArea标签

    function copyUserInput() {

       ...

    }

    // 处理svg

    function fixSvg() {

       ...

    }

  }

}

• makeSvgDataUri

首先，我们需要了解两个特性：

• SVG有一个元素，这个元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助标签，我们可以直接在SVG内部嵌入XHTML元素，举个例子：

<svg xmlns="http://www.w3.org/2000/svg">

<foreignObject width="120" height="50">

<body xmlns="http://www.w3.org/1999/xhtml">

<p>文字。</p>

</body>

</foreignObject>

</svg>

可以看到标签里面有一个设置了xmlns=“http://www.w3.org/1999/xhtml”…标签，此时标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。

• XMLSerializer对象能够把一个XML文档或Node对象转化或“序列化”为未解析的XML标记的一个字符串。

基于以上特性，我们再来看一下makeSvgDataUri函数，该方法实现node节点转化为svg，就用到刚刚提到的两个重要特性。

首先将dom节点通过

XMLSerializer().serializeToString() 序列化为字符串，然后在

标签 中嵌入转换好的字符串，foreignObject 能够在 svg

内部嵌入XHTML，再将svg处理为dataUrl数据返回，具体实现如下：

function makeSvgDataUri(node, width, height) {

  return Promise.resolve(node)

    .then((node) => {

      // 将dom转换为字符串

      node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");

      return new XMLSerializer().serializeToString(node);

    })

    .then(util.escapeXhtml)

    .then((xhtml) => `<foreignObject x="0" y="0" width="100%" height="100%">${xhtml}</foreignObject>`)

  // 转化为svg

    .then((foreignObject) =>

    // 不指定xmlns命名空间是不会渲染的

      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${

        foreignObject}</svg>`)

  // 转化为data:url

    .then((svg) => `data:image/svg+xml;charset=utf-8,${svg}`);

}

四、 html2canvas

html2canvas库主要使用的是Canvas实现方式，主要过程是手动将dom重新绘制成canvas，因此，它只能正确渲染可以理解的属性，有许多CSS属性无法正确渲染。

支持的CSS属性的完整列表：

html2canvas.hertzen.com/features/

浏览器兼容性：

Firefox 3.5+ Google Chrome Opera 12+ IE9+ Edge Safari 6+

官方文档地址：

html2canvas.hertzen.com/documentati…

（一）使用方式

// dom即是需要绘制的节点, option为一些可配置的选项

import html2canvas from 'html2canvas'

  html2canvas(dom, option).then(canvas=>{

  canvas.toDataURL()

})

常用的option配置：

全部配置文档：

html2canvas.hertzen.com/configurati…

（二）原理分析

html2canvas的内部实现相对dom-to-image来说要复杂一些, 基本原理是读取DOM元素的信息，基于这些信息去构建截图，并呈现在canvas画布中。

其中重点就在于将dom重新绘制成canvas的过程，该过程整体的思路是：遍历目标节点和目标节点的子节点，遍历过程中记录所有节点的结构、内容和样式，然后计算节点本身的层级关系，最后根据不同的优先级绘制到canvas画布中。

由于html2canvas的源码量比较大，可能无法像dom-to-image一样详细的分析，但还是可以大致了解一下整体的流程，首先可以看一下源码中src文件夹中的代码结构，如下图：

简单解析一下：

• index：入口文件，将dom节点渲染到一个canvas中，并返回。


• core：工具函数的封装，包括对缓存的处理函数、Context方法封装、日志模块等。


• css：对节点样式的处理，解析各种css属性和特性，进行处理。


• dom：遍历dom节点的方法，以及对各种类型dom的处理。


• render：基于clone的节点生成canvas的处理方法。

基于以上这些核心文件，我们来简单了解一下html2canvas的解析过程, 大致的流程如下:

• 构建配置项

在这一步会结合传入的options和一些defaultOptions，生成用于渲染的配置数据renderOptions。在过程中会对配置项进行分类，比如resourceOptions（资源跨域相关）、contextOptions（缓存、日志相关）、windowOptions（窗口宽高、滚动配置）、cloneOptions（对指定dom的配置）、renderOptions（render结果的相关配置，包括生成图片的各种属性）等，然后分别将各类配置项传到下接下来的步骤中。

• clone目标节点并获取样式和内容

在这一步中，会将目标节点到指定的dom解析方法中，这个过程会clone目标节点和其子节点，获取到节点的内容信息和样式信息，其中clone dom的解析方法也是比较复杂的，这里不做详细展开。获取到目标节点后，需要把克隆出来的目标节点的dom装载到一个iframe里，进行一次渲染，然后就可以获取到经过浏览器视图真实呈现的节点样式。

• 解析目标节点

目标节点的样式和内容都获取到了之后，就需要把它所承载的数据信息转化为Canvas可以使用的数据类型。在对目标节点的解析方法中，递归整个DOM树，并取得每一层节点的数据，对于每一个节点而言需要绘制的部分包括边框、背景、阴影、内容，而对于内容就包含图片、文字、视频等。在整个解析过程中，对目标节点的所有属性进行解析构造，转化成为指定的数据格式，基础数据格式可见以下代码:

class ElementContainer {

  // 所有节点上的样式经过转换计算之后的信息

  readonly styles: CSSParsedDeclaration;

  // 节点的文本节点信息, 包括文本内容和其他属性

  readonly textNodes: TextContainer[] = [];

  // 当前节点的子节点

  readonly elements: ElementContainer[] = [];

  // 当前节点的位置信息（宽/高、横/纵坐标）

  bounds: Bounds;

  flags = 0;

  ...

}

具体到不同类型的元素如图片、IFrame、SVG、input等还会extends ElementContainer拥有自己的特定数据结构，在此不详细贴出。

• 构建内部渲染器

把目标节点处理成特定的数据结构之后，就需要结合Canvas调用渲染方法了，Canvas绘图需要根据样式计算哪些元素应该绘制在上层，哪些在下层，那么这个规则是什么样的呢？这里就涉及到CSS布局相关的一些知识。

默认情况下，CSS是流式布局的，元素与元素之间不会重叠。不过有些情况下，这种流式布局会被打破，比如使用了浮动(float)和定位(position)。因此需要需要识别出哪些脱离了正常文档流的元素，并记住它们的层叠信息，以便正确地渲染它们。

那些脱离正常文档流的元素会形成一个层叠上下文。元素在浏览器中渲染时，根据W3C的标准，所有的节点层级布局，需要遵循层叠上下文和层叠顺序的规则，具体规则如下：

在了解了元素的渲染需要遵循这个标准后，Canvas绘制节点的时候，需要生成指定的层叠数据，就需要先计算出整个目标节点里子节点渲染时所展现的不同层级，构造出所有节点对应的层叠上下文在内部所表现出来的数据结构，具体数据结构如下:

// 当前元素

element: ElementPaint;

// z-index为负, 形成层叠上下文

negativeZIndex: StackingContext[];

// z-index为0、auto、transform或opacity, 形成层叠上下文

zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];

// 定位和z-index形成的层叠上下文

positiveZIndex: StackingContext[];

// 没有定位和float形成的层叠上下文

nonPositionedFloats: StackingContext[];

// 没有定位和内联形成的层叠上下文

nonPositionedInlineLevel: StackingContext[];

// 内联节点

inlineLevel: ElementPaint[];

// 不是内联的节点

nonInlineLevel: ElementPaint[];

基于以上数据结构，将元素子节点分类，添加到指定的数组中，解析层叠信息的方式和解析节点信息的方式类似，都是递归整棵树，收集树的每一层的信息，形成一颗包含层叠信息的层叠树。

• 绘制数据

基于上面两步构造出的数据，就可以开始调用内部的绘制方法，进行数据处理和绘制了。使用节点的层叠数据，依据浏览器渲染层叠数据的规则，将DOM元素一层一层渲染到canvas中，其中核心具体源码如下：

async renderStackContent(stack: StackingContext): Promise<void> {

  if (contains(stack.element.container.flags, FLAGS.DEBUG_RENDER)) {

  debugger;

  }

  // 1. the background and borders of the element forming the stacking context.

  await this.renderNodeBackgroundAndBorders(stack.element);

  // 2. the child stacking contexts with negative stack levels (most negative first).

  for (const child of stack.negativeZIndex) {

  await this.renderStack(child);

  }

  // 3. For all its in-flow, non-positioned, block-level descendants in tree order:

  await this.renderNodeContent(stack.element);

  for (const child of stack.nonInlineLevel) {

  await this.renderNode(child);

  }

  // 4. All non-positioned floating descendants, in tree order. For each one of these,

  // treat the element as if it created a new stacking context, but any positioned descendants and descendants

  // which actually create a new stacking context should be considered part of the parent stacking context,

  // not this new one.

  for (const child of stack.nonPositionedFloats) {

  await this.renderStack(child);

  }

  // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  for (const child of stack.nonPositionedInlineLevel) {

  await this.renderStack(child);

  }

  for (const child of stack.inlineLevel) {

  await this.renderNode(child);

  }

  // 6. All positioned, opacity or transform descendants, in tree order that fall int0 the following categories:

  // All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

  // For those with 'z-index: auto', treat the element as if it created a new stacking context,

  // but any positioned descendants and descendants which actually create a new stacking context should be

  // considered part of the parent stacking context, not this new one. For those with 'z-index: 0',

  // treat the stacking context generated atomically.

  //

  // All opacity descendants with opacity less than 1

  //

  // All transform descendants with transform other than none

  for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {

  await this.renderStack(child);

  }

  // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index

  // order (smallest first) then tree order.

  for (const child of stack.positiveZIndex) {

  await this.renderStack(child);

  }

}

在renderStackContent方法中，首先对元素本身调用renderNodeContent和renderNodeBackgroundAndBorders进行渲染处理。

然后处理各个分类的子元素，如果子元素形成了层叠上下文，就调用renderStack方法，这个方法内部继续调用了renderStackContent，这就形成了对于层叠上下文整个树的递归。

如果子元素是正常元素没有形成层叠上下文，就直接调用renderNode，renderNode包括两部分内容，渲染节点内容和渲染节点边框背景色。

async renderNode(paint: ElementPaint): Promise<void> {

  if (paint.container.styles.isVisible()) {

    // 渲染节点的边框和背景色

    await this.renderNodeBackgroundAndBorders(paint);

    // 渲染节点内容

    await this.renderNodeContent(paint);

  }

}

其中renderNodeContent方法是渲染一个元素节点里面的内容，其可能是正常元素、文字、图片、SVG、Canvas、input、iframe，对于不同的内容也会有不同的处理。

以上过程，就是html2canvas的整体内部流程，在了解了大致原理之后，我们再来看一个更为详细的源码流程图，对上述流程进行一个简单的总结。

五、 常见问题总结

在使用html2canvas的过程中，会有一些常见的问题和坑，总结如下:

（一）截图不全

要解决这个问题，只需要在截图之前将页面滚动到顶部即可：

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

（二）图片跨域

插件在请求图片的时候会有图片跨域的情况，这是因为，如果使用跨域的资源画到canvas中，并且资源没有使用CORS去请求，canvas会被认为是被污染了，canvas可以正常展示，但是没办法使用toDataURL()或者toBlob()导出数据，详情可参考：developer.mozilla.org/en-US/docs/…

解决方案：在img标签上设置crossorigin，属性值为anonymous，可以开启CROS请求。当然，这种方式的前提还是服务端的响应头Access-Control-Allow-Origin已经被设置过允许跨域。如果图片本身服务端不支持跨域，可以使用canvas统一转成base64格式，方法如下。

function getUrlBase64_pro( len,url ) {

  //图片转成base64

  var canvas = document.createElement("canvas"); //创建canvas DOM元素

  var ctx = canvas.getContext("2d");

  return new Promise((reslove, reject) => {

  var img = new Image();

  img.crossOrigin = "Anonymous";

  img.onload = function() {

  canvas.height = len;

  canvas.width = len;

  ctx.drawImage(img, 0, 0, len, len);

  var dataURL = canvas.toDataURL("image/");

  canvas = null;

  reslove(dataURL);

  };

  img.onerror = function(err){

  reject(err)

  }

  img.src = url;

  });

}

（三）截图与当前页面有区别

方式一：如果要从渲染中排除某些elements，可以向这些元素添加data-html2canvas-ignore属性，html2cnavas会将它们从渲染中排除，例如，如果不想截图iframe的部分，可以如下：

html2canvas(ele,{

useCORS: true,

ignoreElements: (element: any) => {

  if (element.tagName.toLowerCase() === 'iframe') {

  return element;

  }

  return false;

  },

})

方式二：可以将需要转化成图片的部分放在一个节点内，再把整个节点，透明度设置为0， 其他部分层级设置高一些，即可实现截图指定区域。

六、 小结

本文针对前端截图实现的方式，对两个开源库dom-to-image和html2canvas的使用和原理进行了简单的使用方式、实现原理方面，进行介绍和分析。

参考资料：

1.dom-to-image原理

2.html2image原理简述

3.浏览器端网页截图方案详解

4.html2canvas

5.html2canvas实现浏览器截图的原理（包含源码分析的通用方法）

点赞 + 关注 + 收藏 = 学会了

本文简介

现在大部分网站都会有图片，不管这个图片是用来展示的，还是需要上传到服务器的。

但图片的体积往往比文字大，会占用更多的服务器空间，也会消耗用户更多的流量。所以在适当范围内压缩一下图片是很有必要的。

今天介绍一款纯前端的图片压缩工具：compressor.js。

虽然这是一款有损的图片压缩工具，但压缩质量还是挺不错的，尤其是它可以在前端运行，对于要上传图片到服务器的业务，可以考虑一下用 compressor.js。

你也可以用 Compressor.js 做个图片压缩的工具网站，用户多了就开个百度或者谷歌的广告，也能赚点奶茶钱。

先体验一下 compressor.js 的效果：fengyuanchen.github.io/compressorj…

这是 compressor.js 的代码仓库：github.com/fengyuanche…

动手试试

安装 compressor

npm

npm 通过这条命令安装。

npm install compressorjs

然后在需要使用到 compressor.js 的页面中引入。

import Compressor from 'compressorjs';

CDN

如果你不使用打包工具，也可以直接通过 CDN 在 HTML 中引入 Compressor.js。

<script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>

​

基础用法

要使用 compressor.js 压缩图片，首先通过 new Compressor 创建一个压缩实例，并传入文件和一些配置参数。成功后会返回一个压缩后的图片对象。

接下来我用一个小例子演示一下。这个例子通过上传一张图片，然后使用 compressor 压缩它，再返回一个下载链接。

<!-- 文件上传控件 -->

<input type="file" id="fileInput" accept="image/*">

​

<!-- 下载压缩后的图片 -->

<div id="downloadLink">

  <a id="downloadCompressed" style="display:none;" download>点击下载压缩后的图片</a>

</div>

​

<!-- 引入 Compressor.js -->

<script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>

​

<script>

  // 获取 file input 和下载链接元素

  const fileInput = document.getElementById('fileInput')

  const downloadCompressed = document.getElementById('downloadCompressed')

​

  // 当文件选择发生变化时触发

  fileInput.addEventListener('change', function(event) {

    const file = event.target.files[0] // 获取上传的文件

​

    if (!file) {

      return // 如果没有选择文件，则不继续执行

    }

​

    // 使用 Compressor.js 压缩图片

    new Compressor(file, {

      success(result) {

        downloadCompressed.href = URL.createObjectURL(result)

​

        // 显示下载链接

        downloadCompressed.style.display = 'inline'

      },

      error(err) {

        console.error('压缩失败:', err)

      },

    })

  })

</script>

在这个例子中，使用了 <input type="file"> 作为上传图片的元素，获取到用户上传的图片后，使用 new Compressor(file[, options]) 来压缩图片，new Compressor 接收2个参数，第一个参数是图片文件，第二个参数是一系列参数，在本例中的所有参数都使用了默认值。最后通过 success() 处理压缩成功后的操作，用 error() 处理压缩失败后的操作。

当压缩成功后就进入 success(result) 里了，这里的 result 返回了压缩成功后的图片对象，通过 URL.createObjectURL(result) 的方式将返回压缩成功后的图片地址。将该地址赋值到 <a> 标签里就能给用户手动点击下载了。

挺简单吧～

配置压缩强度

在前面的例子中，我们通过 new Compressor(file[, options]) 压缩图片，但压缩的强度默认是 80%，在压缩 JPG 时默认是 92%。如果你希望将图片体积压缩得更小（画质会更差），可以在 options 这个参数里配置一项 quality。quality 接收的值是 0～1，quality 的数值越小压缩出来的图片体积就越小，压缩力度就越大。

具体用法：

// 省略部分代码

new Compressor(file, {

  quality: 0.6, // 设置压缩质量为 60%

  success(result) {}, // 压缩成功后执行这里的代码

  error(err) {} // 压缩失败后执行这里的代码

})

设置下载文件的文件名

在前面的例子中，我们下载压缩成功后的图片，文件名看上去是一堆乱码。

比如，我想将压缩后的图片名改成在原图的文件名后面拼上“-德育处主任”，可以这么做。

// 省略部分代码

​

new Compressor(file, {

  quality: 0.6, // 设置压缩质量为 60%

  success(result) {

    // 获取文件名，并给压缩后的文件加上 "-德育处主任" 后缀

    const originalName = file.name;

    const extensionIndex = originalName.lastIndexOf('.');

    const nameWithoutExtension = originalName.substring(0, extensionIndex);

    const extension = originalName.substring(extensionIndex);

    downloadCompressed.download = nameWithoutExtension + '-德育处主任' + extension;

    downloadCompressed.href = URL.createObjectURL(result)

​

    // 显示下载链接

    downloadCompressed.style.display = 'inline'

  },

  error(err) {

    console.error('压缩失败:', err)

  }

})

压缩网络图片

compressor.js 的第一个参数必须是一个 File 对象（通常是通过文件上传获取的），它不支持直接传入网络图片的 URL。因为它需要操作的是一个本地的 File 或 Blob 对象，而不是通过 URL 获取的资源。

但我们可以先通过 JavaScript 将网络图片转换为一个 File 或 Blob 对象，然后再将其传递给 compressor.js。

我上传了一张图片到免费的图床上（这是将我公众号的url转成艺术二维码的图片）： i.imgur.com/zyurGlf_d.w…

function urlToBlob(url) {

  return fetch(url)

    .then((response) => response.blob())

    .then((blob) => {

      // Step 2: 将 Blob 传递给 Compressor.js

      new Compressor(blob, {

        quality: 0.8, // 设置压缩质量

        success(result) {

          console.log('压缩后的图片:', result)

        },

        error(err) {

          console.error('压缩出错:', err)

        },

      })

    })

}

​

const imageUrl = 'https://i.imgur.com/zyurGlf_d.webp?maxwidth=760&fidelity=grand'

​

urlToBlob(imageUrl)

通过 fetch 读取这张图片，然后将读取回来的图片执行 .blob() 方法将其转换成 blob 再丢给 compressor.js 压缩。

以上就是本文的内容啦，如果你想在线体验一下 compressor.js 的压缩能力，可以试试这个网站 worklite.vip/

点赞 + 关注 + 收藏 = 学会了

前言

作为一个 uniapp 初学者，恰巧遇到微信短剧播放器接入的需求，在网上检索许久并没有发现傻瓜式教程。于是总结 uni-app 官网文档及微信开放文档，自行实践后，总结出几个步骤，希望为大家提供些帮助。实践后发现其实确实比较简单，大佬们可能也懒得写文档，那么就由我这个小白大概总结下。本文档仅涉及剧目提审成功后的播放器接入，其余相关问题请参考微信官方文档。

小程序申请插件

参考文档：developers.weixin.qq.com/miniprogram…

首先，需要在小程序后台，申请 appid 为 wx94a6522b1d640c3b 的微信插件，可以在微信小程序管理后台进行添加，路径是 设置 - 第三方设置 - 插件管理 - 添加插件，搜索 wx94a6522b1d640c3b 后进行添加：

uni-app 项目添加微信插件

参考文档：uniapp.dcloud.net.cn/tutorial/mp…

添加插件完成后，在 manifest.json 中，点击 源码视图，找到如下位置并添加红框内的代码，此步骤意在将微信小程序插件引入项目。

/* 添加微短剧播放器插件 */

 "plugins" : {

    "playlet-plugin" : {

         "version" : "latest",

         "provider" : "wx94a6522b1d640c3b"

     }

 }

manifest.json 中完成添加后，需要在 pages.json 中找一个页面（我这边使用的是一个新建的空白页面）挂载组件，挂载方式如下图红框中所示，需注意，这里的组件名称需要与 manifest.json 中定义的一致：

{

	"path": "newPage/newPage",

	"style": {

		"navigationBarTitleText": "",

		"enablePullDownRefresh": false,

		"navigationStyle": "custom",

		"app-plus": {

			"bounce": "none"

		},

		"mp-weixin": {

			"usingComponents": {

				"playlet-plugin": "plugin://playlet-plugin/playlet-plugin"

			}

		}

	}

}

挂载空页面是个笨办法，目前我这边尝试如果不挂载的话，会有些问题，有大神知道别的方法可以在评论区指点一下～

App.vue 配置

参考文档：developers.weixin.qq.com/miniprogram…

首先，找个地方新建一个 playerManager.js，我这边建在了 common 文件夹下。代码如下（代码参考微信官方文档给出的 demo）：

	var plugin = requirePlugin("playlet-plugin");

	// 点击按钮触发此函数跳转到播放器页面

	function navigateToPlayer(obj) {

	    // 下面的${dramaId}变量,需要替换成小程序管理后台的媒资管理上传的剧目的dramaId，变量${srcAppid}是提审方appid，变量${serialNo}是某一集，变量${extParam}是扩展字段，可通过

	    const { extParam, dramaId, srcAppid, serialNo } = obj

	    wx.navigateTo({

	      url: `plugin-private://wx94a6522b1d640c3b/pages/playlet/playlet?dramaId=${dramaId}&srcAppid=${srcAppid}&serialNo=${serialNo}&extParam=${extParam || ''}`

	    })

	}

	const proto = {

	  _onPlayerLoad(info) {

	    const pm = plugin.PlayletManager.getPageManager(info.playerId)

	    this.pm = pm

	    // encryptedData是经过开发者后台加密后(不要在前端加密)的数据，具体实现见下面的加密章节

	    this.getEncryptData({serialNo: info.serialNo}).then(res => {

	      // encryptedData是后台加密后的数据，具体实现见下面的加密章节

	      pm.setCanPlaySerialList({

	        data: res.encryptedData,

	        freeList: [{start_serial_no: 1, end_serial_no: 10}], // 1~10集是免费剧集

	      })

	    })

	    pm.onCheckIsCanPlay(this.onCheckIsCanPlay)

	    // 关于分享的处理

	    // 开启分享以及withShareTicket

	    pm.setDramaFlag({

	      share: true,

	      withShareTicket: true

	    })

	    // 获取分享参数,页面栈只有短剧播放器一个页面的时候可获取到此参数

	    // 例如从分享卡片进入、从投流广告直接跳转到播放器页面，从二维码直接进入播放器页面等情况

	    plugin.getShareParams().then(res => {

	      console.log('getLaunch options query res', res)

	      // 关于extParam的处理，需要先做decodeURIComponent之后才能得到原值

	      const extParam = decodeURIComponent(res.extParam)

	      console.log('getLaunch options extParam', extParam)

	      // 如果设置了withShareTicket为true，可通过文档的方法获取更多信息

	      // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html

	      const enterOptions = wx.getEnterOptionsSync()

	      console.log('getLaunch options shareTicket', enterOptions.shareTicket)

	    }).catch(err => {

	      console.log('getLaunch options query err', err)

	    })

	    // extParam除了可以通过在path传参，还可以通过下面的接口设置

	    pm.setExtParam('hellotest')

	    // 分享部分end

	  },

	  onCheckIsCanPlay(param) {

	    // TODO: 碰到不可以解锁的剧集，会触发此事件，这里可以进行扣币解锁逻辑，如果用户无足够的币，可调用下面的this.isCanPlay设置

	    console.log('onCheckIsCanPlay param', param)

	    var serialNo = param.serialNo

	    this.getEncryptData({serialNo: serialNo}).then(res => {

	      // encryptedData是后台加密后的数据，具体实现见下面的加密章节

	      this.pm.isCanPlay({

	        data: res.encryptedData,

	        serialNo: serialNo,

	      })

	    })

	  },

	  getEncryptData(obj) {

	    const { serialNo } = obj

	    // TODO: 此接口请求后台，返回下面的setCanPlaySerialList接口需要的加密参数

	    const { srcAppid, dramaId } = this.pm.getInfo()

	    console.log('getEncryptData start', srcAppid, dramaId, serialNo)

	    return new Promise((resolve, reject) => {

	      resolve({

	        encryptedData: '' // TODO: 此参数需从后台接口获取到

	      })

	    })

	  },

	}

	function PlayerManager() {

	  var newProto = Object.assign({}, proto)

	  for (const k in newProto) {

	    if (typeof newProto[k] === 'function') {

	      this[k] = newProto[k].bind(this)

	    }

	  }

	}

	

	PlayerManager.navigateToPlayer = navigateToPlayer

	module.exports = PlayerManager

新建完成后，在 App.vue 中进行组件的配置和引用。

onLaunch: function() {

	// playlet-plugin必须和上面的app.json里面声明的插件名称一致

	const playletPlugin = requirePlugin('playlet-plugin')

	

	const _onPlayerLoad = (info) => {

		var PlayerManager = require('@/common/playerManager.js')

		const playerManager = new PlayerManager()

		playerManager._onPlayerLoad(info)

	}

	// 注册播放器页面的onLoad事件

	playletPlugin.onPageLoad(_onPlayerLoad.bind(this))

},

_onPlayerLoad(info) {

	var PlayerManager = require('@/common/playerManager.js')

    const playerManager = new PlayerManager()

    playerManager._onPlayerLoad(info)

},

页面使用

参考文档：developers.weixin.qq.com/miniprogram…

以上所有步骤完成后，就可以开心的使用短剧播放器了。 我这边临时写了个图片的 click 事件测试了一下：

clk() {

	// 逻辑处理...获取你的各种参数

	// 打开组件中封装的播放器页面

	PlayerManager.navigateToPlayer({

		srcAppid: 'wx1234567890123456', // 剧目提审方 appid

		dramaId: '100001', // 小程序管理后台的媒资管理上传的剧目的 dramaId

		serialNo: '1', // 剧目中的某一集

		extParam: encodeURIComponent('a=b&c=d'), // 扩展字段,需要encode

	})

},

写在最后：

总结完了，其实整体下来不是很难，对我这种前端小白来说检索和整合的过程是比较痛苦的，所以希望下一个接入的朋友可以少检索一些文档吧。
另附一个短剧播放器接口的文档： developers.weixin.qq.com/miniprogram…
文档主要介绍了短剧播放器插件提供的几个接口，在js代码里，插件接口实例通过下面的代码获取

// 名字playlet-plugin必须和app.json里面引用的插件名一致

const playletPlugin = requirePlugin('playlet-plugin')

读书越多越发现自己的无知，Keep Fighting！

欢迎友善交流，不喜勿喷~

Hope can help~

前言

挺久没写文章，最近下班后都在打瓦罗兰特，一直在黄金一和白银三徘徊，感觉已经要废了，所以也没啥时间写文章。工作上最近也是换了一个组，之前主要是干web，现在是在写sass中台和h5，然后也是负责一个小迭代，整体其实就是一个curd，但是也是遇到一些奇奇怪怪的坑，有一个我觉得还是很有含金量的，然后我是用了一个第三包解决的，然后也顺带去看了一下这个包的源码，也学到不少的东西，记录分享一下。

请求不响应后重新请求

在我现在这个项目中，对于一些请求，他的生命周期会比较长。正常来说，我们只需要和一个服务端请求，服务端收到后就返回。但是这里是，前端对服务端a请求后，服务端a还要向服务端b去请求，服务器a只能等待服务器b响应后再给我们前端响应，所以就会存在请求不响应超时的问题，如果是偶发性的还好，但是频率好像还挺高的，就是可能调同一个接口10次，有3次是不响应的。然后我这是将网络禁用去模拟的一个效果。

解决方案

解决方案也挺简单的，就是服务端a在5s内如果收不到服务端b的响应，就会给前端报timeout的错误，我这边如果收到timeout的错误就是重新请求，指数型去重试请求5次，如果还是不成功就只能给用户提示“请求超时，请重新提交了”。

代码

axios-retry地址 http://www.npmjs.com/package/axi…

这里使用了axios-retry，这个包就是可以二次封装axios实例去实现重新请求。正常来说，我们的项目中都会对axios进行封装，如下代码，去对请求拦截器和响应拦截器做一些公共处理。

import axios from 'axios'

const http = axios.create({

  headers: {},

  timeout: 5 * 1000 // 请求超时时间

})

// 请求拦截器

http.interceptors.request.use(

  (config) => {

    console.log(config)

    return config

  },

  (err) => {

    console.log(err)

    return Promise.reject(err)

  }

)

// 响应拦截器

http.interceptors.response.use(

  (response) => {

    return response

  },

  (error) => {

    return Promise.reject(error)

  }

)

export default http

这里我们就可以得到一个axios实例http，axios-retry就可以对这个实例进行封装实现重新请求

import axios from 'axios'

import axiosRetry from 'axios-retry'   

const api = axios.create({

  headers: {},

  timeout: 5 * 1000 // 请求超时时间

})

// 请求拦截器

api.interceptors.request.use(

  (config) => {

    console.log(config)

    return config

  },

  (err) => {

    console.log(err)

    return Promise.reject(err)

  }

)

// 响应拦截器

api.interceptors.response.use(

  (response) => {

    // 将index变回0 

    index = 0                         

    return response

  },

  (error) => {

    return Promise.reject(error)

  }

)

axiosRetry(api, {

  retries: 5,

  shouldResetTimeout: true,

  retryDelay: (retryCount) => {

    // retryCount为重试的次数

    return retryCount * 1000

  },

  retryCondition: err => {

    console.log(err)

    index++

    if (index === 5) {

      // 超过五次进行提示就不进行请求

      Toast('请求超时，请重新提交')

      index = 0

      return false

    } else {

      if (err.message.includes('timeout')) return true

      return false

    }

  }

})

export default api

axiosRetry

对于axiosRetry来说，我们只需要去配置下面参数就行

1. retries 重试次数


2. retryCondition 重试条件，返回ture就允许重试，返回false就不允许重试


3. shouldResetTimeout 是否重置超时，ture代表每次重试都重置超时时间 false则相反


4. retryDelay 延迟重试时间,需要返回一个时间


5. onRetry 每次重试时执行的回调函数


6. onMaxRetryTimesExceeded 当达到最大重试次数后执行的回调函数


7. validateResponse 用于验证响应是否有效的函数

可以看到，我代码中定义闭包了一个index变量，在retryCondition中去判断是否为等于5，如果等于5就不进行重试并提示给用户进行重新提交请求，这里要注意的是要维护好index这个变量，在请求成功后变回0。本来我是想在onMaxRetryTimesExceeded 这个配置项去写逻辑的，但是不知道为什么没有执行这里面的逻辑，我也没去研究了，能实现效果就行了。

源码

大家可以npm上这个位置去看源码，大家如果感兴趣，最好还是自己去看一下源码，我的分析可能比较片面，而且我本身技术也就那样。这个第三方包的源码相比vue的源码其实还算简单的，没有那么复杂。虽然简单，我看的也很头大。如果你要继续往下面看，就需要你对axios本身有一丢丢了解才行，就比如请求拦截器，响应拦截器这些。当然也能继续看，就是可能会有点迷迷糊糊的，但是肯定是能学到东西的！然后我是将代码的逻辑通过注释是写在代码里面了，所以要先看一下代码块里面的东西。

axiosRetry

这个方法就是这个第三方包的主函数，我先说下这个包整体上的实现逻辑，在请求拦截器和响应拦截器中维护一个对象，在响应拦截器中，通过这个对象中一些信息去判断要不要重新请求。可以看到这个函数接收两个参数，一个是axiosInstanceaxios实例，一个defaultOptions也就是我在使用axios-retry配置的配置项。可以看下面的代码，从大的方面来看就是一个请求拦截器，一个响应拦截器，最后将这两个拦截器给return了。

const axiosRetry = (axiosInstance, defaultOptions) => {

    

    // 请求拦截器

    const requestInterceptorId = axiosInstance.interceptors.request.use((config) => {

        

        setCurrentState(config, defaultOptions, true);

        

        // 这一段代码可以向不看，这个是为了实现配置项上的validateResponse的功能

        // =====1

        if (config[namespace]?.validateResponse) {

            config.validateStatus = () => false;

        }

        // =====1

        return config;

    });

    

    // 响应拦截器

    const responseInterceptorId = axiosInstance.interceptors.response.use(null, async (error) => {

        const { config } = error;

        // 如果没有config，无法判断是否需要重新请求，直接返回错误

        if (!config) {

            return Promise.reject(error);

        }

        const currentState = setCurrentState(config, defaultOptions);

        

        // 这一段可以先不看，为了实现配置项上的validateResponse的功能

        // =====2

        if (error.response && currentState.validateResponse?.(error.response)) {

            // 如果响应没问题（通过 validateResponse 验证）则直接返回响应

            return error.response;

        }

        // =====2

            

        // 根据是否满足重试条件来决定是执行重试操作（调用 handleRetry 函数）

        if (await shouldRetry(currentState, error)) {

            return handleRetry(axiosInstance, currentState, error, config);

        }

        

        // 这一段可以先不看，为了实现配置项上的 onMaxRetryTimesExceeded 的功能

        // =====3 

        // 在达到最大重试次数后执行相应回调（调用 handleMaxRetryTimesExceeded 函数）

        await handleMaxRetryTimesExceeded(currentState, error);

        // =====3

            

        return Promise.reject(error);

    });

    

    

    return { requestInterceptorId, responseInterceptorId };

};

除了===之间的内容不看后，拦截器里面剩下的就很简单了，在请求拦截器中，就是调用了setCurrentState这个方法，要想理解setCurrentState这个方法，我们得先知道对于一个axois，发起请求是有一个config对象，这个对象里面包括像请求头，请求方式等等的一些字段，所以这个我们可以理解成一个给config对象中添加属性的方法，源码如下。前面我们说过，这个包的整体思路就是在请求拦截器和响应拦截器维护一个对象，而这个对象就是config中的某一个属性，也就是config[namespace]。namespace是一个变量，变量值为axios-retry，也就是config中叫axios-retry的属性。

setCurrentState

这个方法接收三个参数，一个是axois请求的配置，一个用户的配置，一个是否需要重置上次请求时间。可以看下面的代码，一开始是调用了getRequestOptions的这个方法，这个方法就一个合并对象的方法，合并的对象就是我们前面所说的在请求拦截器和响应拦截器维护的那个对象。它是将，我们axios-retry默认配置，用户的配置以及config[namespace]（也就是维护的那个对象）合并成一个对象。整体去看setCurrentState这个方法，可以分为1，2，3步，分别对应着拿变量，改变量，存变量，就和维护变量的操作一模一样。

function setCurrentState(config, defaultOptions, resetLastRequestTime = false) {

    // 合并配置参数 getRequestOptions方法在下面----------------------------1

    const currentState = getRequestOptions(config, defaultOptions || {});

    

    // 初始化或更新重试次数，retryCount就是记录当前重试的次数

    // 如果currentState中没有这个变量，就是第一次请求，有就使用这个变量--------2

    currentState.retryCount = currentState.retryCount || 0;

    // 更新上次请求时间

    if (!currentState.lastRequestTime || resetLastRequestTime) {

        currentState.lastRequestTime = Date.now();

    }

    

    // 赋值给config配置项 namespace就是一个变量，在下面的代码，这就是维护变量的操作---------3

    config[namespace] = currentState;

    

    return currentState;

}

​

// 合并默认配置，就是将默认的，用户设置的，和config中的配置合并

function getRequestOptions(config, defaultOptions) {

    return { ...DEFAULT_OPTIONS, ...defaultOptions, ...config[namespace] };

}

​

// 下面这些代码可以先不看

//===============================================================

// 定义添加config对象中的属性名

export const namespace = 'axios-retry';

​

// 默认配置对象 isNetworkOrIdempotentRequestError和noDelay是一个默认方法，

// 大家感兴趣可以去看源码，因为如果用户有配置的话，就是使用用户配置的回调函数

export const DEFAULT_OPTIONS = {

    retries: 3,

    retryCondition: isNetworkOrIdempotentRequestError,

    retryDelay: noDelay,

    shouldResetTimeout: false,

    onRetry: () => { },

    onMaxRetryTimesExceeded: () => { },

    validateResponse: null

};

我们结合上面的axiosRetry来看，在请求拦截器和响应拦截器都使用了这个方法，也就是说在每一次请求的时候都去更新维护config[namespace]对象。这也就是为啥一直在说核心就是请求拦截器和响应拦截器维护一个对象，那为什么要维护这个对象呢？别急，马上就来了！我们再回去看响应拦截器，除开1，2，3段可以先不看，就剩下下面两行代码，这段代码也就是这个包的核心代码，这段代码主要使用了shouldRetry和handleRetry两个方法，可以看到这两个方法都使用了currentState这个变量，这个变量就是我们一直强调的那个'维护的对象'。shouldRetry方法是用来判断要不要重新的请求，而handleRetry是用来重新请求的方法。

// 根据是否满足重试条件来决定是执行重试操作（调用 handleRetry 函数）

if (await shouldRetry(currentState, error)) {

   return handleRetry(axiosInstance, currentState, error, config);

}

维护的对象

说这么多，这个'维护的对象'到底是什么，我们在请求拦截器中打印一下config这个对象，可能大家已经忘了config是啥，config就是我们在请求拦截器回调接收的那个参数，也就是axois发起请求的配置。在控制台可以看到其中会有axios-retry这样的一个属性，也就是namespace变量的值。我们一直在维护的也是这个axios-retry的值。这个对象里面有重试次数，上次请求时间，重试条件，重试回调等等，也就是我们所配置的那些东西。也就是形参currentState需要的值。

shouldRetry

async function shouldRetry(currentState, error) {

    // 从currentState拿到retries, retryCondition

    const { retries, retryCondition } = currentState;

    // 如果没超过重试次数，然后通过retryCondition去判断，根据这两个去判断要不要重新请求

    const shouldRetryOrPromise = (currentState.retryCount || 0) < retries && retryCondition(error);

    

    

    // 这一段代码是为了兼容retryCondition可能是promise的值，就要去等待他执行完成

    // =========1

    if (typeof shouldRetryOrPromise === 'object') {  // 这可能是一个promise

        try {

            const shouldRetryPromiseResult = await shouldRetryOrPromise;

            // 保持 return true，除非 shouldRetryPromiseResult 返回 false 以实现兼容性

            return shouldRetryPromiseResult !== false;

        }

        catch (_err) {

            return false;

        }

    }

    // ========1

    return shouldRetryOrPromise;

}

这个方法其实很简单，就是通过重试次数，以及用户配置的retryCondition回调，去得到一个布尔值。整体逻辑大家应该都能看得懂，这里需要给大家讲一下error是什么，error就是在响应拦截器中请求失败的回调的传参，也就是当axios请求失败报错的那个值。下面这张图可以看到这个error中也是有config属性的，也有axios-retry的，这很重要！

handleRetry

这个方法就是实现重试的方法，接收四个参数，分别是axiosInstance axios实例，currentState就是config中的axios-retry属性，也就是维护的那个对象，error就是上面那个error，config就是那个config，之前都有提过。

async function handleRetry(axiosInstance, currentState, error, config) {

    

    // 重试次数加1

    currentState.retryCount += 1;

    const { retryDelay, shouldResetTimeout, onRetry } = currentState;

    

    // 执行retryDelay,也就是用户配置的那个retryDelay

    const delay = retryDelay(currentState.retryCount, error);

    

    // 修复config======可以不看，为了兼容，感兴趣的可以去细看源码

    fixConfig(axiosInstance, config);

    

    // 这一段代码是为实现用户配置shouldResetTimeout是否重置超时时间的功能

    // 如果是false，也就是不进行重置超时时间，所以这里要去更新config中的timeout。

    // 如果是ture就不进入这个if,不对timeout做处理

    if (!shouldResetTimeout && config.timeout && currentState.lastRequestTime) {

        const lastRequestDuration = Date.now() - currentState.lastRequestTime;

        const timeout = config.timeout - lastRequestDuration - delay;

        if (timeout <= 0) {

            return Promise.reject(error);

        }

        config.timeout = timeout;

    }

    

    // config.transformRequest是对请求数据进行处理，这里的意思就是传入了什么，就用什么数据。

    // 这行代码是为了重置转换函数。

    config.transformRequest = [(data) => data];

    

    // 执行onRetry，也就是用户配置的onRetry

    await onRetry(currentState.retryCount, error, config);

    

    // config.signal是AbortController产生的，AbortController是提供取消异步操作的一个js接口。

    // 这里所有关于config.signal都是为了兼容，兼容用户对请求进行主动取消的情况下。

    // 他是去监听abort事件，因为如果用户需要主动取消请求，会去触发abort事件

    // 这里是做了一个防抖以及监听事件和取消监听。

    // 如果没有接触过，可以直接把这些相关代码（1，2，3，4）先删了再去看，

    // 把这些删了之后发现就只剩下了一个定时器和axiosInstance(config)。

    // axiosInstance(config)就是重新请求。

    

    // =============1

    if (config.signal?.aborted) {

        return Promise.resolve(axiosInstance(config));

    }

    // =============1

    

    return new Promise((resolve) => {

        // =============2

        const abortListener = () => {

            clearTimeout(timeout);

            resolve(axiosInstance(config));

        };

        // =============2

        

        // delay是上面retryDelay得出的东西

        const timeout = setTimeout(() => {

            resolve(axiosInstance(config));

            

            // =============3

            if (config.signal?.removeEventListener) {

                config.signal.removeEventListener('abort', abortListener);

            }

            // =============3

        }, delay);

        

        // =============4

        if (config.signal?.addEventListener) {

            config.signal.addEventListener('abort', abortListener, { once: true });

        }

        //  =============4

    });

}

梳理

看到这里大家可能明白了，可能很懵。因为我这是对核心源码一行一行的去注释，可能并不能将整条线连起来，所以我这用文字去总结一下。首先，我们先将重试作为主线，去看重试是怎么实现的。还是那个'维护的对象'，这个对象串联了整条线，这个对象包括我们的重试条件，重试回调等等这些方法。我们先在请求拦截器中和响应拦截器中都是使用了setCurrentState去维护这个对象，然后再响应拦截器中去通过shouldRetry去判断该不该重试，再通过handleRetry去重试。而这两个方法实现的前提就是这个'维护的对象'。比如该不该重试，是通过用户配置的retryCondition和重试次数去判断的，再比如怎么去重试，是通过axios实例配合config参数再次请求。其次，我们再通过我们配置的参数，去看重试这条主线的支线，也就是retryDelay重试延时时间，shouldResetTimeout是否重置超时时间，onRetry重试回调，onMaxRetryTimesExceeded最大重试次数后执行的回调，validateResponse验证响应内容。这些在上面的代码注释中，我都有标明在哪里实现的。

总结

axios-retry这个包是很不错的，可以在无响应报错的时候进行重新请求。在前后端交互的时候，或多或少都会遇到接口不响应超时的问题。而在一些很需要的接口响应的场景，是很实用的，然后源码看不看懂其实都无所谓，会用就行，而且我们这种底层前端的工作内容基本都是curd，根本不用去造轮子。不过看源码也是有很多好处的，比如怎么封装包能让用户有更多的扩展性，像这里的retryCondition和onRetry就不错。还有可以增加自己的自信心的，这包一周是有三百万人在使用的，感觉也没有多复杂，我又觉得我行了（手动狗头）。最后，来个赋能哥带我上分呗，我真打不上去啊。

适配及响应式处理

1. 一次搞懂数据大屏适配方案 (vw vh、rem、scale)
2. 处理scale方案下有空白问题

效果实现

Echarts线图线条渐变色及区域渐变

• 效果图

• 关注点
  1. 线条颜色渐变
  2. 线条含有阴影
  3. 区域填充色渐变
• 配置项

series:[{

  data: [820, 932, 901, 934, 1290, 1330, 1320],

  type: 'line',

  smooth: false,

  lineStyle: {

    normal: {

      // 1. 设置线条渐变色

      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [

        {

          offset: 0,

          color: '#FDFDFF',

        },

        {

          offset: 0.3,

          color: '#6EA4F8',

        },

        {

          offset: 0.6,

          color: '#7DA0E0',

        }, {

          offset: 1,

          color: '#679BF0',

        },

      ]), 

      width: 3,

      // 2. 设置线条阴影

      shadowColor: '#2E4F84',

      shadowOffsetY: 15,

      shadowOffsetX: 5,

      shadowBlur: 3,

    },

  },

  // 3. 设置区域填充渐变：渐变色设置文档 https://echarts.apache.org/zh/option.html#color

  areaStyle: {

    color: {

      type: 'linear',

      x: 0,

      y: 0,

      x2: 0,

      y2: 1,

      colorStops: [

        {

          offset: 0,

          color: 'rgba(36,173,254, 0.5)',

        }, {

          offset: 1,

          color: 'rgba(52,112,252, 0.1)',

        },

      ],

    },

  },

}]

Echarts外环饼图

• 效果图

• 关注点
  1. 内圈含有间隔数据
  2. 外圈效果
• 配置项

// 数据处理

// 间隔空白数据

const gapData = {

  name: '',

  value: 20,

  itemStyle: {

    color: 'transparent', // 颜色设置为透明数据

  },

};



// 计算饼图渲染数据

const seriesData = [];

[

  { value: 1048, name: 'Search Engine' },

  { value: 735, name: 'Direct' },

  { value: 580, name: 'Email' },

  { value: 484, name: 'Union Ads' },

  { value: 300, name: 'Video Ads' }

].forEach((item) => {

  seriesData.push(item);

  seriesData.push(gapData);

});

// 图表配置项

series: [

  // 内圆环配置项

  {

    data: seriesData,

    roundCap: true,

    center: ['50%', '50%'],

    radius: ['50%', '60%'],

    label: {

      show: false,

      position: 'center',

    },

  }，

  // 外圆环配置项

  {

    type: 'pie',

    name: '旋转圆',

    silent: true,

    center: ['50%', '50%'],

    radius: ['70%', '69%'],

    hoverAnimation: false,

    startAngle: 50,

    // Notes：这里的数据根据要展示的外环段数及长短自定义设置

    data:[120, 40, 120, 40, 120, 40].map((item, index) => ({

      value: item,

      name: '',

      itemStyle: {

        color: index % 2 === 0 ? '#5999E1' : 'transparent',

        shadowBlur: 20,

        shadowColor: '#86C6FD',

      },

    })),

    label: {

      normal: {

        show: false,

      },

    },

    labelLine: {

      normal: {

        show: false,

      },

    },

  }

],

Echarts 渐变色柱状图

• 效果图

• 关注点
  1. 柱体颜色渐变
• 配置项

  series: [

    {

      data: [120, 200, 150, 80, 70, 110, 130],

      type: 'bar',

      // 设置柱体颜色渐变

      itemStyle: {

        normal: {

          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

            {

              offset: 1,

              color: '#20517E',

              opacity: 0.85,

            },

            {

              offset: 0,

              color: '#3FC0F7',

              opacity: 0.79,

            },

          ]),

        },

      },

      label: {

        show: true,

        color:'#3FC0F7',

        fontSize: 12,

        position: 'outside', 

      },

    }

  ]

Echarts含图片标签渐变色柱状图

• 效果图

• 关注项
  1. 渐变色柱体
  2. 高亮结尾
  3. 数据标签含背景图
• 配置项

option = {

  backgroundColor:'#17243A',

  tooltip: {

    trigger: 'axis',

    axisPointer: {

      type: 'shadow'

    }

  },

  grid: {

    left: '3%',

    right: '4%',

    bottom: '3%',

    containLabel: true

  },

  xAxis: {

    type: 'value',

    boundaryGap: [0, 0.01]

  },

  yAxis: [

    {

      inverse: true,

      axisLabel: {

      color: '#ADCBE9',

      fontSize: 20,

      formatter: (value) => {

        if (value.length < 8) {

          return value;

        }

        return `${value.substring(0, 8)}...`;

      },

    },

    axisLine: {

      lineStyle: {

        color: 'transparent',

      },

    },

    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  }, {

      inverse: true,

      axisTick: 'none',

      axisLine: 'none',

      axisLabel: {

        show: true,

        fontSize: 20,

        fontWeight: 'bold',

        color: '#BFD1E3',

        padding: [5, 12, 5, 12],

        backgroundColor: {

           image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAWCAYAAAA/45nkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAElEQVRoge3ZwQoBURTG8XOvKzGzmnQ3SpKJrMZb2HsQL+MRLCkb5RHsbNVspGwkRYamplipaSiUOodzZnl/d/FvZvPVqP5geoXMs18ve0l8ibLnfq1SDlebXfZc7LWZQtHxqq1x1g0AwDZcdKmG/4sl8SW6v+e7HfJ2qCnEcTaNHcDdNAAA1TgOlqv77TnVuH+3ODpO9LuXxb5vSXw+PXwAKnFcTH9yWez7JjMU2WSGYs9Q7ADuprEDuJvMUGSTGYpsMkORTWYooplCydW2EYwoxnEwr9ocaVDKpRjHxZ6uICpxHExmKLIZAADrd2bpwzD175Jq+C+abQRjUMpJ+w1co8ZyUwNCuQAAAABJRU5ErkJggg==',

        },

       },

      data: [120, 200, 150, 80, 70, 110, 130],

    },

  ],

  series: [

        {

          type: 'pictorialBar',

          symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA1CAYAAAAOJMhOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAI9ElEQVRogbWa244cxw2GP1b37EGSAztAAsNArvIYAfIEeetc5hlyZSlxACuCvV7NaqebzEUVq1mcXmlWUgoYzEx3VTV/Hn6SNSM//WZcMixME7l8LiAiWL7ve3zOvh+bVz6+xbOH5M8NjOzcj/M+AeXyMX+FPQSqBZ7QoN+XZhm/a3FtWNOvfc74LAsll/JvAlgTTNJ9aWuy8Ij0724p4wss9jVcrmvcBQuAB8FC3Fh698++8sxCdqHNLgV0FhvxWWza7W6VQSXLSXj1eWnNZ1lp3kP+BItktjqbFdjLYky063tM1+NIBMzq58iCzx2XkkKMDdsJfqMCduHJQoU1siPsYJ0dxV1MEp9yuWj6YeMdJsMMcxbbIYeSXBEqEKGCyEy35+aftNunAHmg7vl+37wJFSm5x1MTVoJL5fsZ3J587gF7ihrGs/KQu1FwLQmudaac5KaSLNDnNJbD54XrTvM5l9lTrLcHKOeCIWlGYOF7FGIQvAnVLZrWRjfuROLg9hSQ9jyDNecADZPjBl2TaW53sxgLRWDVem8qiFq9pnV+AdQV0B+SPgfgmpTgQLs08f6ZhWLyCxuXdq/7cnxPxaawMZloe6yOysixYcmVonVKuy4iT1YifWRAna1g8NtOy2meB6oHeZlKFb4Ik27ljriFzGAqsCpriEENSooCRlbN+eksFDKgqOlshQ7SQbiLBW0VqUKXUi1aApju71O1jTUwJoK2ueq0H+o+T7oxXmKM52sdUMwdBIE7y6SA70m0xcvUrhWrj3JA0sCJGlbq2rWix3SLD20KMUZ3i3Gym5CDRQWwaCH33+irmG2Wi/4bCGESoTQrFIQpgmmAaGBMjYlKCuqKCRr26y6PK7oTQSCoDFyihfqFXETmmqyN4rlHrbvU1L7PpYEqQimjWxrSBV/VWIuwNAWsLeY0PEPZRs5P7rJDeokud+arkcJDQnX3K7K5llvl0Kwyz6PbOdtZqVYyZbOeGlqq8EKKpwCoM2FIFR2IY+jVdlocu8shzxCIgS1GHNRchGne3O6qyKC0tQhrEU5LFd9z1EKNLTHrlL4G5VmKH4/tzIgyO7IopMdS0MIAuGlcGgGIGmUuzFQSm4twUONQhCtqjE1TpV0FlnbvqMbKVi/OwBJipYhU0oAhHLJV4jWbYzLLdVQEGR7iYMpUeqxMDUwBZjWuinAD3EyF6wawlMKqxoMYRzOY4bg0MmixOKtxSqmhWyK2LamF6TTeLeTv0c32WMQ108B0MmjAihozcCPCTRG+mQrfALdTdb3TJNwX45dFgWohbXtMwGMsdkVYvUAlULSnlFQCbaSww+9DQIaKAFoMNbYqbCwmakxFuC7CXIQXRfh2gj8A3xXhAHw4GT9TY+9kwsMMp8UqwxWpINiIZHUwMY726kqfN5Q+sVLYATLM8YKTjZm6tUQ4FOF2Fr6bCn8R4W9NqL8f4B8nWArcrVRXjHs0krEGRryYTZV4bymSzFZSdR2THL6AUI8lnwUqSaRmaAKugVcNzAvgVoS/ivD7CV6KcCPVkuJ7NCtbKmTPqurkaoN/FTZWMy89fHKi8r7Y5+vWYapuG8ecIg2Mj5sGdo7PafNMz1uX8eGBKOK1+LXAUJIPlB3vmdUEOGhjK2esgfIKQIEPKxx1WAFm/Ar8tiqPbW6k7ggSRuvk06OBpHxaZLkK+NxX43tkQgAcDGCzsC7GMsHDotwfJt7enyqfT6WaBvj3Cm+BoxmPWil7gVq8thYjKrK7f4rlAbjPnxvivnCP8ULRGmPMqO4lLbBNa7ZfV+WhCHerUn4+wu1c970qcHvgR+DtqvyyKA8OBrBV0dYbdWuFSqHnoh2ichbsFhqKvmSR2I2qtw0twWqr3dRZqQiPi6EzgHJ6cw83U31NAn/6Hf8y416N9woL7aVbTrKmxJ5notfEUii6oM/x4Iws102aKu8csGrGpNVKPs+871mMYzHW13dwmODlXN3uh1e8U+O0VMucaHFkxppqs+gdltnNQyJ1sWPHKuPRrDOakWIraGVpoISt7JceV4K+voPrubrbzQzLH2sNp8ZSpBOItRKsM62kZm/PGmn00ufsnDkh722Fm9ldLrTQtELVNeztt/3nWMFcTfWlVq0SwCg19rTtpbaB7BbJZBWuxZgms1yOIV+QN7EmgAuuQGkHH9ZqOrsqTO8XsKlO+rDCVaEsxmlRTm6RFpvWwJwl0iBbVKTtgOsCdc2nGikCHfJEqCA8kNemYVNDrwpyPXML8OpQme6kcD1zW1rQB8VEMNaauCHRN9ksAJbw6rL7eVvWRKwWBo3F+21z7y7VKuutRdC5ILPw4vU9HNet9puFF4eJMhVMamPXXc7BBMHjc6J3nMWZv4biNJcRyVIS3mOPIrKVOn3+VFBg/vE9fH8LDwu8uQdgKtKLTw3Cejz6wWPcP8sVC4Eh9iX8rN8FzsyWRi+RQqLt1XlbJy8PvLiZ+H4q/Bn4oa19syr/fFR+uj9xbIk0ap34HuNpp/eJwPoYjrEiqIR8+AU7MmDIE91yrXL+sMJ/izGJ8Gub+26Fd6vy2MD0g48IIlUHww/OIbn2FuIpQIOAAUTW0Mdcz6DWd8eFUxHuKDxOxluAFR5PK8eHlZNbJSomJdZoHbfg2YluHnu/sQ7ny/6g0OfHh8XWQ+MZhBp6XHgscJoL7327R0V11P6QQOPe7fmdrgPwJ8fe70Pd/HFhqp3OzJ/nAyxa531YWcP67UG2daJZ2FTHuUJzGfbRGNobcYP47sHvD41VeNZk13QCcyZMcrl+UivSma9f36n7LgIUk+heqRFPUjvlprn5ODczF2Gv4dlPpJFdID6e80+S7vO5qw0Pj/Qb/T+2JxEwYb/hVCe5ouW9nxoX/WicNRk/Jy0ONOtWcheJ39kUEVuW3SIZhs71ywE5Ls61lE9X+/WUCNm5F10sMlmPwbjmUiGfA2jP97eb4Y9IqVIfrLpXQae5BJe+GIiPZ/8bKwkrMXZiXBC0HPsozl3yqfFsMPBlfwA8e2Bwk6EhhA6qX/9/ja/xj8Y4csIbvst4cJmr+c+ySB7/A5p05mnftr1GAAAAAElFTkSuQmCC',

      symbolOffset: [20, -5],

      symbolSize: [40, 40],

      symbolPosition: 'end',

      z: 12,

      data: [120, 200, 150, 80, 70, 110, 130],

    }, {

      name: '',

      type: 'bar',

      showBackground: true,

      yAxisIndex: 0,

      barWidth: 7,

      barBorderRadius: 10,

      data: [120, 200, 150, 80, 70, 110, 130].map((value, index) => ({

        value,

        itemStyle: {

          normal: {

            color: {

              type: 'linear',

              x: 0,

              y: 0,

              x2: 1,

              y2: 0,

              colorStops: [

                {

                  offset: 0,

                  color: '#2F3E56',

                },

                {

                  offset: 1,

                  color:'#7BB1EE',

                },

              ],

            },

          },

        },

      })),

    },

  ]

};

Echarts立体柱状图

• 效果图

• 关注点
  1. 三面立体
  2. 柱体渐变
• 配置项

  // 自定义图形
  
  // 绘制左侧面
  
  export const CubeLeft = echarts.graphic.extendShape({
  
    shape: {
  
      x: 0,
  
      y: 0,
  
    },
  
    buildPath (ctx, shape) {
  
      const xAxisPoint = shape.xAxisPoint;
  
      const c0 = [shape.x, shape.y];
  
      const c1 = [shape.x - offsetX, shape.y - offsetY];
  
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
  
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
  
      ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1])
  
        .closePath();
  
    },
  
  });
  
  
  
  // 绘制右侧面
  
  export const CubeRight = echarts.graphic.extendShape({
  
    shape: {
  
      x: 0,
  
      y: 0,
  
    },
  
    buildPath (ctx, shape) {
  
      const xAxisPoint = shape.xAxisPoint;
  
      const c1 = [shape.x, shape.y];
  
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
  
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
  
      const c4 = [shape.x + offsetX, shape.y - offsetY];
  
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])
  
        .closePath();
  
    },
  
  });
  
  // 绘制顶面
  
  export const CubeTop = echarts.graphic.extendShape({
  
    shape: {
  
      x: 0,
  
      y: 0,
  
    },
  
    buildPath (ctx, shape) {
  
      const c1 = [shape.x, shape.y];
  
      const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
  
      const c3 = [shape.x, shape.y - offsetX];
  
      const c4 = [shape.x - offsetX, shape.y - offsetY];
  
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])
  
        .closePath();
  
    },
  
  });
  
  

  function getRenderItem(param, type) {
  
    const colorList = ['#66C9F2', '#80D1CD', '#9BD977'];
  
    const color = colorList[param.dataIndex % 3];
  
    const rgba = color16ToRGBA(color, type === 'top' ? 0.6 : 0.01);
  
    return {
  
      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  
        {
  
          offset: 1,
  
          color: rgba,
  
        },
  
        {
  
          offset: 0,
  
          color,
  
        },
  
      ]),
  
    };
  
  }
  
  

  // 图表配置项
  
  config = {
  
    xAxis: {
  
      axisLine: {
  
        lineStyle: {
  
          color: 'transparent',
  
        },
  
      },
  
      axisLabel: {
  
        color: '#B1CBD8',
  
        fontSize: 20,
  
      },
  
    },
  
    yAxis: {
  
      show: false,
  
      splitLine: {
  
        show: false,
  
      },
  
    },
  
    series:[
  
      {
  
        type: 'custom',
  
        // 使用自定义的图形进行绘制
  
        renderItem: (params, api) => {
  
          const location = api.coord([api.value(0), api.value(1)]);
  
          return {
  
            type: 'group',
  
            children: [
  
              {
  
                type: 'CubeLeft', // 绘制左侧面
  
                shape: {
  
                  api,
  
                  xValue: api.value(0),
  
                  yValue: api.value(1),
  
                  x: location[0],
  
                  y: location[1],
  
                  xAxisPoint: api.coord([api.value(0), 0]),
  
                },
  
                style: {
  
                  ...getRenderItem(params),
  
                },
  
              },
  
              {
  
                type: 'CubeRight', // 绘制右侧面
  
                shape: {
  
                  api,
  
                  xValue: api.value(0),
  
                  yValue: api.value(1),
  
                  x: location[0],
  
                  y: location[1],
  
                  xAxisPoint: api.coord([api.value(0), 0]),
  
                },
  
                style: {
  
                  ...getRenderItem(params),
  
                },
  
              },
  
              {
  
                type: 'CubeTop', // 绘制顶层
  
                shape: {
  
                  api,
  
                  xValue: api.value(0),
  
                  yValue: api.value(1),
  
                  x: location[0],
  
                  y: location[1],
  
                  xAxisPoint: api.coord([api.value(0), 0]),
  
                },
  
                style: {
  
                  ...getRenderItem(params, 'top'),
  
                },
  
              },
  
            ],
  
          };
  
        },
  
        data: [120, 200, 150, 80, 70, 110, 130],
  
      },
  
      {
  
        type: 'bar',
  
        label: {
  
          normal: {
  
            show: true,
  
            position: 'top',
  
            formatter: e => `${e.value}%`,
  
            fontSize: 15,
  
            color: '#fff',
  
            offset: [0, -15],
  
          },
  
        },
  
        itemStyle: {
  
          color: 'transparent',
  
        },
  
        tooltip: {},
  
        data: [120, 200, 150, 80, 70, 110, 130],
  
      },
  
    ]
  
  }