Southern Wind-CSDN博客

原创 H5页面在线预览pdf

一般的做法是在浏览器中打开pdf文件，但是这种方式会导致浏览器的工具栏和地址栏也一起显示出来，影响用户体验。因此，我们需要在H5页面中实现一个预览pdf的功能，例如在网页或微信小程序中嵌入 PDF 文档，方便用户直接预览文件。在 HTML 中，创建一个全屏的容器 pdf-container 用于展示 PDF 页面，并通过 CSS 设置其宽高为 100vw 和 100vh，确保容器充满屏幕。由于 PDF.js 默认使用 1 倍的缩放比例，导致生成的图片在移动端显示模糊。为了解决这个问题，我们可以通过设置。

2024-10-30 11:10:32 1173

原创关于使用CDN方式引入原子化js时出现闪屏问题解决方法

先看问题在使用原子化 CSS（如、或）时，可能会遇到页面刷新后所有样式类丢失，再加载时体验较差的问题。这是因为样式通过 JavaScript 动态加载渲染，页面初始时 JavaScript 尚未解析完成，导致样式无法获取。通过给元素设置，等到 JavaScript 完成解析后再显示页面内容，可以解决这个问题。CSS 部分：JavaScript 部分：引入 JavaScript 文件：这样，页面在加载完成后才显示内容，避免用户看到样式丢失的过程，提升了用户体验。

2024-09-13 10:50:37 234

原创 vite + vue3 + ts 移动端开箱即用现代开发模板

vite + vue3 + ts 移动端开箱即用现代开发模板。

2024-09-13 10:33:27 1075

原创 Vue3+Ts+Element-Plus多级表头以及动态合并单元格

【代码】Vue3+Ts+Element-Plus多级表头以及动态合并单元格。

2024-08-06 13:58:04 1009 2

原创 TypeScript—— 泛型

用来约束泛型类型，比如我想写一个函数，用来检查对象中是否存在某个 key，如果存在则返回 true，否则返回 false，我们可以使用泛型约束来实现这个功能(此处后面会提到)比如我想写一个函数，用来检查对象中是否存在某个 key，如果存在则返回 true，否则返回 false，我们可以使用泛型约束来实现这个功能。用来获取对象的 key，比如我想写一个函数，用来获取对象的 key，我们可以使用泛型约束来实现这个功能。泛型类型允许我们创建可以适用于多种类型的类，类中的成员可以使用泛型类型进行声明和使用。

2024-07-30 15:19:54 751 1

原创判断对象是否为空的多种方式

本文介绍了 6 种判断对象是否为空的方法，并对比了它们的性能。其中，是最快的方法，适合在性能要求较高的场景中使用。而性能较差，不建议用于大对象的判空操作。

2024-06-25 10:38:20 616

原创我的创作纪念日

我大概是从2022年的时候了解IT行业并首次注册CSDN这个关于IT网站的账号，也是我做前端开发的开始，到如今已经差不多三年了，写博客的初衷也就是想自己学习一些技术并实时分享，记录等，当然也是对我文章感兴趣的同学们老师们进行技术的沟通，当然在这里也遇到很多的未知的坑。我希望能够在技术分享的领域更加深入和专业，不仅仅局限于基础知识的传播，更能够参与到前沿技术的讨论和研究中。那些来自读者的反馈，无论是肯定的赞扬，还是指导性的批评，都成为了我不断改进和进步的动力。每一次数字的跳动，都仿佛是在为我的努力鼓掌。

2024-06-24 10:14:41 386

原创原生js制作svg 图标生成动态 tab栏切换效果(结尾附代码)

先看效果：我想做一个 tab 栏比较美观的效果，当然切换的数据可以自己做一下，这里不演示，说一下特效如何制作。当我点击时要将空心变为实心的这么一个效果，所以准备两个五角星样式一个是空的一个是实心的 svg 图片结构大致是这样首先需要一个父元素可以定义一个标签然后就是需要一个数组里面存放文字，颜色，填充色以及描边的阴影，我这里用六个色调为一组，如果自己想设置什么颜色或者想要每个不同可以自行考虑更换2. 创建遍历元素，并添加到父级中。其中是用来做五角星发光的边框阴影接下来就是做竖着的线条的

2024-06-19 17:06:22 1059

原创 Turbo Console Log自定义配置

因为vscode的其他快捷键可能会和这个插件产生冲突，所以可以从这里设置自定义不重复的快捷键。可以用下vscode中的。还有其他的设置可以参考这篇文档。我用的是显示第多少行和路径名。

2024-06-13 10:03:16 979

原创超级大转盘！(html+less+js)（结尾附代码）

有个会议需要用到转盘抽奖，有机会赢得不同奖品。html+less和 js实现先上效果：旋转动画的话其实就是中的 transform 属性，改变转盘旋转的速度以及动画结束时间JS 部分因为数据肯定是活的，所以我们这里要把数据单独拎出来圈里的图片可以自己查找替换定义变量把奖品放入这个函数中抽奖部分转盘转动角度完整代码：结尾当然中什么可以自己根据id控制中什么（我中不了奖就是有黑幕！）

2024-05-08 15:40:33 797

原创 vue3——H5页面调起微信订阅通知

/ 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。// 必填，需要使用的JS接口列表。// 必填，公众号的唯一标识。// 必填，生成签名的时间戳。// 必填，生成签名的随机串。

2024-04-08 11:47:47 1052 1

原创 pnpm下载过慢——解决方法：更换镜像源

解决方法：更换镜像源。

2024-02-23 12:06:04 2845 1

原创 HarmonyOS4.0系列——08、整合UI常用组件

通用组件标签、属性及效果展示

2024-02-19 11:28:15 1562

原创 HarmonyOS4.0系列——07、自定义组件的生命周期、路由以及路由传参

自定义组件的生命周期，路由以及传参写法

2024-01-19 20:56:30 1020

原创 HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染

ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用 if、else 和 else if 渲染对应状态下的 UI 内容。写法和 TS 的一样，简单看一下即可效果：另外，@State 定义的变量归父组件所有。因此，当子组件实例被删除时，该变量不会被销毁。子组件通过@Link装饰器引用状态。状态必须从子级移动到其父级（或父级的父级），以避免在条件内容或重复内容被销毁时丢失状态。

2024-01-13 16:02:15 1356

原创 HarmonyOS4.0系列——05、状态管理之@Prop、@Link、@Provide、@Consume，以及@Watch装饰器

看下面这张图Components部分的装饰器为组件级别的状态管理，部分为应用的状态管理。开发者可以通过@StorageLink/@LocalStorageLink 实现应用和组件状态的双向同步，通过@StorageProp/@LocalStorageProp 实现应用和组件状态的单向同步。

2024-01-10 11:15:37 1747

原创 HarmonyOS4.0系列——04、@Styles、@Extend、@Extend事件以及多态样式stateStyles

通用样式类似于css中的class放在struct内调用总结：@Styles 内部样式和外部样式，内部样式优先级高于外部样式，内部不要需要用函数function定义，外部需要function;缺点：只能用于通用样式，@Styles不能进行传参那么如何进行传参呢？

2023-12-29 19:30:00 807

原创 HbuilderX使用Uniapp+Vue3安装uview-plus

如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章小程序的第三方ui库推荐较多的还是uview的，看起来比较美观，功能也比较完善，下面将提一下Vue3安装uview-plus库的教程。

2023-12-08 22:00:00 2641

原创 HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

当我们需要写多个文本不同但样式相同的效果，需要使用自定义组件来实现，下面是需要注意的几点@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。@Entry放在哪个组件前面，哪个就在页面上显示在Entry组件中，build()中必须有且只有一个更组件自定义组件必须定义build()函数定义一个的组件@Component。

2023-12-04 11:10:15 747

原创 HarmonyOS4.0系列——02、汉化插件、声明式开发范式ArkTS和类web开发范式

我们在每次退出编辑器后再次打开会直接进入项目文件中，这样在新建项目用起来很是不方便，所以这里跟着设置一下就好。这样下次进入就不会直接跳转到当时的文件项目中！→重启DevEco-Studio完成汉化。也就是所谓的前端开发方式。

2023-11-24 15:24:21 978

原创 HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码

原生鸿蒙OS安装以及运行初始项目

2023-11-20 15:00:38 1886 2

原创策略模式——多重if-else解决方案

策略模式 💤：是一种行为设计模式，它允许你在运行时根据不同情况选择不同的算法或行为。设计模式 🤌：就是提前第一次了解全过程，第二次直接规划不必要的坑。

2023-10-16 15:54:06 1217

原创 ThreeJS——在3D地球上标记中国地图板块

用于获取地图的位置以及到下一个目的地的总路程，可以将实际路程转成自己配置的路程，以及正在路上的标识，可以用头像表示，经过的地方可以嵌入链接点击进行跳转如果是 Vue 写的话需要从生命周期中获取 Dom 元素动画渲染函数用于制作开始场景镜头动画(由远到近并附带略微旋转)这个动画在后面会用到，是根据滚动下方内容进行左右镜头旋转的动画效果此时星空就已经搭建好了，可以左右旋转试试效果其实也就是创建一个球，然后贴个准确的贴图放在圆上调整一些光感即可绘制红色圆点和点与点之间的飞线效果用画布渲染

2023-08-14 13:14:51 3099

原创微信小程序——XR-frame图像跟踪效果

可以尝试点击切换模式查看效果，会发现两个模式都能够正常渲染普通的页面。然后我就打算尝试按照官网给出的例子继续尝试下去，之后就遇到的问题。在使用xr-frame时，遇到很多坑，这里给出解决办法。这里面是不带这个新的渲染引擎的包。为了避免这个坑，可以使用这个包。

2023-08-08 09:49:29 661

原创 Mindar.JS——实现AR图像追踪插入图片或视频

上面图片提到需要一个Mind文件，这个文件就是图像识别的图片，工具在这里。如果我想扫描图片展示视频该如何去操作呢？我这里加了两张png图片用来做暂停按钮。如果是图片识别显示图片的话就很简单了。// alert('播放')// alert('暂停')// alert('执行')层级往内移动或者让。

2023-07-28 13:05:49 2985 3

原创 Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls

正投影相机和透视相机的区别如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果透视投影相机一般是人在场景用漫游，或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体，此长方体就是 Box3改变相机的位置.position，三维场景在 canvas 画布上呈现不同的效果，如果连续改变相机的位置.positi

2023-07-17 10:24:06 2422

原创 Threejs——十四、关于深度冲突、重叠、以及加载模型进度条效果实现（附完整代码）

两个模型重叠的模型，通过浏览器旋转预览，会发现模型旋转的时候会发生闪烁。这种情况，主要是两个模型重合，电脑分不清谁在前谁在后，这种情况，可以理解为深度冲突。效果：适当偏移，解决深度冲突，偏移尺寸相对模型尺寸比较小，视觉上两个几何体近似还是重合效果。这种情况我这里遇到过一次，通过压缩模型后进行放大缩小会发现出现模型闪烁的 bug，所以这里可以用解决冲突问题。注意：如果两模型面间隙过小，或者重合，，此渲染器对数深度缓冲区也是没有效果的区别：不加这里拿来测试这里可以进行判断，如果等于100，也就

2023-07-17 09:44:41 1013

原创 Three.js——十三、自定义大小画布、UI交互按钮以及3D场景交互、渲染画布为文件（图片）

- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;-- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;

2023-07-17 09:41:24 1173

原创 Three.js——十二、MeshPhysicalMaterial清漆层、粗糙度、物理材质透光率以及折射率（结尾附代码）

和都是拥有金属度、粗糙度属性的PBR材质，是的子集，除了继承了他的这些属性以外，还新增了清漆、透光率、反射率、光泽、折射率等等清漆层属性可以用来模拟物体表面刷了一层透明的模的范围0到1，默认0。关于MeshPhysicalMaterial材质是Three.js中的一种材质类型，它是基于物理的渲染（PBR）材质，可以模拟真实世界中的光照和材质反射。它支持金属和非金属材质，可以设置粗糙度、金属度、环境光遮蔽、法线贴图、位移贴图等属性，以实现更真实的渲染效果。还支持高光反射和透明度，可以用于创建逼真的玻璃、水

2023-07-17 09:37:13 1351

原创 Three.js——十一、PBR材质金属度、粗糙度以及环境贴图的使用

如果想使用环境贴图对scene所有Mesh添加贴图材质，可以通过Scene的场景环境属性.environment实现,把环境贴图对应纹理对象设置为.environment的属性值即可。用于设置环境贴图的强度。当然在实际开发中，环境贴图的不同也会对渲染效果造成影响，也需要选择合适的贴图，往往这种贴图可以让美术提供即可。表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。总结：粗糙度越小，反射效果越强，如果设置为0，那么他将完全镜面反射，等同于镜子。

2023-07-11 12:08:49 1798

原创 Threejs——十、关于 gltf 模型的介绍、引入方法以及设置属性添加功能（结尾附代码）

前端推荐使用 Blender 三维建模软件，模型推荐使用 gltf 或者 glb 文件。后续会更新 Blender 的使用方法glTF（GL Transmission Format）是一种用于传输和加载 3D 模型的开放标准格式。它是由 Khronos Group 开发的，旨在提供一种轻量级、高效、可扩展的 3D 模型格式，以便在 Web 和移动设备等平台上实现快速加载和渲染。glTF 格式支持包括几何体、材质、纹理、动画和场景等多种 3D 模型元素，并且可以使用 JSON 格式进行序列化和压缩，从而减少

2023-07-11 11:17:03 6255

原创 Threejs——360°jpg全景环绕

360°全景环绕

2023-06-29 10:00:23 1061

原创 ThreeJS案例一——在场景中添加视频，使用人物动作以及用键盘控制在场景中行走的动画

首先我们需要两个模型，一个是场景模型，另一个是人物模型。人物模型我这里用的Threejs官网中的给的模型，名称是。当然人物模型也可以自己去这个网站下载sketchfab，下载后给模型添加动画mixamo下载模型动画这里注意一下用Blander软件给模型添加动画的两种方式，具体写法的区别后面会说到方式一：把每个单独的动画拆分出来方式二：将所用到的动画统一放在一个时间戳中场景加载完后再放入人物模型：这里需要将控制器给取消，并且将初始镜头删除，把镜头给到人物模型到这里模型就全部引入完成注意：视频无

2023-06-24 16:42:11 2623

原创 Element-Plus——暗黑主题设置

暗黑主题设置

2023-06-15 10:55:39 2420

原创 Vue3——404、重定向以及导航守卫

【代码】Vue3——404、重定向以及导航守卫。

2023-06-15 09:31:48 1076

原创 Vue3——首屏加载速度过慢解决方案

具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。在函数内部，创建了一个frameCount ref对象，并定义了一个updateFrameCount函数，用于递增frameCount的值，并在达到maxCount时停止递增。最后，函数返回一个defer函数，用于检查当前帧数是否达到指定的值n。用于实现一个延迟函数。

2023-06-06 11:20:10 2447

原创 Three.js——九、纹理贴图、纹理对象阵列、地面网格辅助观察、UV坐标以及动画

color 和 map 同时使用会出现重叠混合的现象，最好就是设置了 color 就不用设置 map，设置 map 就不用设置 color。把一个背景透明的.png 图像作为平面矩形网格模型 Mesh 的颜色贴图是一个非常有用的功能，通过这样一个功能，可以对 three.js 三维场景进行标注。texture.wrapS是WebGL中纹理对象的属性之一，用于指定纹理在水平方向上的重复方式。，将图片作为圆形的材质贴图，那么他就会将一张方形图片剪切渲染为圆形效果。的UV坐标会对颜色纹理贴图.map进行提取，

2023-06-05 12:03:38 1646

原创 Vue3接收静态页面URL中携带的参数

从HTML页面中的a链接里携带的参数要在vue3项目里接收到此参数目前有两个项目一个静态项目一个vue项目，我需要从静态页面的链接跳转到Vue项目中，并且这两个项目可以通过参数进行关联这里有两种方案：一种是将静态页面中的id存在本地，在vue中通过获取本地id传给接口从而渲染页面影响：可能会出现跨域第二种通过getUrlKey.js获取URL地址栏中跳转携带的参数。

2023-06-02 13:26:46 2258

原创 Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象

remove和visible的区别：remove是等同于删除某个模型对象，visible只是把模型隐藏起来。// 光源和网格模型Mesh对应一样是三维场景的一部分，自然需要添加到三维场景中才能起作用。，模型默认是以原点为中心，所以要把他拿到X、Y轴上方就给他加一半的坐标，之后将父级。这里跟js中的remove()方法一致，选择对应的父节点删除里面的子节点即可。// 支持的参数：fov, aspect, near, far。这里注意：如果隐藏模型的材质，将会把所有同材质的模型进行隐藏。

2023-06-01 21:20:20 4854

原创 Three.js——七、Group层级模型

通过 THREE.Group 类创建一个组对象 group,然后通过 add 方法把网格模型 mesh1、mesh2 作为设置为组对象 group 的子对象，然后在通过执行 scene.add(group)把组对象 group 作为场景对象的 scene 的子对象。也就是说场景对象是 scene 是 group 的父对象，group 是 mesh1、mesh2 的父对象。我们在开发的时候，会优先加载外部的模型，之后要对模型上添加标签锕，标点啊等等，就需要批量给子对象设置节点名称。

2023-05-30 12:48:07 1923