Leeson's Space https://looseli.top// 🎄 Wed, 04 Mar 2026 06:15:53 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2026, Leeson <![CDATA[技巧便利签]]> https://looseli.top//article/note-1 https://looseli.top//article/note-1 Thu, 17 Aug 2023 00:00:00 GMT

13位时间戳精确到毫秒，10位时间戳精确到秒

页面定位到某一元素

在iOS中，当日期格式为yyyy-mm-dd时，页面会显示NAN。h5需要兼容该日期格式

数字逢三进一(每三位加逗号)

当页面出现遮罩层时，禁止遮罩层下方页面可滑动

  • 遮罩层内无需滑动时，只需要在遮罩层元素上添加@touchmove.prevent来阻止事件冒泡
    • Tips: 当元素添加@touchmove.prevent时，遮罩层内和下方页面都将无法滑动！
  • 遮罩层内需要滚动时，只需要给下方页面的body元素添加overflow: hidden;当弹窗遮罩层关闭后，将样式还原

判断某元素是否在可视区域内

补0小技巧(比如时间补0)

Map函数

findIndex

用js分别取出数字的整数和小数部分

通过css控制文字一行展示，并在超出部分用省略号表示

通过css控制文字最多展示指定行，并在超出部分使用省略号表示(推荐)

p标签中，文本过长时自动换行

ios overflow:hidden无效解决方案

利用vue3设置不同页面body颜色不同，避免样式污染

通过ADB安装apk，并查看相关日志

下载 adb 及环境配置

  1. 下载 Android SDK Platform Tools。 下载链接：https://developer.android.com/tools/releases/platform-tools?hl=zh-cn
  1. 下载完成后，解压文件(platform-tools)到一个方便访问的目录，比如笔者直接放在了桌面
  1. 打开终端(将 ADB 添加到系统 PATH，以便在终端中直接运行 adb 命令)，编辑 zsh 配置文件，命令如下：nano ~/.zshrc
  1. 在文件末尾添加以下行，替换路径为你解压的 platform-tools 目录： export PATH="/Users/用户名/Desktop/android-sdk/platform-tools"
  1. 保存并退出（按 Ctrl + X，然后 Y，再按 Enter）
  1. 应用更改：source ~/.zshrc
  1. 验证安装。若显示版本信息则说明安装成功：adb version

用 adb 安装 apk

  1. 准备 Android 设备并开启“USB 调试”
  1. 用 USB 线连接 Android 设备到 Mac，在终端运行该命令：adb devices 如果设备显示为“unauthorized”，在设备上同意“允许 USB 调试”提示
  1. 先下载客户端提供的apk，然后在终端输入该命令后并将下载好的apk拖进命令行中获得 apk路径，回车等待成功即可：adb install apk路径

adb 查看日志

  1. 查看 WebView 日志：adb logcat | /usr/bin/grep WebView
  1. 过滤特定关键字：adb logcat | /usr/bin/grep "get_local_price"

pyftsubset子集化字体

  1. 安装 python 环境、pip 等
  1. 安装 pyftsubset 字体子集化工具
  1. 准备好源字体包和对应的文案

flutter跨端开发app

 
]]> <![CDATA[ssh密钥生成及公钥复制]]> https://looseli.top//article/ssh-1 https://looseli.top//article/ssh-1 Wed, 24 May 2023 00:00:00 GMT
由于我司最近更换了代码托管平台，导致远程仓库地址发生变化，所以需要我们重新在新的平台填入ssh公钥以便正常推拉代码。简单在此记录一下ssh密钥的生成以及将公钥填入阿里云、github等平台，方便日后查阅
先简单说明一下https和ssh两种方式的差异：
  • https: 适合开源项目。无需验证即可clone和读取项目，但没有push权限
  • ssh: 适合内部项目。需要先将ssh密钥对中的公钥上传至服务器，上传成功后即可自由使用clone、push等操作

生成ssh密钥

  • 设置全局git账号和邮箱
Tips: 如果之前已经设置过git账号和邮箱的，可省略第一步，直接从第二步开始。查询git账号邮箱的命令如下
  • 在.ssh目录下，生成ssh密钥
输入以下命令并一路回车即可生成默认文件名的ssh密钥对，即id_rsa和id_rsa.pub两个文件
  • 将id_rsa.pub文件中的内容全部复制并上传至对应的服务器
在此只记录阿里云效代码管理平台和github两个平台中公钥存放位置
结语
在此只记录阿里云效代码管理平台和github两个平台中公钥存放位置
  1. 阿里云效代码管理平台：个人设置 -> SSH公钥
  1. github: Settings -> SSH and GPG keys -> New SSH key
 
]]> <![CDATA[JavaScript ES(6-11)]]> https://looseli.top//article/ES6 https://looseli.top//article/ES6 Mon, 04 Mar 2024 00:00:00 GMT <![CDATA[Vue3 新特性]]> https://looseli.top//article/vue-1 https://looseli.top//article/vue-1 Thu, 02 Sep 2021 00:00:00 GMT
Vue3的发布已经差不多快一年了，笔者也是在中途跟了波热潮，学习了一下Vue3的新特性，但一直没有用于工作开发。好在这家公司比较鼓励新技术的使用，笔者也是在不久前将Vue3投入到工作中，发现还是很丝滑的😎 在此记录一下笔者的所学所用，持续更新吧...

Vue3 与 Vue2

Vue2 结构

熟悉Vue2的读者应该知道，我们一般会在data中定义数据，在methods中声明方法，通过this调用需要的数据和方法。
想必大家和笔者一样也感受到了，当.vue文件中功能复杂、代码过长时，我们需要在template、data、methods之间来回切换，甚是烦躁 😤
当然，还不止于此！不知大家是否在工作中用过mixins。不可否认，mixins有它的优点和好处，但不足也很明显：
  • 命名易冲突
  • 未知的数据来源，调试起来很酸爽 😵
  • ……
大概是基于以上的问题，Vue3诞生了 👏 推出了Composition API

Vue3 诞生

Vue3推出的Composition API，不仅可以把零散的逻辑组合在一起，还能将独立的功能逻辑拆分成单独的文件。下面，我就来隆重的介绍它
setup
这是Vue3新增的一个特性，是作为Composition API的入口。结构如下：
setup执行的时机，网上说法不一。不过通过笔者的测试发现，setup执行的时机在beforeCreate生命周期之前，读者也可通过下方代码进行自测：🤔
setup可以接收两个参数props和context，如上方代码。我们简单来说说这两个属性：
  • props：父子组件之间通过prop所传的值。直接上代码：
那么，通过setup中的props参数就可以拿到上面传入的num和obj属性，从而进行相关的逻辑操作
Tips：props不能使用 ES6 解构，这样解构出的数据会失去响应式。如果我们既想要解构，又想要其保持响应式，怎么办？别怕，Vue3提出了toRefs函数，我们会在后面学习它
  • context：可替代Vue2中的this
 
我们在Vue2中，会频繁使用到this。但是，在Vue3中，不能使用this。所以，context中提供了最常用的几个属性：emit、slot，使用如下：

ref、reactive、toRefs

在Vue2中，我们通常把数据定义在data中，而且我们知道，定义在data中的数据通常是响应式的。那么，我们在Vue3中该怎么定义数据呢？ref、reactive由此而生。一般来说，ref定义js基础类型的双向绑定；而reactive则定义对象类型的双向绑定。用法如下：
相信读者们也发现了，当我们用reactive定义了对象类型，同时需要在模版中使用时，都需要data.某个属性，数据量大的时候还是蛮繁琐的。同上文提到的props一样，我们不能直接解构，不然会失去响应式。因此，Vue3提出了toRefs函数。通过toRefs将reactive定义的对象类型里的属性全部转为ref定义的基础类型。上述代码可做如下修改：

computed

直接上代码，感受一下Vue3中的computed

filters

在vue2中有过滤器filters，可以很方便的对一些数据进行简单的二次操作，如时间格式化等。但在vue3中，vue团队移除了过滤器的概念，并用computed去代替过滤器filters的功能

watch

  • 监听ref定义的数据
  • 监听reactive定义的数据
Vue3中依旧保留了deep、immediate关键字，如下代码

生命周期

Vue2和Vue3的生命周期还是有点区别的，直接将官网的说明拿过来 🤲
notion image

结语

Vue3中的特性就先介绍到这边。除了上述介绍的特性外，Vue3中还有很多的新特性，如watchEffect、自定义Hooks、Teleport等。由于笔者未频繁使用到这些特性，就先不做记录，之后使用到了或是学习了在陆续更新吧～
 
]]> <![CDATA[MCP协议]]> https://looseli.top//article/mcp https://looseli.top//article/mcp Wed, 23 Apr 2025 00:00:00 GMT

前言

随着 AI 的快速发展，大语言模型(Claude、ChatGPT)等在各个领域所展现出的能力令我们惊叹！不过在其工作时与外界无法产生联系，且无法有效地对模型进行指令控制、状态管理以及多轮上下文的组织。所以，一个高效、灵活的通信协议是不可或缺的。

介绍

MCP（Model Context Protocol）就是在这样的背景下被提出的。它并不是一种新模型或框架，而是一种协议规范，旨在为大型语言模型的上下文输入提供结构化、可扩展的接口设计。没错！你可以把它理解为「USB接口」。
Agent 和 MCP 的结合，可以让 AI 拥有读取和写入文件、操作命令行、数据库交互、三方 api 对接等强大能力。

实际使用

现在，市面上已经出现了很多 MCP servers。可以去这个网址搜索想要的 MCP server。接下来，我会用高德 mcp server来说明 mcp 该怎么玩～
成为高德开发者并创建key
1.登录「高德控制台」，若没有开发者账号，则需要先注册成为开发者
notion image
2.进入「应用管理」→「我的应用」，点击右上角「创建新应用」
notion image
3.找到刚才创建的应用，点击「添加 Key」，服务平台选择「Web 服务」
notion image
4.提交后即可获取 Key 和密钥
在 Cursor 中配置 MCP Server
1.打开 Cursor 设置界面并找到 MCP
notion image
2.点击「Add new global MCP server」添加一个高德 MCP Server 并填入刚才获取的 Key。配置代码如下：
3.返回 Cursor 设置界面查看 MCP 服务工具状态，绿点则说明 MCP 服务正常工作。
notion image
4.将模型交互模式改为「Agent」
notion image
5.全部准备完成！接下来就可以尽情玩耍了！👏 甩一份大连一日游攻略～
notion image
notion image
notion image
 
]]> <![CDATA[谷歌插件开发流程]]> https://looseli.top//article/chrome-extension https://looseli.top//article/chrome-extension Wed, 11 Sep 2024 00:00:00 GMT

Chrome插件介绍及工作原理

chrome插件是一个用Web技术开发，用来增强浏览器功能的软件。它其实就是一个由html、css、js、图片等资源组成的.crx后缀压缩包。chrome插件运行在独立的沙箱执行环境中，并与chrome浏览器进行交互。

创建配置文件、加载插件

  • 创建文件夹并在根目录下新建manifest.json配置文件(必须)，并写入以下几行代码：
notion image
  • 在谷歌浏览器中输入chrome://extensions/ 打开扩展程序页面并开启开发者模式，加载已解压的扩展程序，选择刚才创建的文件夹即可成功加载该插件了
notion image
notion image
 
]]>