随笔分类 - 小程序、VUE
摘要：### 背景 前段时间给基于 vue3 的 H5 项目做一些优化，该项目经常会有一些页面间的通信，譬如选择地址、乘机人等信息后回填到上一个页面。对于这种简单、频繁的通信，实在不想搞成**重火力**（eg:pinia）。最好让使用者用完即走，不用操心除业务逻辑之外的任何事情。 ### 路由控制页面通信
阅读全文
摘要：## 3996 条路由？  `addRoute`函数用了大约1s才执行完毕。通过观察，发现居然有3996条路由记录
阅读全文
摘要：背景 某app嵌入了航管的H5页面，在测试过程中，发现其中一个页面白屏。最简单的方案就是代理到本机，看看到底是哪里的bug。 线上链接：https://wtest.133.cn/hangban/vue/jipiao/home 本地链接：https://wtest.133.cn/dev/lfy/han
阅读全文
摘要：背景 随着业务的发展，弹窗逐渐替代翻页，承载越来越多的用户需求。由于没有统一、好用的公共弹窗组件，业务同学通常会编写属于自己的弹窗，这造成了一些问题： 用户体验不一致 大量重复代码，不易维护和升级 弹窗滚动穿透 未设置 iPhone 手机底部安全区域 我们急切的需要提供一个公共的弹窗组件，不仅要解决
阅读全文
摘要：插件NPM地址vite-plugin-webpackchunkname vite 生产环境打包的问题 第一次打包： dist/static/js/index-061c90a0.js 60.19 KiB / gzip: 25.74 KiB dist/static/js/autoplay-0b4333d
阅读全文
摘要：我司现在使用vue3做为新项目的框架，设计了如下的目录： |--src |-- assets/ |-- boot/ |-- components/ |-- config/ |-- lib/ |-- projects/ |-- flight/ |-- promotion/ |-- member/ |-
阅读全文
摘要：背景 基于复杂的历史原因，我们正在开发、维护一个非典型前端项目：使用 vue2 开发页面，编译打包后，由 express 进行缝合、响应。 目前 gitlab 上统计仓库大小为341.9 MB，我本机全量编译打包时间已经攀升到 6 分钟左右。当多个分支频繁切换时，“那画面太美我不敢看”。 前不久优化
阅读全文
摘要：uniapp 让我们轻松使用 vue 开发各种小程序。然而，我在实际开发中发现，随着代码数量的不断增长，有两个问题越发凸显： 编译时间不断拉长 编译产物越来越大 以我本机（i5-6500CPU @ 3.20GHz，内存16G，64位操作系统）uniapp项目为例：一次全量生产环境编译，花费时间3mi
阅读全文
摘要：背景 在 App.vue 文件中通过 addRoutes 动态添加路由。访问路由 /login，我发现 this.$route 返回的数据中，meta.a 却是 undefined。 如果一秒后再次访问 this.$route，meta.a 为 1。这是为何？ create() { const ro
阅读全文
摘要：一、ES module 减少服务启动时间 import { foo } from './other-module' 由于大多数现代浏览器都支持上面的 ES module 语法，所以在开发阶段，我们就不必对其进行打包，这节省了大量的服务启动时间。另外，vite 按需加载当前页面所需文件，一个文件一个h
阅读全文
摘要：vite vite是小尤开发的下一代前端开发构建工具，快速的热更新模式，使得开发阶段的更新时间不随包的大小而增加，极大的改善了前端开发体验。闲话少叙，赶紧来体验一波。 相信跟着vite开发指南，你已经轻松的启动了项目。但根据实际项目开发经验，我们还需要添加一些内容。 scss 配置 我们项目默认使用
阅读全文
摘要：背景 在 vue 项目开发中，对于大多数页面的初始化，都需要维护和业务无关的三个状态：pending、loaded、error，并根据状态显示不同的内容。譬如： <template> <div> <div v-if="error">{{error.message}}</div> <div v-els
阅读全文
摘要：背景 机票 H5 基于 VUE 进行开发，是一个成熟的、多人协作的 webapp，承接了大量第三方渠道。 不同的渠道有不同的需求，比如有个别渠道需要更换样式/图标，以符合他们的视觉规范。虽然我们对色值做了全局的配置，但由于各种原因，还是有部分色值被硬编码到代码中了，图标也分散在各个文件中。 针对这一
阅读全文
摘要：日常业务开发，会频繁请求接口，非常耽误功夫。一个简单的方法是把数据缓存起来，然而我并不想每次提交前还要关心缓存数据是否被移除。 所以，要实现： 将数据复制到项目文件夹中，名字就叫 apiMock.js，不限文件个数和位置； 无侵入、不影响打包； 项目环境（重要） vue-cli3、webapck4
阅读全文
摘要：对于 PC 端的 VUE 项目来讲，刷新页面导致数据消失是一个绕不开的坑。好在 vuex-persistedstate插件能够解决这个问题。 vuex-persistedstate 它的原理是： 每次 mutation 都将整个 store 保存到本地（localStorage/sessionSto
阅读全文
摘要：背景 我司前端项目框架主要是 vue，多个项目聚集在同一个仓库下，共用公共组件、页面、工具函数等。基于以上前提，我们需要对不同的项目分别进行打包，并解决单页应用强制刷新引起的问题，所以没有使用 vue cli 来创建，而是使用 webpack 重新编写了一套打包流程。 随着代码量的增长（百万行级），
阅读全文
摘要：关于微信小程序授权登录的最佳实践，我觉得最重要的一点是：在满足需求的情况下， 不侵入业务逻辑 。 "源码详见/src/request/" 所以，首先需要搞清楚有哪些需求。（注：本文只针对小程序原生框架） 对于大部分应用，并不是所有页面/接口都需要登录才可访问，这就要求登录功能需要实现：仅在需要登录的
阅读全文
摘要：Do Not Repeat Yourself 如何提高代码质量，方法有许多:抽象、模块、组件化，我认为它们的中心点都是——Do Not Repeat Yourself. 小程序组件化 我们先看看小程序自带的组件化能力： 模板，通过 `` 引入 success 样式，通过 引入 success js
阅读全文
摘要：路径： 由上图可知， 导出的对象（如下），作为一个属性将会注入到 中。 const patternTypes = [String, RegExp, Array] export default { name: 'keep alive', abstract: true, props: { // 根据组件
阅读全文
摘要：本着苍蝇虽小也是肉的精神...... 目标： 我们希望每次新建 文件后， 能够根据配置，自动生成我们想要的内容。 方法： 打开 编辑器，依次选择“文件 首选项 用户代码片段”，此时，会弹出一个搜索框，我们输入 ， 如下： 选择 后，VSCODE会自动打开一个名字为 的文件，复制以下内容到这个文件中：
阅读全文
浙公网安备 33010602011771号