- 博客(43)
- 收藏
- 关注
RSS订阅原创 微信小程序订阅消息工具封装，兼容一次性订阅和长期订阅
小程序消息订阅授权的完整流程实现。通过requestSubscribeMessage函数封装了授权检查、请求授权、引导授权和设置页面跳转的全流程。核心流程包括：1)检查已有授权状态；2)未授权时请求授权；3)用户拒绝后显示引导弹窗；4)用户确认后跳转设置页面。代码使用了Promise包装和错误处理，确保流程的可靠性。最终返回布尔值表示授权结果，开发者只需传入消息模板ID即可调用。
2025-10-11 11:01:31
272
原创 移动端适配、设备物理像素、设备独立像素、rem方案介绍
移动端适配涉及多个像素概念：物理像素是屏幕实际像素点，逻辑像素是操作系统定义的统一单位，CSS像素是网页开发使用的单位。设备像素比(DPR)连接物理和逻辑像素(物理像素=逻辑像素×DPR)。适配核心是保持元素与视口的比例恒定，通过rem/vw等相对单位实现。例如，iPhone12(390×844逻辑像素，DPR=3)的物理分辨率为1170×2532。适配时，1rem=39px(390/10)，确保10px元素在不同设备上保持相同视觉比例。移动端适配让网页在不同设备上都能正确显示。
2025-09-23 14:25:18
1099
原创 vite + vue3 组件批量导入和注册
/ 文档地址：https://cn.vitejs.dev/guide/features.html#glob-import。// 遍历modules，生成componentMap和componentNameList。// 借助vite提供的import.meta.glob来导入指定目录下的模块。// 创建组件名称数组，方便后续遍历。// 使用展开运算符，批量注册组件。// 点击菜单项，切换组件显示。// 创建组件注册对象。
2025-02-19 09:08:02
718
原创 Vue3当中通过script和defineOptions两种方式指定组件的name
Vue3当中通过script和defineOptions两种方式指定组件的name
2024-01-22 15:19:16
1547
1
原创 【前端项目规范】Git Commit | ESlint | Prettier | Stylelint 配置
【前端项目规范】Git Commit | ESlint | Prettier | Stylelint 配置
2023-07-24 09:54:47
531
原创 useWindowPrint 自定义的打印HOOK
useWindowPrint用于实现页面的打印，打印的效果相对来说比较好。useWindowPrint支持onBeforePrint、onBeforePrintContent、onAfterPrint等回调，可以很方便地在不同阶段进行操作，如果觉得使用回调函数比较麻烦，useWindowPrint也维护了一个State，可以在打印时动态显示和隐藏页面上的元素。
2022-12-03 22:14:25
1227
原创 实用Chrome扩展
RGB转换扩展1 介绍平常在书写CSS样式时，经常会遇到CSS颜色进制相互转换的问题，一般都要去搜索网站，然后进行转换，为了方便，就手写了一个Chrome的扩展，支持16进制和10进制相互转换，点击转换按钮，可以进行切换。2 安装扩展文件放到了我的 GitHub 当中，可以去我的GitHub当中把整个文件夹下载下来，下载下来的目录如下：lib – 存放jqueryjquery.min.jsicon.png – 扩展程序的图标manifest.json – 扩展程序配置文件popu
2021-03-10 17:51:08
246
原创 Rate评分组件，可自定义图标和颜色
Rate 评分组件使用方法Rate组件需要放在components文件夹内目前Rate组件只支持iconfont的图标，需要自己到iconfont上查找图标，需要一个选中时的图标和一个未选中时的图标，找到之后，新建一个项目，放入到自己的项目当中，下载解压，将压缩包内以font开头的文件夹内的所有文件放到 assets\icon 文件内，再在 main.js 当中使用 import "./assets/icon/iconfont.css"; 导入图标父组件使用 Rate 组件的组件，即 Rate
2020-12-11 14:55:32
4968
原创 JS递归
JS递归 这篇博客是我对递归思想的一个理解，记录下来，方便理解。 以一个例子为例，求给定正整数的阶乘，这个例子就可以使用递归来解决。使用递归解决这个阶乘问题可以分为三步：明确递归函数的作用，即求一个给定正整数的阶乘。找出函数退出的条件，阶乘递归当中，当num小于2时，就可以直接跳出了，乘以1时结果不变。找出关系式，阶乘递归当中，10 * 9 * 8 * 7 … * 2 * 1, 类似于 n * n-1。function factorial(num){ if(num <= 2)
2020-05-23 22:25:52
694
原创 移动端的时间选择器
移动端的划动时间选择器 在工作当中，遇见了一个UI效果，是让用户划动选择1到12小时，在网上没有找到现成的，就自己写了一个，基本可以满足效果，GitHub地址：https://github.com/Jin0811/TimePicker.git，样式如下： 这个选择器只适合移动端的使用，PC端不能使用，用户在划动的时候，样式也会相应地发生变化。’ 所有的样式和代码，都放在了我的GitH...
2020-04-06 22:54:18
4016
原创 HTML中支付密码输入框
在工作当中遇到了一个需要支付密码输入框的需求，大概的需求类似在转账时，输入密码时的输入框，每一位密码之间都有间隔，但是普通的input标签并不能实现类似的效果。 这里我使用ul和input实现了类似的效果，每一个密码数字都是单独的，之间具有间隔。效果如下图： 原理：页面当中有一个ul，还有一个隐藏的input框，当点击ul时，利用JS控制input输入框获取到焦点，这样当我们输入数...
2020-03-28 10:12:27
1060
原创 Vue侦听器的使用
Vue侦听器小练习 Vue中的侦听器可以侦听data中数据的变化，并做出操作。下面是使用Vue的侦听器写的一个进度条的小demo。每完成一件事，进度条都会自动更新。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...
2020-03-01 20:46:42
512
原创 旋转加载动画
Loading动画1、效果图：2、原理： 利用定位将两个div，重叠在一起，再利用border-bottom-color: transparent这个CSS样式，将div的一部分边框变成透明，最后分别为两个div添加不同的动画效果就可以了。3、代码<!DOCTYPE html><html lang="en"><head> <me...
2020-02-26 15:49:37
480
原创 利用ES6中的类制作一个简单Loading遮罩层
ES6中的类制作一个简单遮罩层 这个一个使用ES6的类，制作的一个简单的Loading遮罩层，可以展示Loading动画，或显示指定的文本，还可以设置遮罩层多少毫秒以后关闭，或者手动关闭遮罩层。代码如下：class Info{ // 构造函数 constructor(settings){ this.configure = settings; ...
2020-02-24 20:38:47
306
原创 漂亮的搜索页面
Home页面 在页面当中，可以直接输入要搜索的东西，点击搜索图片或者按下Enter键就可以进行搜索，原理就是利用JS改变浏览器地址栏中的URL，效果图如下，如果输入的内容为空，则会进行提示；代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
2020-02-24 20:20:36
5327
9
原创 Node+Express+Mysql+Vue简单博客项目
BLOG 项目1. 项目介绍： 该项目为个人博客项目，包括用户端和后台，采用的是前后端分离的方式，前端使用Vue框架，后端使用Node.js，使用Express框架，数据库采用MySQL数据库。 用户端方面，每一位用户都需要进行注册和登录，每一位用户都有一个个人主页，展示个人的信息，同时用户也可以修改自己的相关信息。同时每一位用户都可以发布博客，可以查看自己发布的博客。 每一篇博客，...
2020-02-18 20:55:25
1175
4
原创 Node+multer实现文件的上传
Node上传文件 介绍：使用express框架和multer，来实现文件的上传。HTML代码，分为原生表单上传文件和axios上传文件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...
2020-01-29 20:18:34
431
原创 获取验证码的JS代码
获取验证码的JS代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
2020-01-08 19:50:47
1846
原创 JS时间戳转换函数
JS时间戳转换函数业务需求在工作当中，请求接口之后，返回了一个时间戳，需要在前端页面上显示 “1小时之前发布” 或 “26分钟之前发布” 的信息，需要对时间戳进行转换。代码：// 创建一个时间对象，获取到一个测试的时间戳var testDate = new Date("12/3/2019 21:26:0");var oldTime = testDate.getTime()/1000...
2019-12-04 22:06:10
785
原创 Python中使用turtle库画同心圆
turtle库之同心圆1、代码import turtle as tcolorList = ["red","purple","skyblue","yellow","hotpink","green","blue","black","darkred"]for i in range(1,10): t.penup() t.sety(-15*i) # sety()保持x不变...
2019-08-31 10:26:08
20560
原创 纪念日和天气查询微信小程序
我的第一个微信小程序1.微信小程序介绍 介绍：这个小程序是我的一个练手的小项目，主要的功能包括纪念日和天气查询。 纪念日功能可以允许用户创建纪念日和删除纪念日，用户输入名称并选择时间，当选择过去的日期时，点击添加后，会显示已经过去了多少天，当选择未来的时间时，点击添加后，会显示还有多少天。在添加完成纪念日后，用户也可以选择删除纪念日。 天气查询功能可以为用户提供天气信息，当用户授权后...
2019-08-15 14:11:13
3938
原创 HTML5之meta标签
搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是关键词和描述不会影响页面在搜索引擎中的排名。1、使用meta标签可以用来设置网页的关键字 <meta name="keywords" content="HTML5视频教程">2、使用meta标签还可以用来设置网页的描述 <meta name="description" content="尚硅谷发布了javasc...
2019-07-29 09:00:49
238
原创 JS数据类型之Boolean、Null和Undefined
1.Boolean Boolean，布尔值，布尔值只有两个，true和false，布尔值主要用于逻辑判断。<script type="text/javascript"> var boolean_1 = true; // 注意此处不需要加引号 console.log(boolean_1); // 返回true console.log(typeof boolean_1); ...
2019-07-29 08:53:13
1050
原创 HTML5中的图片标签
HTML5图片标签 如果想要在网页中加载一张图片，那么就需要用到HTML中的图片标签，即img标签，img标签是一个自结束标签。 img标签的属性如下所示：src：设置一个外部图片的路径，可以使用相对路径和绝对路径也可使用一个链接。alt：可以用来设置在图片不能显示时，对图片的描述，搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录...
2019-07-27 14:55:43
1040
原创 JS数据类型之数值（Number）
数据类型之Number JS中，所有的数值都是Number类型，包括整型和浮点型，浮点数即小数。1.判断数据类型 可以使用一个运算符typeof来检查一个变量的类型，语法：typeof 变量。 检查字符串时会返回string，检查数值时，会返回number，使用typeof检查Infinity时，也会返回number。<script> var word = "Hell...
2019-07-27 11:13:26
501
原创 Javascript数据类型之字符串（String）
数据类型在JS中，一共有六种数据类型，分别为String：字符串Number：数值Boolean：布尔值Undefined：未定义Null：空值Object：对象前五种数据类型为基本数据类型，Object为引用数据类型。数据类型之字符串 在JS中，字符串需要使用英文引号包括起来，单引号或者双引号都可以，注意：单引号里面不能嵌套双引号，双引号里面可以嵌套单引号。 注意：...
2019-07-27 09:55:51
551
原创 如何在HTML页面中编写大于号和小于号？（HTML实体）
1.HTML实体 在HTML中，我们是不能直接使用大于号">“和小于号”<"的，因为浏览器会将这些当作标签进行处理，这样一来就不能正常显示，所以需要使用到HTML的实体。 在 HTML 中，某些字符是预留的。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。例如：<!DOCTYPE html><...
2019-07-26 17:08:44
40848
原创 HTML5的文档声明
HTML5的文档声明<!DOCTYPE html> 上面的代码块是HTML5的文档声明，声明当前的网页是按照HTML5的标准编写的。 编写网页时，一定要将HTML5的文档声明写在网页的最上面，如果不写文档声明，则会导致有些浏览器进入怪异模式。进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明。常用的文档声明HTML5<...
2019-07-25 10:36:16
6102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人