- 博客(73)
- 收藏
- 关注
RSS订阅原创 浏览器跨标签页通信
现代Web开发中的跨标签页通信是一个多样化且复杂的话题。通过结合LocalStorage、Broadcast Channel API、SharedWorker、postMessage以及Cookie，开发者可以选择适合自己应用场景的最佳方案。理解这些技术的优势和局限性对于设计一个高效、安全且用户友好的Web应用至关重要。
2024-04-23 14:21:59
794
原创 解决input事件监听拼音输入法导致高频事件
compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。触发compositionstart时，文本框会填入 “虚拟文本”（待确认文本），同时触发input事件；在文本框中输入内容，执行查询接口，但遇到一个问题，当用拼音打字写汉字去搜索的时候，会输入一些字母拼成汉字，怎么能监听等拼音文字输入完成后再触发文本框监听事件。
2024-03-11 22:58:44
543
原创 Flutter中系统Emoji通过substring裁切后无法识别导致渲染错误
所以就出现了，某下情况下使用substring裁切带emoji的字符串的时候，就会出现渲染错误的问题。tip：在 Flutter 输入框中以苹果的数字图标 1 2 3 4 5 6 7 8 9 0 为开头的内容，输入到输入框中就会导致后续的所有字符都无法识别。一个emoji 的长度是2 或者 3，那么我们 substring 的时候，就会特殊情况下把emoji裁切了一半的情况。这样就会导致显示错误。遇到渲染错误的情况我第一时间想到的是这个emoji识别不出来，导致的显示出错。想要了解的可以看这个。
2023-09-06 10:35:31
614
原创 Flutter Widget之CompositedTransformTarget+CompositedTransformFollower（例如：功能引导指示，跟随弹窗等功能。）
在合成阶段（在绘制阶段之后，如 WidgetsBinding.drawFrame 中所述）合成此小部件时，它会应用一个转换，将链接的 CompositedTransformTarget 的 targetAnchor 和此小部件的 followerAnchor 结合在一起。如果父级覆盖屏幕，这很容易实现，所以这个小部件通常用作应用程序范围的 Overlay 中的 OverlayEntry 的根（例如，由 MaterialApp 小部件的导航器创建）。例如：功能引导，跟随弹窗等功能。
2023-08-02 14:29:50
391
原创 Flutter 中实现截图指定控件并进行微信分享和本地存储
我们拿到控件生成的 ByteData，通过 ByteData.buffer.asUint8List() 拿到 Uint8List ，然后通过 RenderRepaintBoundary 中的 toImage() API 来获取当前控件生成的 ByteData。上面我们已经拿到了，生成 png 文件了，下面的就直接根据 fluwx 的文档直接去用就可以了。之后获取临时的缓存目录，File().create() 创建 一个空间的 png File。想要仔细了解 image_gallery_saver 点。
2023-07-27 14:37:59
802
原创 微信开放标签 wx-open-launch-app 拉起 Flutter APP 白屏。
但是在 Flutter 项目中使用微信开放标签拉起 APP 会跳转进一个 native 白屏界面，只有你返回的时候才会返回到 flutter 的 页面，这就非常的奇奇怪怪。大家应该都知道在微信浏览器里面是无法直接拉起 APP 的，需要对接微信的开放标签 （wx-open-launch-app） 拉起 APP。我把这个example 的配置全部拿到新建的空白项目中后，就不会在跳到 native 的白屏界面。一开始怀疑是项目代码有问题，倒是我哪怕是新建一个空白的项目去拉起还是白屏，这就比较难搞了。
2023-05-05 10:29:41
513
原创 Flutter 开发一个自己的 package(纯Dart)并提交到pub.dev上
发布你的 package 之前，确保检查了这几个文件：pubspec.yaml、README.md 和 CHANGELOG.md，确保它们完整且正确，另外，为了提高 package 的可用性，可以考虑加入如下的内容：
2023-01-12 15:48:21
1235
原创 手写极简VUE（MVVM） 实现 v-click 和 v-model
手写极简MVVM实现了 {{}} 模板数据解析v-click事件c-mode指令
2022-12-07 20:09:48
956
转载 provider: ^6.0.4（来自于文档）
对 InheritedWidget 组件的上层封装，使其更易用，更易复用。使用 provider 而非手动书写 InheritedWidget，有以下的优势:简化的资源分配与处置懒加载创建新类时减少大量的模板代码支持 DevTools更通用的调用 InheritedWidget 的方式（参考 Provider.of/Consumer/Selector）提升类的可扩展性，整体的监听架构时间复杂度以指数级增长（如 ChangeNotifier， 其复杂度为 O(N)）
2022-10-24 11:20:49
190
原创 vite + react + ts 配置路径别名alias
path 模块是 node.js 的内置模块，而 node.js 默认不支持 ts 文件的，所以需要安装 @type/node 依赖包。的时候才不会提示是否安装你。根据需要进行配置路径别名。
2022-09-05 17:37:19
1635
原创 React -- Poratal CssModule Fragment 字体库 Context Class.ContextType UseEffect
React -- Poratal CssModule Fragment 字体库 Context Class.ContextType UseEffect
2022-09-01 17:27:38
306
原创 el-tabale 多选添加 分页 默认选中
el-tabale 多选添加 分页 默认选中1. 子组件 `initData` 初始化获取数据之后 通过 `this.$nexttick(()=>{})` 对 `el-table` 进行默认选中。当前选中的项 包括三部分 ：2. 需要吧这三项进行合并去重，存储到 `currentSelect` . 然后根据 `el-table` 当前页的数据 过滤后 默认选中。默认选中会刷新 `selectionGoodsList` 为当前页面选中的数据。3. 确认选中的时候 就更新所有的选中项 `currentSe
2022-08-10 15:21:29
1538
原创 ES13 - ES2022 - 第 123 届 ECMA 大会批准了 ECMAScript 2022 语言规范
2022 年 6 月 22 日，第 123 届 ECMA 大会批准了 ECMAScript 2022 语言规范，这意味着它现在正式成为标准。
2022-08-08 14:00:09
173
原创 公众号测试号 进行H5授权获取code《前端部分》
Vue-H5 微信公众号静默授权。从注册测试号到进行授权。目前仅支持微信浏览器内部进行授权，还没有在其他浏览器进行授权的逻辑。公众号授权进行开发调试的时候需要微信浏览器访问访问电脑端开启的项目服务，之后会讲手机怎么访问电脑开启的项目服务。...
2022-07-08 10:34:47
2567
1
原创 Flutter
实现如截图所示的 多选功能实现代码：实现 多选中的 每一项的代码：import 'dart:core';import 'package:flutter_screenutil/flutter_screenutil.dart';import 'package:flutter/material.dart';/// @author XCC/// @创建时间：2022/5/9/// 工具菜单checkbox版子项class ToolMenuCheckboxItemWidget ..
2022-05-09 22:36:14
353
原创 element中select，值更新视图不更新
一、 业务逻辑使用el-table的自定义列功能，同一行数据的两列有互动，当一列（值来源）数据改变，另一列（默认值）的el-select无法选中值（实际v-model对应的数据已改变，但是页面上没有更新），如图：二、原因默认值这一列对应的select的v-model对应的字段是在table生成后动态插入的，初始的数据结构类似：//data 为el-table的datavar data=[ {src:'param'}]src字段改变后，在值来源的select的chan..
2022-03-13 11:53:24
3772
转载 初学three.js
初学three.js开始之前的准备工作创建一个场景渲染场景是立方体动起来结果开始之前的准备工作在html文件中通过cdn导入threejs的包，之后你就可以在获取到threejs的全局变量THREE创建一个场景为了真正能够让我们的场景借助threejs来进行显示，我们需要先初始化几个对象：场景、相机和渲染器，这样我们就可以通过摄像机看到我们渲染出的场景了let scene = new THREE.Scene();let camera = new THREE.PerspectiveCamera(7
2022-03-08 16:24:53
1035
原创 HTTP缓存机制
web缓存：数据库缓存，服务器缓存，浏览器缓存；浏览器缓存：indexDB localStorage(5M);sessiStorage(5M);Cookie(4K) HTTP缓存HTTP缓存：强缓存(expries Cache-Contral) 协商缓存(Etag:if-none-match Last-Modifiy:if-Modify-Since)浏览器第一次请求浏览器再次请求：为什么已经有了Last-Modifiy 还需要ETag ？1. Last-Modified.
2022-01-25 15:12:45
621
原创 VUE插件 --（来自官方文档）
插件插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开install()方法的object（ { install:xxxx } ），也可以是function1、编写插件每当这个 插件 被添加到应用程序中时，如果它是一个对象，就会调用对象中的install方法。如果它是一个function，则函数本身将被调用。两种情况调用的函数都会接受两个参数：Vue.creatApp生成的对象和自己填写的options；差劲最好单独在一个文件中编写 暴...
2022-01-15 14:43:40
909
原创 web局部打印
vue项目对部分DOM进行打印通过$ref 获取需要打印的DOM注册自定义全局方法$printimport Print from '@/common/print.js' // 引入附件的js文件Vue.use(Print) // 注册print.jsprint.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, printType, options) { if (!(thi.
2022-01-13 11:43:14
126
原创 directive 拖拽dialog
其实没什么东西就是添加一个自定义指令，就是在dialog的头部的时候，添加一个onmousedown 事件，获取当前鼠标的位置 然后更新dialog的定位位置；copy可用： bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') dialogHeade.
2022-01-06 16:11:34
140
原创 directive 自定义指令
设置自定义指令实现 一些通用的功能，样式等Example ：（文档上的）<div id="dynamicexample"> <h3>Scroll down inside this section ↓</h3> <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p></div>const app = Vue.c
2021-12-24 16:20:03
641
原创 vue3 draggable拖拽
！！首先安装 vuedraggable npm i -S vuedraggable@next一定要带上@next，不然就会报错 很恶心！使用建议看官网。官网：vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。https://www.itxs..
2021-12-21 16:03:59
5888
原创 富文本（vue3）SQL格式化 JSON格式化
先上图看效果：SQL格式化使用的是 codemirror 和 sql-formatter 实现的（建议看文档搞）使用就直接用就可以了，如果用的地方多建议 install 全局组件 <codeEditor v-model:value="code" :scene="type" :height-size="200" ></codeEditor>对富文本编辑器进行封装。直接copy可用<templat...
2021-12-17 21:53:40
2480
原创 VUE3 + TS 使用 Axios（copy可直接使用）
index.ts 用来暴露实例import EnclosureHttp from "@/utils/http/requset";const http = new EnclosureHttp();export default http;request.ts 实现 axios 创建实例 请求拦截 响应拦截 和默认 的get post 封装（偷懒了，没有封装自定义的 get post put delete ）import Axios, { AxiosRequestConfig, A.
2021-12-04 21:52:01
9888
原创 TS 小记 和 Record
Record<K,T>;将petsGroup中的每个值(‘dog’ | ‘cat’ | ‘fish’)都转为 IPetInfo 类型。当然也可以自己在第一个参数后追加额外的值，type petsGroup = 'dog' | 'cat' | 'fish';interface IPetInfo { name:string, age:number,}type IPets = Record<petsGroup, IPetInfo>;const anim...
2021-11-29 22:41:27
1265
原创 vue-cli4 打包配置 部署到github
一、配置打包根目录下添加vue.config.js 自定义相关配置,文件位置名字什么的根据自己喜欢配置，构建大型项目的时候可能需要，自己写着玩的就随便啦，不配置也没有问题。最主要的还是参考官方文档！（官方文档永远的神！！！）配置参考 | Vue CLI????️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/config/// vue.config.jslet version = "";(function () { const d = ne
2021-11-27 12:04:18
365
原创 算法 ：两数相加
一、比较恶心的算法逻辑：因为对链表不了解，所以我最开始想到的是 类似两个数组相加；把两个链表遍历成数组然后倒过来转换成数字，相加后再反转数组；比如：arr1 = [2,8,6] ;arr2= [9,5,2] 把两个数组 reverse() 之后 join() 一下不就能得到 '682' 和 '259'了吗！Number() 之后 在相加 这不就得到 707 吗！ 最后就是 split() 一...
2021-11-25 12:02:57
744
原创 Promise 实现
// promise手写 /* 1.promise状态 pending（等待） resolve（成功） reject（失败） 2. resolve 和 reject 函数 3. then方法的实现 4.发布订阅者模式 实现异步 5.链式调用 ( 返回 普通值 和 promise) 6.resolve reject all race c...
2021-11-19 16:35:24
533
原创 node.js - 笔记 ： 保存喜欢的图片
//引入核心模块const http = require("http");const https = require("https");const fs = require("fs");const cheerio = require("cheerio");for (var page = 1; page < 2; page++) {}// let url = `https://pic.netbian.com/4kdongman/index_${page}.html`for (let .
2021-10-29 16:38:02
241
原创 TypeScript 类型和构造器的签名new
定义构造器签名分为三种方法： 1、字面量定义const myCalss3: new (name: string, age: number) => Teacher = Teacher; 2、接口字面量const myCalss4: { new(name: string, age: number): Teacher } = Teacher; 3、接口定义构造器签名// 接口中定义构造器（构造函数签名） ：人 和 老师interfa...
2021-10-28 16:29:10
1509
2
原创 2021-10-26 下划线转化为小驼峰
将输入的变量名转换为小驼峰写法可能的输入命名格式如下：TestVariabletest_variableTEST_VARIABLE，最终输出为testVariablefunction format( name ) { // write code here if(name == "") return name if(name.indexOf('_') != -1){ name = name.toLowerCase() } l
2021-10-26 10:34:11
510
原创 2021-10-26 算法二叉树遍历
给定一个先序遍历与中序遍历的二叉树，要求求出该二叉树的后序遍历表示形式。对于如下二叉树：其先序遍历为：GDAFEMHZ其中序遍历为：ADEFGHMZ当给定先序遍历与中序遍历时，该二叉树就被唯一的确定下来，这时即可求出二叉树的后序表示为：AEFDHZMG。给定输入中，二叉树中的字符有且仅有一个，且二叉树中的所有节点互不相同输入：两行，第一行为二叉树的先序遍历表示，第二行为二叉树的中序遍历表示输出：一行，二叉树的后续遍历表示function binaryTre.
2021-10-26 10:31:48
168
原创 LODOP打印
PRINT_INT(strPrintTaskName)打印初始化● SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小● ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项● ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项● ADD_..
2021-10-16 09:57:09
611
原创 下载文件保存为Excel
function exportMethod(data) { let token = Vue.cookie.get('token') // 请求头带上token axios.defaults.headers.common["token"] = token; axios({ method: data.method, url: `${data.url}${data.params ? '?' + data.params : ''}`, responseType: 'blob'.
2021-10-08 16:18:10
129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人