- 博客(189)
- 收藏
- 关注
RSS订阅原创 微信小程序开发（六）- uni-app微信小程序商城
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、 H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅Q1：前端 uni-app 开发是开发什么项目？uni-app 的核心口号是“一次编写，多端运行”。使用 uni-app，你可以只写一套代码，然后编译发布到多个平台。各种小程序：微信小程序、支付宝小程序、百度小程序、抖音小程序、QQ小程序、快手小程序等。
2026-05-11 17:07:22
269
原创 微信小程序开发（五）
1.案例效果2.实现步骤自定义tabBar分为3大步骤，分别是：①配置信息②添加tabBar代码文件③编写tabBar代码①能够知道如何安装和配置vant-weapp组件库参考 Vant的官方文档②能够知道如何使用MobX实现全局数据共享安装包、创建Store参考官方文档进行使用③能够知道如何对小程序的API进行Promise化安装包、在app.js中进行配置④能够知道如何实现自定义tabBar的效果。
2026-05-07 19:40:29
382
原创 微信小程序开发（四）
1. 自定义组件组件的创建与引用(1)创建组件①在项目的根目录中，鼠标右键，创建components->test文件夹②在新建的文件夹上，鼠标右键，点击“新建Component③键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js.json.wxml和.wxss(2) 引用组件组件的引用方式分为“局部引用”和“全局引用”，顾名思义：局部引用：组件只能在当前被引用的页面内使用全局引用：组件可以在每个小程序页面中使用(3)
2026-04-29 17:52:21
319
原创 微信小程序开发（三）
①能够知道如何实现页面之间的导航跳转声明式导航、编程式导航②能够知道如何实现下拉刷新效果③能够知道如何实现上拉加载更多效果④能够知道小程序中常用的生命周期函数应用生命周期函数：onLaunch页面生命周期函数：onLoad, onShow,onReady。
2026-04-26 22:57:20
373
原创 【微信小程序问题解决】微信小程序全局 navigationBarTitleText 不起作用
如果你在全局或页面配置中设置了，微信小程序会完全隐藏原生导航栏。在这种情况下，是绝对不起作用的，因为连导航栏都没有了，标题渲染给谁看呢？这时候你需要用 View 和 CSS 自己画一个标题。如果使用了自定义导航栏，请放弃</view>
2026-04-16 21:44:00
523
原创 微信小程序开发（一）
(1) 什么是宿主环境宿主环境）指的是程序运行所必须的依赖环境。例如：Android系统和iOS系统是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！(2) 小程序的宿主环境手机微信是小程序的宿主环境，如图所示：小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc…(3) 小程序宿主环境包含的内容。
2026-04-13 22:56:40
413
原创 TypeScript（三）
现在，我们已经掌握了TS中基础类型、高级类型的使用了。但是，如果要在前端项目开发中使用TS，还需要掌握React、Vue、Angular等这些库或框架中提供的API的类型，以及在TS中是如何使用的。接下来，我们以React为例，来学习如何在React项目中使用TS。使用CRA创建支持TS的项目TS 配置文件 tsconfig.jsonReact 中的常用类型。
2026-04-06 20:11:12
376
原创 TypeScript（一）
TypeScript是JS的超集，TS提供了JS的所有功能，并且额外的增加了：类型系统。所有的 JS 代码都是 TS 代码。JS有类型（比如，number/string等），但是JS不会检查变量的类型是否发生变化。而TS会检查。TypeScript类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。类型注解常用基础类型可以将TS中的常用基础类型细分为两类：1. JS已有类型 2. TS新增类型。1. JS已有类型。
2026-04-03 00:34:01
449
原创 关于 TypeScript 的介绍
静态类型系统从编程语言的动静来区分，TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言。静态类型：编译期做类型检查；动态类型：执行期做类型检查。代码编译和代码执行的顺序：1. 编译 2. 执行。并且，配合VSCode等开发工具，TS可以提前到在编写代码的同时就发现代码中的错误，减少找Bug、改Bug时间。简单来说，你可以把 TS 想象成“带了类型注解的 JavaScript”。TS 并不能直接在浏览器或 Node.js 环境中运行，它需要一个。
2026-03-31 00:18:40
440
原创 【Vue3项目】电商前台项目（六）
如何判断当前用户已经选择了所有有效的规格？已选择项数组['蓝色'，'20cm'，undefined]中找不到undefined，那么用户已经选择了所有的有效规格，此时可以产出数据。如何获取当前的SKU信息对象？把已选择项数组拼接为路径字典的key，去路径字典pathMap中找即可。
2026-03-30 00:03:36
558
原创 【Vue 功能总结】点击规格动态更新禁用状态——底层逻辑“有效路径字典”解析
有效路径字典”并不是 Vue 的某个 API，而是一种前端数据处理与存储的设计思想。它将后端返回的复杂的多维对象数组，扁平化、降维成一个一维的映射表，里面只记录仓库中真实存在（有货）的规格组合路径。// 模拟后端返回的数据{ id: 1, specs: { 颜色: '红', 尺码: 'S' }, stock: 100 },{ id: 2, specs: { 颜色: '红', 尺码: 'M' }, stock: 50 },
2026-03-29 23:09:24
69
原创 【Vue 功能总结】动态面包屑导航
在Web前端领域，它是一种辅助性的用户界面导航方式。通常表现为一串由分隔符（如或首页 > 系统管理 > 用户管理 > 编辑用户一个优秀的面包屑导航组件，不仅能提升用户体验，更是前端架构规范性的体现。通过本文的路由元信息+ 监听路由方案，我们可以实现完全自动化、低维护成本的导航系统。路由定义规范化 + 组件监听自动化 = 优雅的企业级交互。
2026-03-28 17:35:49
50
原创 【Vue知识点总结】如何在二级路由下默认渲染三级路由
在 Vue 中实现二级路由默认渲染三级路由，核心思路在于“指定默认出口”。方案适用场景URL 变化推荐指数redirect 重定向绝大多数中后台系统、常规页面跳转变为目标路由 URL⭐⭐⭐⭐⭐空路径子路由需要隐藏具体路径、简单的嵌套展示保持父路由 URL⭐⭐⭐建议在常规开发中优先使用 redirect。
2026-03-28 17:01:43
149
原创 【Vue 功能总结】地址激活交互实现
地址切换是前端开发中常见的交互模式，本质上是的一种具体应用场景。它通过点击不同的地址项来切换激活状态，同时更新界面显示和URL地址，实现状态持久化。
2026-03-26 14:42:35
126
原创 前端开发中的常用工具函数(六)
后台管理系统中，用户勾选了多条数据进行“批量删除”，要求所有选中的数据状态必须是“待审核”才能删除。这符合数学逻辑（空真，Vacuous truth）：因为数组中没有元素，所以“没有元素不满足条件”。不会改变原数组，但在回调函数中修改数组元素是可能的，但不推荐，这会降低代码可读性并引发副作用。它是数组校验的“守门员”，只要有一个“违规”，大门就会关闭。在前端业务逻辑中，我们经常需要判断一个数组是否“全部满足”某个条件。分步表单中，只有当前步骤的所有必填项都已填写且合法，才能点击“下一步”。
2026-03-23 22:05:36
640
原创 前端开发中的常用工具函数(五)
如果你累积器是对象或数组，请注意不要直接修改累积器的引用（除非你很清楚自己在做什么），这可能会带来副作用。函数，每一次运行会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。在后端接口对接中，有时需要将数组转换为以 ID 为 Key 的对象，以便快速查找。：将数组“压缩”成一个值（这个值可以是数字、对象、数组，甚至是另一个函数）。的强大在于它的返回值可以是任意类型，这使得它能处理非常复杂的业务逻辑。将数组中的元素按类别分组，例如按角色分组用户。虽然强大，但也是最容易出错的数组方法之一。
2026-03-18 22:29:01
386
原创 前端开发中的常用工具函数(四)
在企业开发中（特别是 Vue 响应式系统），这可能导致难以排查的数据污染问题。在前端路由守卫中，判断用户是否有权限访问某个页面，可能需要在权限列表中查找是否存在匹配项。点击“编辑”按钮，需要在一个列表中找到当前行的详细数据，并填充到弹窗表单中。这意味着如果你修改了返回的对象，原数组中的数据也会被修改。这是前端开发中最常见的场景，例如根据 ID 查找用户信息。好用，但在实际开发中如果不注意细节，可能会引发 Bug。如果你需要的是元素的位置（索引）而不是元素本身，请使用。查找数组中第一个大于 10 的元素。
2026-03-18 17:46:32
421
原创 【Vue3项目】电商前台项目（四）
目录二、项目实现2.4 二级分类 + 详情2.4.1 二级分类1. 整体认识和路由配置2. 面包屑导航实现3. 商品列表实现4. 定制路由scrollBehavior2.4.2 详情页1. 整体认识和路由配置2. 基础数据渲染3. 热榜区域实现4. 图片预览组件封装5. 认识SKU组件6. 通用组件统一注册全局2.5 登录2.5.1 登录1. 整体认识和路由配置2. 表单校验实现3. Pinia管理用户数据4. Pinia用户数据持久化5. 登录和非登录状态的模版适配6. 请求拦截器携带Token7. 退出
2026-03-17 20:23:36
567
原创 【Vue知识点总结】请求拦截器携带Token
简单来说，请求拦截器就像是发送请求前的一座“安检站”或“预处理车间”。当你在代码中调用或时，请求并不会立刻通过网络飞向服务器，而是会先经过拦截器。在这里，你可以对即将发出的请求进行“为所欲为”的修改。为什么需要它？核心目的：统一处理，避免重复。// 😫 痛苦的写法headers: {'Authorization': 'Bearer ' + localStorage.getItem('token') // 每次都要写})
2026-03-17 17:56:58
125
原创 【Vue 功能总结】电商购物车图片预览“放大镜”组件实现
步骤动作目的关键点Step 1监听mousemove获取鼠标实时位置使用确保位置计算不受页面滚动影响。Step 2计算遮罩坐标确定放大区域需减去遮罩宽高的一半，使鼠标居中。Step 3边界判断防止遮罩溢出Math.max和Math.min的灵活运用，遮罩必须限制在0到容器宽-遮罩宽之间。Step 4映射大图位置实现放大效果移动方向取反（负值），并根据图片比例计算移动距离。通过本文，我们不仅仅实现了一个 Vue 版本的图片放大镜，更重要的是掌握了其背后的坐标映射原理。
2026-03-14 21:55:54
133
原创 【JS知识点总结】对象属性的“动态访问”
静态访问（点表示法）obj.key这里的key必须是代码中写死的标识符，不能是变量。动态访问（方括号表示法）obj[key]这里的key可以是一个变量表达式或计算结果。const obj = { name: '前端小白', age: 18 };// 静态访问// '前端小白'// 动态访问// '前端小白' -> 这里的 key 是变量使用点表示法时，如果属性名拼错，IDE 通常会报错或提示；但在方括号中使用变量时，如果变量名拼错或变量为undefined。
2026-03-13 20:26:29
37
原创 【Vue知识点总结】Vue路由缓存问题
在实际企业开发中，通常结合两种方法需要保留状态的页面（如列表页、表单页）：使用keep-alive缓存组件，避免重复加载（如若需缓存特定组件（如列表页），可使用keep-alive结合include属性。未缓存的组件（如详情页）会正常销毁重建，避免数据陈旧。需要更新的页面（如详情页、动态路由页面）：简单场景：给加key（强制重建）；复杂场景：使用钩子（精准控制）。示例（结合keep-alive和key<template><div>-- 缓存列表页（保留滚动位置、筛选条件） -->
2026-03-11 18:27:08
199
原创 【JS开发规范】默认导出与命名导出
理由：工具库通常包含多个函数或常量，命名导出能强制开发者使用标准名称，便于 IDE 自动补全和跳转定义。// ✅ 推荐：utils/math.js// 使用时命名导出：适合函数库、常量、工具类，强调严谨性、多导出和 IDE 支持。默认导出：适合组件、单例、主入口，强调简洁性和模块的单一职责。一句话建议如果你的文件只做一件事（如一个组件），使用默认导出；如果你的文件包含多个相关的辅助功能（如工具集），使用命名导出。清晰的模块导出规范，是构建可扩展前端架构的基石。
2026-03-07 18:03:07
382
原创 【Vue3项目】电商前台项目（二）
Pinia 是 Vue 的专属状态管理库，可以实现跨组件或页面共享状态，是 vuex 状态管理工具的替代品，和 Vuex相比，具备以下优势：提供更加简单的API （去掉了 mutation ）提供符合组合式API风格的API （和 Vue3 新语法统一）去掉了modules的概念，每一个store都是一个独立的模块搭配 TypeScript 一起使用提供可靠的类型推断。
2026-03-05 18:07:30
263
原创 【Vue2项目】人力资源后台管理项目（七）
安装echarts包放置两个图表的div，并给定高宽，代码位置(在mounted中初始化图表-代码位置(这里为什么要用watch，因为获取数据在created，初始化图表在mounted，执行mouted时，数据并不能保证能够获取到，所以采用获取watch监听数据变化，只要数据变化，就设置图表的options。
2026-02-26 18:11:55
499
原创 【Vue代码分析】异步数据加载与生命周期
Vue.js 响应式系统Vue 的data属性是响应式的，当数据发生变化时，视图会自动更新。但需要注意的是，在初始状态下访问未定义的嵌套属性（如）会导致运行时错误。
2026-02-25 16:59:14
668
原创 前端开发中的常用工具函数(三)
如果你的项目涉及大量 Emoji 或特殊 Unicode 字符处理，建议使用 ES6 的 str.codePointAt() 配合 String.fromCodePoint()，或者使用扩展运算符 [...str] 将字符串转为数组后再通过下标访问。这意味着对于大于 0xFFFF 的 Unicode 字符（如某些 Emoji 表情 😊 或生僻字），charAt() 可能会返回“代理对”中的一半，导致显示乱码或意外字符。：如果传入的参数不是数字，JavaScript 会尝试转换为整数。
2026-02-24 23:13:06
852
原创 【Vue知识点总结】Vue封装自定义指令
Vue 提供了一系列内置指令，如 v-model、v-show、v-if 等。自定义指令就是以 v- 为前缀，开发者自己定义的指令，用于对普通 DOM 元素进行底层操作。它本质上是一个包含多个钩子函数的对象，这些钩子函数会在元素生命周期的不同阶段被调用。复用 DOM 操作逻辑：将相同的 DOM 操作抽离出来，避免重复代码。提升可维护性：将与数据无关的 DOM 操作集中管理，使组件逻辑更清晰。扩展 Vue 能力：在 Vue 的响应式系统之外，直接与 DOM 交互。指令可以全局注册或局部注册。
2026-02-24 16:59:08
85
原创 【Vue知识点总结】Vue Router动态路由添加与转发机制
动态路由用于按权限加载页面，核心 API 是。转发机制用于解决刷新页面时，新路由未被及时匹配的问题，核心代码是。原理：通过传入参数打断旧导航，强制 Router 重新初始化导航流程并读取最新的路由表。
2026-02-23 16:58:08
79
原创 【Vue2项目】人力资源后台管理项目（五）
default-checked-keys的属性是设置当前选中的节点，但是必须配合node-key属性，因为permIds变量中存储的都是id，必须el-tree组件知道key是哪个字段，所以设置node-key="id"注意，这里我们特地调整了弹层的顺序，因为获取已经拥有的角色是一个异步的过程，如果弹层显示在前，会出现卡顿的效果，表现出缓慢的效果，所以等到获取所有数据之后再弹层。注意：二级权限和一级权限的区别为type，当type为1时，为一级权限，当type为2时，为二级权限。
2026-02-22 20:04:22
448
原创 AI辅助编程工具(十) - MarsCode
作为字节跳动推出的 AI 编程助手，MarsCode 背靠字节强大的“豆包大模型”和“云开发”技术体系。它不仅是一个代码补全插件，更是一个集成了云端开发环境的全能工具。对于开发者而言，它可能是你快速搭建 Demo、修复复杂 Bug 的最佳搭档。
2026-02-15 23:04:22
802
1
原创 AI辅助编程工具(九) - Cursor配合通义干问
通义千问是阿里云推出的大语言模型，具有强大的自然语言理解和代码生成能力，特别适合处理复杂的编程任务描述。
2026-02-15 22:11:51
674
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人