- 博客(39)
- 收藏
- 关注
RSS订阅原创 qiankun 微应用运用&通信
摘要：本文介绍了如何在主应用和微应用中使用qiankun框架实现微前端架构。主要内容包括：1) 主应用中注册子应用并启动qiankun；2) 封装全局状态通信方法；3) 微应用的生命周期配置；4) Vite打包配置；5) 使用Pinia进行状态管理。文章提供了完整的代码示例，展示了如何实现主应用与微应用之间的数据通信和状态同步，为构建微前端应用提供了实用指南。
2026-01-08 17:05:14
572
原创 Vue2 defineProperty响应式原理简单实现
摘要：这段代码实现了类似Vue2的响应式系统，通过递归遍历对象属性，使用Object.defineProperty为每个属性设置getter/setter。当获取或修改属性时会触发日志输出，且会对新赋值为对象的值继续递归设置响应式。核心函数vue2Reactive负责属性劫持，setObsever判断是否需要递归处理对象类型数据。最后对示例对象obj应用该响应式系统并打印结果。
2025-12-24 15:29:20
233
原创 Vue3 proxy 数据响应式的简单实现
这段代码展示了如何使用JavaScript的Proxy对象实现数据监听。通过定义handler对象中的get和set陷阱函数，可以拦截对目标对象的属性访问和修改操作，并输出日志。当访问嵌套对象时，会递归创建新的Proxy实例。主函数observe()检查目标是否为对象，是则返回Proxy包装后的对象。运行示例对obj对象进行代理后，任何属性访问或修改都会被捕获并记录。这种模式常用于实现响应式数据系统，为状态变更提供追踪能力。
2025-12-24 15:08:40
224
原创 Flutter 轮播图封装
本文介绍了使用Flutter的PageView组件封装轮播图的实现方法。主要内容包括：1）利用PageView支持滚动、懒加载的特性实现轮播效果；2）通过Timer实现3秒自动轮播功能；3）添加底部指示器并实现点击跳转功能；4）代码展示了页面控制器、定时器管理及UI布局的实现细节。该方案具有自动轮播、手动切换、指示器联动等功能，可作为Flutter项目中轮播图组件的通用解决方案。
2025-12-15 16:13:51
150
原创 前端创建简易虚拟DOM、render
本文实现了一个简易虚拟DOM系统，包含三个核心函数：createVDOM创建虚拟DOM节点，createElement将虚拟DOM转换为真实DOM，render将DOM渲染到容器中。示例中构建了一个包含嵌套结构的虚拟DOM树（带样式的div包含span和另一个div），最终渲染到页面指定容器。该系统支持属性设置、文本节点和嵌套子节点，展示了虚拟DOM到真实DOM的转换过程。
2025-12-10 16:23:44
137
原创 【echarts】饼图光环、多饼图实现
本文介绍了如何利用Echarts实现四个带光环环绕效果的饼图布局。通过分析两种实现方案：1）使用四个独立饼图可能导致的遮挡问题；2）采用gauge仪表盘绘制光环的优化方案。重点解析了仪表盘配置中的axisLine属性，通过设置渐变颜色和透明间隔来创建光环效果。代码示例展示了如何配置仪表盘的半径、起始角度、渐变色光环样式，并隐藏刻度、指针等非必要元素。最终实现四个饼图均匀分布，每个饼图下方显示独立标题，外围环绕渐变光环的视觉效果。
2025-11-22 10:42:47
415
原创 uniapp Android&iOS 定位权限检查
文章摘要：本文介绍了Android和iOS平台定位权限检查的实现方法。代码通过uni-app跨平台框架，分别针对Android和iOS系统检测定位权限状态。Android部分检查ACCESS_FINE_LOCATION和ACCESS_COARSE_LOCATION权限，并区分Android 10+系统的"始终允许"和"仅在使用时允许"状态；iOS部分则通过CLLocationManager检测授权状态。代码还提供了权限请求功能，根据检测结果引导用户进行相应操作（0-引
2025-07-09 16:47:35
647
1
原创 微信小店打印组件前端web端对接
运营端使用指南：[https://store.weixin.qq.com/chengzhang/webdoc/wiki/544/6c826cffaccc0396/growth_center_manual_for_store?source=7&sourceType=4]注：如使用的是ISV打单或其他软件也需下载。
2025-04-24 16:26:49
1699
原创 Web端版本更新提示--前端处理
根据业务需求不同可以再不同的时机调用，如切换路由时检测是否有更新(搭配路由守卫使用)、发送请求时检测是否更新、登录时检测是否更新。
2025-04-09 16:02:22
250
原创 JavaScript 纯原生JS 2048小游戏
padding;height;width;display;;;;#container/* 声明一个容器 */display;/* 声明列的宽度 */repeat;/* 声明行的高度 */;display;;;color;;.opdisplay;width;margin-top;height;text-align;;font-size;color;
2025-02-13 16:25:25
343
原创 Android 读写文件已授权但是无法在系统储存目录下执行文件操作
在进行Android原生开发时遇到一个问题：在AndroidMainfest.xml里已经声明了文件读写操作权限并且也在代码内部动态申请获取文件读写操作权限，但是依然无法在系统储存目录下进行文件创建、读写操作。综上：操作系统储存目录需要除普通的文件读写操作权限外，还需要配置。的application 下新增配置。
2024-09-03 10:36:48
679
原创 【CSS】文本超过行数显示“展开”、“收起”
ps: 如果使用vue循环，content内部写成多个item的div也可以正常使用。checkbox: 根据是否选中的状态判断对应的展示状态，并控制内容高度。label: 控制checkbox，使用伪元素更好展示对应文字。
2023-08-01 16:47:19
2432
4
原创 js函数的节流与防抖
js函数的节流与防抖 在看面经的时候，会看到有些问js函数的节流与防抖，所以做了一个自己的总结 主要的一个学习思路： 1.为什么要使用节流与防抖 2.了解什么是节流与防抖 3.节流与防抖的实现思路为什么要使用节流与防抖在开发的过程中，我们会遇到一个问题，就是面对一个按钮或者一个事件的持续触发，在频繁的事件回调和计算中，很有可能会出现页面卡顿，导致用户体验极差，那么就需要有种解决方案去防止函数的多次调用，此时就衍生出来节流，防抖什么是节流与防抖，节流与防抖的实现思路1. 防抖基于上述场景
2021-05-26 10:54:44
169
原创 Vue侧边索引跳转
Vue侧边索引跳转效果如图所示：首先要去除不存在的几个首字母（我刚开始没有去除，于是前面是还很正常的跳转，后面就会有偏差）需要跳转的列表要先排好序要明白侧边的索引和列表的index是一一对应的，所以index是关键获取到索引的index，找到列表对应的index，将列表index的offsetTop赋值给document.documentElement.scrollTop(是试出来的，我的情况是滚动条是给到html、body的，可以先测试获取滚动条在的具体地方，再赋值)侧边的布局就是简单的d
2021-05-21 18:30:56
915
1
原创 js DOM弹球
js DOM弹球html和css## css<style> button { margin: 0 100px; } #container { width: 300px; height: 300px; margin: 50px auto; background-color: #fff; border: 1px solid #000; position: relative; } .ball{
2021-05-15 16:11:31
149
原创 js小练习--日历
js小练习–日历## css模块 <style type="text/css"> *{ margin: 0; padding: 0; } .date{ width: 300px; height: 220px; border: 1px solid #000; margin: 100px auto; } .title{ width: 200px; display: flex; font-size: 12px; mar
2021-05-15 15:01:23
240
原创 Vue 底部按钮组件
Vue tab底部按钮组件化tab.vue<template> <div id='tab'> <ul> // 页面切换 <router-link tag="li" v-for="item in itemList" :to="item.msg" activeClass="mylink"> //上面的图标 <span :class="item.className"></span> //下面的文
2021-05-14 10:54:39
671
2
原创 jQuery轮播图
jQuery轮播html布局<!-- 整个轮播区域 --> <div class="container"> <!-- 轮播图 --> <ul class="items" style="left:-200px"> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <
2021-05-02 11:47:13
158
原创 diff
一些关于Vue diff的小小小小总结最近有看到一些关于vue的diff算法的视频，想起我做ToDoList的时候的一些问题，就是v-for循环里key值的绑定最先我的v-for绑定版本与它的执行结果此时出现了一个异常尴尬的事情（不绑定key也是同一个结果）…于是我就懵逼了…怎么这还带自己变？于是我换成了：key=“item.id"结果十分的美好当时还不太明白，怎么小子还有两幅面孔，后来知道了diff上一个我的巨丑图：有一个DOM元素节点，它有两个节点类型相同的子节点里面的内容分别是
2021-04-30 10:57:31
196
原创 Vue基础版ToDoList
基于vue的基础，自己模仿着写了一个ToDoList的界面，还没有加上存储之类的，想用组件开发，但写出来有些乱了，就整理了一下基础版的html部分的布局 <div id="app"> <header> <!-- 输入框 --> <div class="title"> <strong>ToDoList</strong>
2021-04-08 23:07:09
228
原创 网页设计--简易tab栏切换内容栏
html+css部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
2021-03-27 17:00:19
1066
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人