织网的博客

原创 使用 BroadcastChannel 实现跨标签页通信及页面跳

与Vue Router相结合，我们不仅可以实现跨标签页的数据同步，还能灵活控制页面间的跳转，极大提升了用户体验和应用的一致性。在现代Web应用程序开发中，尤其是基于Vue.js构建的单页面应用（SPA），跨标签页的数据同步与页面控制是一项常见需求。设想这样一个场景：用户在一个标签页内完成了某个重要操作（例如登录成功），这时我们希望在所有打开的同一应用的其他标签页内同步这一状态，并自动跳转至主界面。API和Vue Router来实现跨标签页通信，并在此基础上实现在接收特定消息后进行页面跳转的功能。

原创 提升SCSS代码效率与可维护性的实用Mixin常用示例

随着CSS预处理器如Sass（尤其是其SCSS语法）的普及，开发人员拥有了更强大、更具灵活性的方式来组织和复用CSS样式。其中一个核心功能便是mixin，它允许我们定义一组可重用的样式规则，并在多个地方通过简单的@include指令来应用这些规则。本文将深入探讨十个实用的SCSS mixin示例及其实际应用场景。

原创 Uniapp小程序端打包优化实践

经过这一系列优化措施，我们的小程序包体积成功从原来的近3MB降低到约1.5MB，加载速度有了显著提升，用户反馈页面打开更加流畅，整体体验得到了极大改善。在我们最近开发的一款基于uniapp的小程序项目中，随着功能的不断丰富和完善，发现小程序包体积逐渐增大，加载速度也受到了明显影响。另外，考虑到WebP格式的高效率，将部分图片转换为WebP格式。鉴于主包体积接近微信小程序2MB的限制，我们将部分非首屏展示的功能模块（如用户中心、设置页等）迁移到子包中，实现按需加载，显著减少了首次加载时的数据传输量。

原创 优化微信小程序更新体验：异步更新与强制更新方案解析

在微信小程序的开发和迭代过程中，新版本覆盖率的问题一直备受关注。由于小程序采用异步更新机制，在用户首次打开或冷启动时才会检查并下载新版本，导致部分用户无法及时应用上最新版本。为了解决这一问题，微信团队经过深入研究和讨论，提出了几种解决方案，并最终确定了结合异步更新与强制更新的折衷方案。

原创 Nest.js、Java与Python在后端开发中的对比分析及适用场景

如果你希望利用现有前端技能平滑过渡，同时寻求高效全栈开发体验，Nest.js可能是最佳选择。而如果你打算拓宽技能范围，涉足数据分析或AI领域，并不介意投入时间学习一门新语言，Python会是一个很好的补充。若目标是进入大型企业或者追求更高稳定性和扩展性的后端架构，Java则是传统且稳健的选择。

原创 TypeScript使用技巧内置工具类型详解

在 TypeScript 开发实践中，为了提升代码的可读性、健壮性和可维护性，开发者可以利用一系列内置工具类型以及一些关键的类型操作技巧。本文将深入探讨这些实用工具类型（如Record、Partial、Required、Readonly、Pick、Exclude、Extract和Omit）的工作原理，并结合实际应用场景展示如何运用它们进行类型安全编程。

原创 组件封装原则

在Vue中封装组件时，遵循低耦合、高内聚和可维护性的原则非常重要。

原创 JavaScript 优化代码分支，让你的代码更优雅

不过开发者直接控制这部分的可能性较小，但编写高效、易于理解的代码有助于引擎进行优化。else if，尤其是当每个case块体包含大量代码时，可以提高可读性。总结来说，优化分支映射的核心思想是将条件与动作解耦，使代码更加模块化和简洁易懂，同时也利于后续维护和扩展。根据业务场景，有时候可以通过数组、集合或其他数据结构来驱动程序流程，而不是通过大量的条件分支。将复杂的逻辑拆分为独立的函数或模块，使得整体代码结构更清晰，同时也有利于复用。将不同的行为封装到单独的对象中，并根据条件选择执行哪个对象的方法。

原创 uniapp 无限滚动商品

<template> <view> <view id="dibu" class="container" ref="container"> <view class="marquee1" id="marquee1"> <view class="" style="width: 300rpx;height: 300rpx;background: #999;margin-left: 10rpx;color: #fff;display:

原创 判断是否触底 hooks

【代码】判断是否触底 hooks。

原创 uview表单 hooks

首先，我们可以创建一个自定义的Hook来处理表单逻辑。在这个例子中，我们创建了一个名为useFormData的Hook，它接收一个JSON对象作为参数，该对象包含了表单数据、表单项的配置等。在UViewUI库中，使用hooks封装表单二次可以让我们以更灵活的方式使用表单组件。接下来，我们可以使用useFormData Hook 来创建表单组件。在组件中，我们可以通过传递一个JSON对象作为参数来配置表单。// 在这里可以处理表单提交的逻辑，比如发送到服务器等操作。

原创 视频 + 轮播 uniapp

<template> <view class="content"> <!-- 轮播区 --> <view class="swiper-area w-full"> <swiper class="h-full" indicator-dots circular="true" duration="400" :current="swiperIdx" @change="swiperChange"> <swiper-item

原创 UI设计切图规范

移动UI设计切图是UI设计师最重要的设计输出物，切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准，同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。

原创 uniapp vue3 微信公众号打开小程序

/小程序的appId。//生成签名的时间戳。//生成签名的随机串。

原创 vite + vu3 构建配置多页面打包

最近有多页面项目需要重构，使用vite + vue3 进行搭建，我只给出了我成功配置并在使用的方案

原创 git merge命令 使用 合并分支

git merge命令用于将两个或两个以上的开发历史加入(合并)一起。

原创 vue 弹窗 惯性滚动 加速滚动

惯性滚动（也叫 滚动回弹，momentum-based scrolling）最早是出现在 iOS 系统中，是指 当用户在终端上滑动页面然后把手指挪开，页面不会马上停下而是继续保持一定时间的滚动效果，并且滚动的速度和持续时间是与滑动手势的强烈程度成正比。抽象地理解，就像高速行驶的列车制动后依然会往前行驶一段距离才会最终停下。而且在 iOS 系统中，当页面滚动到顶/底部时，还有可能触发 “回弹” 的效果。

原创 防高德/泡泡玛特抽盒机 滑动弹出层 uniapp slide-popup

点击上滑下滑弹出层

原创 vue 获取滑动方向指令/左/右/上/下 v-touch

【代码】vue 获取滑动方向指令/左/右/上/下 v-touch。

原创 uniapp 两个自定义导航栏或按钮 不能多次跳转问题

uni.navigateTo 保留当前页。(不会关闭当前页)跳转到某个页面内。它会进行叠加，在h5与小程序上频繁互跳，就会出现不能跳转问题。uni.redirectTo关闭当前页面，跳转到应用内的某个页面。我这里使用的是 uviewui 路由跳转api -使用 uni.redirectTo可以解决这个问题。

原创 react hook websocket 封装

简单好用的 websocket hook

原创 uniapp 悬浮球

基于uni-app的通用组件（支持App，微信小程序、H5）； 新增可拖拽的悬浮球。

原创 抓娃娃营销工具 uniapp

【代码】抓娃娃营销工具 uniapp。

原创 uniapp 区分环境打包配置

配置如果没有package.json，通过命令npm init -y创建。删除package.json 初始化配置 ; 直接复制底下代码属性UNI_PLATFORM仅支持填写uni-app默认支持的基准平台，目前仅限如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qqBROWSER 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值：chrome、firefox、id、edge、safari、hbuilderxtitle ..

原创 react-use react hook 库

根据绑定器的不同，你可能会在ES6命名导入语句中遇到缺少依赖项的错误。有些钩子要求安装对等依赖项，因此我们建议单独导入。如果你希望同时使用这两种方法，你可以通过将以下配置添加到.babelrc文件中，将命名的导入语句转换为使用babel-plugin-import的单个导入语句。你需要安装React 16.8.0或更高版本才能使用Hooks API。或使用 ES6 命名导入。你可以分别导入每个钩子。...

原创 常用工具函数 持续更新

只刷新一次页面获取url参数对象

原创 Pinia的数据持久化插件 pinia-plugin-persist

利用持久化工具 pinia-plugin-persist 进行数据持久化储存

原创 React: FC(Hooks) 对比 Class Component

是否有等效于componentDidCatch的React钩子(Hook)？所以我可以让这个组件成为一个函数而不是一个类？我有一个简单的组件，它充当我的React应用程序中的错误边界，并将任何错误传递给日志服务。

原创 技术方案设计文档

以上需求还有很多细节点，就不一一阐述编辑器画布使用的组件和渲染逻辑和h5完全一致，为了两边一致，应该抽离出来提供给它们使用，从而保证制作的时候和渲染出来的h5保持一致考虑自研服务前，先列出我们统计所需的功能我们需要实现分渠道统计这个需求，要实现这个需求，我们就需要自定义事件统计包括：思路：vuex storevuex getter......

原创 react 集成 wangEditor组件 可上传图文

简洁易用，功能强大快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。支持 JS Vue React不依赖任何第三方框架，可用于 jQuery Vue React 等。wangEditor 提供了官方的 Vue React 组件。踩过 4000+ 坑wangEditor 开源多年，有大量用户使用和反馈，我们已解决了太多的用户问题（详见 github issues）。...............

原创 倒计时组件 兼容 ios/安卓

倒计时 uniapp /vue自行修改

原创 简单易修改的弹框组件

弹窗组件适用框架 vue, uniapp使用再uniapp 框架中可简单修改标签与尺寸单位后使用px与rpx

原创 长列表性能优化方案 memo

在计算机领域，记忆化是一种主要用来提升计算机程序速度的优化技术方案。它将开销较大的函数调用的返回结果存储起来，当同样的输入再次发生时，则返回缓存好的数据，以此提升运算效率。注: 在 《JavaScript 忍者秘籍》的 3.2.2 节中「自记忆函数」中有这样的介绍：记忆化是一种构建函数的处理过程，能够记住上次计算结果。在这个果壳里，当函数计算得到结果时就将该结果按照参数存储起来。采用这种方式时，如果另外一个调用也使用相同的参数，我们则可以直接返回上次存储的结果而不是再计算一遍。像这样避免既重复又复杂..

原创 vue3 使用 jsx

<script lang="tsx">import {defineComponent, ElSelect, ElOption } from 'element-plus'import { ref, reactive } from 'vue'import { map } from 'lodash-es'let selectionValue = ref('子应用')const selectionOptions = reactive([ { value: '子应用1',

原创 vue 路由报错

TypeError: Failed to fetch dynamically imported module: http://192.xxx.xxx.xx:4000/src/views/orderManage/TradeOrder/TradeOrder.vueUncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://192.xxx.xxx.xx:4000/src/views/orderManag

原创 解决eslint空格报错等问题

.eslintrc.js中找到rules 下添加'no-irregular-whitespace':'off',

原创 2022/5/12 选股记录

5月12号 股票池周线股日线股日线ETF基金首板股免责声明本文章仅供参考，不作为投资决策的依据，本文章不对因剧此操作产品的盈亏承担任何责任。复盘记录收盘总结5月12日周四收盘总结+下个交易日思路前瞻（一）情绪周期和题材梳理数据看情绪 情绪总体感受：情绪退潮回落 涨停家数78家，昨天涨停家数95家 创业板涨停5个，昨天涨停8个 连扳股家数：17（20个活跃度门槛），昨日连扳股家数：33 连扳最高标高度：10（ 新华制药 ） 跌停家数6家，昨天跌停家数4家 今日炸板

原创 i18n-ally 没有效果

原创 2022/5/9 选股记录

5月9号 股票池周线股日线股日线ETF基金首板股免责声明本文章仅供参考，不作为投资决策的依据，本文章不对因剧此操作产品的盈亏承担任何责任。复盘记录收盘总结下个交易日思路前瞻（一）情绪周期和题材梳理数据看情绪 情绪总体感受：情绪回暖 涨停家数138家，昨天涨停家数83家 创业板涨停8个，昨天涨停6个 连扳股家数：24（20个活跃度门槛），昨日连扳股家数：30 连扳最高标高度：7（ 新华制药浙江建投 ） 跌停家数0家，昨天跌停家数13家 今日炸板率23.7%，昨日2

原创 micro-app 微前端脚手架搭建

关于micro-app在micro-app之前，业内已经有一些开源的微前端框架，比较流行的有2个：single-spa和qiankun。single-spa是通过监听url change事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。因为qiankun是基于single-spa进行封装，所以