桃小瑞

前言在众多的集成化推送中选择了个推，个推在flutter集成中还是比较简单的，只需要跟着官网一步一步走就可以了。今天这篇文章不涉及到flutter项目个推的集成，只是记录个推离线走安卓厂商时，进行获取一个离线的点击通知数据。 在个推的官网中提供的例子是java的，不符合我的意向，再加上flutter默认是kotlin的，所以本篇文章也是以kotlin的代码为主。 准备工作项目以集成个推推送并配置好了个推的appId和各方厂商的appId、appKey等。 在服务端的推送代码配置中需要添加push_channel键值对，可以参考下面的代码。 123456789101112131415{ "push_channel":{ "android":{ "ups":{ "notification":{ "title":"标题&quo ...

前言最近需要实现一个聊天记录的页面展示，在网上发现没有适合自己的，于是自己就造了一个，总体感觉还不赖。 下面奉上地址、效果图和教程。 效果图 地址 github: https://github.com/xiaorui-23/chat_flutter gitee: https://gitee.com/xiaorui-23/flutter_chat pub.dev: https://pub.dev/packages/chat_flutter pub.flutter-io.cn: https://pub.flutter-io.cn/packages/chat_flutter -> 这个是 pub.dev的国内镜像地址。 上手使用12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import 'package:flutter/material.dart';import ...

前言css 众所周知可以做很多的事情，比如：界面效果、特效、独特的样式等。今天给各位朋友带来的是以box-shadow来画一个很有质感效果的一个盒子。 之前在网上冲浪的时候，发现了这样的一个效果，所以来记录一下。 下面是实现后的效果图。 看着还是不错吧，各位铁子。让我一起往文章下面看看他的实现过程吧。 box-shadow 主角描述什么是box-shadow？属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。 box-shadow 属性使用说明 box-shadow 接收 6 个属性值，当存在多个阴影时则每条阴影以,分割，如下： 12box-shadow: 属性A 属性B 属性C 属性D 属性E 属性F, 属性A 属性B 属性C 属性D 属性E 属性F; 属性值说明 A：值为：inset，表示阴影的扩散状态，不填则 向外扩散，常称 外阴影；当存在值并且为inset时，则向内扩散， 常称 内阴影。 B：X 轴偏移量， 可为 负数。 C ...

gitee 地址gitee地址： gittee地址 本篇目标 结合dat.gui实现界面可视化修改及调试 下载 dat.gui1pnpm i dat.gui 引入及创建引入1import * as Dat from "dat.gui"; 创建12/// 创建 datconst dat = new Dat.GUI(); 使用这里我是装在一个函数里的，但不影响 1234567891011121314151617181920/// 添加菜单function addMenuItem () { // x 轴坐标 dat .add(cube.position, 'x') .max(10) .min(0) .step(0.01) .name('移动x轴') .onChange(value => { console.log('我是当前正在移动的x轴', value); }) .onFinishChange( ...

今天给大家带来的是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章，前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式。感兴趣的朋友可以点击 👉 Vue 3 中的极致防抖/节流（含常见方式防抖/节流） 进行查看。 前言在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。 加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。 背景之所以写这篇文章是因为啥呢？我写完Vue 3 中的极致防抖/节流（含常见方式防抖/节流） 这篇文章后，突然萌发的一个问题，心想既然 vue 3 可以通过 customRef 实现，那 vue 2 是不是也可以这样进行照葫芦画瓢呢？然后我就想了一下，是可以的，然后加上今晚上有空，我就写了一下，虽然没 vue 3 自带的那么好，但还是很好用的。所以特此来分享一下。 有人说 vue 2 没 ref 和 customRef 啊？ 诶，别忘了有 proxy 和 Object.defineProperty 呀。 我这里实现 ...

各位朋友你们好呀。今天是立春，明天就是正月十五元宵节了，这种立春 + 元宵相隔的时候，可是很难遇到的，百年中就只有几次。在这提前祝大家元宵快乐。 今天给大家带来的是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章，文章中不仅会讲述原来使用的防抖或节流方式，还会带来新的一种封装方式，使用起来更简单、更清晰。 前言在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。 加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。 防抖或节流原理防抖（debounce）如果用户多次频繁操作以最后一次为准，当然也可以以第一次为准，进行数据更新或者网络资源请求，以消除冗余的操作，或者减少一定的请求资源浪费。 示例代码123456789function debounce (fn, delay = 300){ let timer = null return function (...args) { clearTimeout(timer) ...

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情 各位朋友你们好，我是桃小瑞。在这给大家拜个晚年，祝各位朋友新年快乐。 前言在前端的开发过程中，尤其是在浏览器环境下，跨域是个绕不开的话题，相信每个前端都会涉及到这个问题，记住的就直接手敲解决跨域问题，记不住的就只能问度娘了。😂😂 即将登场的是我们的二号人物，跨域。👇👇👇 跨域一、什么是跨域？跨域是指在浏览器环境中存在的一种资源同源保护策略。当页面使用ajax/fetch进行网络请求或者页面进行资源请求时，网络协议、域名、端口不一致时就会触发浏览器的同源策略保护机制。 浏览器就会在控制台输出像下面图片中的内容。 二、解决跨域有哪些途径呢？见招拆招，有限制就有对策。目前有很多可以解决跨域的问题，各位看官请移步往下看👇👇👇 常见的解决跨域方式1、 JSONP利用script标签没有跨域的限制，从而实现跨域。 注：JSONP仅支持get请求，并且需要后端的支持。 2、 CORS（ Cross-Origin Resource Sharing ）利用 CORS实现跨域，后端在请求的 ...

前言前端实现文字高亮划词。这个功能一般都是一些类似笔记产品上才会出现的一个功能，通过添加指定的关键字进行高亮显示。我这两天也做了一个出来，名字叫ohlight，实现的方式不是网上那些复杂的方式，很简单的一个方式，感兴趣的朋友可以看下方地址。 项目地址 gitee: 点击前往 github: 点击前往 npm: 点击前往 12345678// pnpm pnpm i ohlight// npmnpm i ohlight// yarnyarn add ohlight 使用效果我们先看看以下使用效果，高亮样式是全场支持自定义的哈，这里我使用的是默认的样式。 实现采用web Components实现组件，这样就可以直接跨框架、无框架运行了，简直高效一套代码运行任何框架。感兴趣的朋友可以看MDN。高亮划词的地方也很简单，不要看文件有点多，实际都是打辅助的，核心的就只有下面的代码。 123for(let keyword of keywords){ c = c.replace(new RegExp(keyword, 'g'), `<mark styl ...

前言随着vue 3的发布，新增和大改了很多的东西，像响应式的修改、option Api改为components Api、setup语法糖等等，vue 3的发布可以说是令人不得不爱❤️，相较于v2我是比较喜欢v3的。言归正传，本文的主人公不是别的，是v3中使用起来超nice的setup语法糖。 简介setup 是在单文件组件 (SFC) 中使用组合式 API 的编译时的一个语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。 优势： 更少的样板内容，更简洁的代码。 能够使用纯TypeScript声明props和自定义事件。 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。 使用 123<script setup>...</script> 其实在v3刚出来的时候还并不能这样写，他需要像下面这样写。 12345678910<script>export default { setup () { ...

前言我们现在在请求接口的过程中，已经习惯了async/await的写法，已经逐渐的代替了promise的写法，但我们在开发的过程中，都是混用的状态，当你体验async/await过的好，就会爱不释手。 async/await我们要拒绝 Streaking，啥叫 Streaking，我们看个代码。 1234567const foo = async () => { const response = await axios.get('https://www.baidu.com') console.log(response);}foo() 一旦失败我们控制台就会出现报错，一个接口就是一个红色的。 此时，你想起我们还有try...catch...，可你知道吗？try...catch...并不是万能的，有时候他捕获不到异步的错误，再有就是每个async/await你都加一个try...catch...，一个项目中，并可能只出现一个借口调用的地方吧，每个都加，就请问你累不累🥱。 1234567891011const foo = asyn ...