- 博客(137)
- 收藏
- 关注
RSS订阅原创 Vue 将某个元素或组件挂载到指定节点
我们以vant 日历组件为例, 向弹窗底部添加一个重置按钮创建按钮元素, 将其添加至目标节点this.$nextTick(() => { const resetEl = document.getElementById( 'calendarResetButton', ) if (!resetEl) { const footerE...
2023-02-22 13:32:26
1007
原创 【PWA学习】6. 使用 Service Worker 进行后台同步
引言你一定遇到过类似这样的场景：当用手机填写完一张信息表单点击"提交"时，恰好手机网络很差或没有网络，这时候只能盯着手机看着旋转的小圆圈。经过长时间等待后依然没有结果，这时候关闭浏览器，请求也被终止上面的场景其实暴露了两个问题：普通的页面发起的请求会随着浏览器进程的结束或者 Tab 页面的关闭而终止无网环境下，没有一种机制能“维持”住该请求，以待有网情况下再进行请求然而，Servi...
2023-01-11 08:40:06
1119
原创 【PWA学习】5. 使用 Notification API 来进行消息提醒
引言在上一节, 介绍了如何使用 Push API 进行服务端消息推送。提到 Push 就不得不说与其联系紧密的另一个 API——Notification API。它让我们可以在“网站外”显示消息提示：消息推送示例即使当你切换到其他 Tab，也可以通过提醒交互来快速让用户回到你的网站；甚至当用户离开当前网站，仍然可以收到系统的提醒消息，并且可以通过消息提醒快速打开你的网站交...
2023-01-11 08:40:00
1078
原创 【PWA学习】4. 使用 Push API 实现消息推送
引言在接下来的内容里，我们会探究 PWA 中的另一个重要功能——消息推送与提醒(Push & Notification)。这个能力让我们可以从服务端向用户推送各类消息并引导用户触发相应交互Web Push 效果Push API 和 Notification API 其实是两个独立的技术，完全可以分开使用；不过Push API 和 Notification API...
2023-01-10 08:56:20
1429
原创 【PWA学习】3. 让你的 WebApp 离线可用
引言PWA 其中一个令人着迷的能力就是离线(offline)可用即使在离线状态下，依然可以访问的 PWA离线只是它的一种功能表现而已，具体说来，它可以：让我们的Web App在无网(offline)情况下可以访问，甚至使用部分功能，而不是展示“无网络连接”的错误页；让我们在弱网的情况下，能使用缓存快速访问我们的应用，提升体验；在正常的网络情况下，也可以通过各种自发...
2023-01-10 08:56:11
594
原创 【PWA学习】2. 使用 Manifest, 让你的 WebApp 更 "Native"
引言我们知道，在 chrome(等一些现代浏览器)中，你可以将访问的网站添加到桌面，这样就会在桌面生成一个类似 “快捷方式” 的图标，当你点击该图标时，便可以快速访问该网站(Web App)我们以 demo 为例，其添加到桌面后以及重新打开时的状态如下：普通 Web App 被添加到桌面后的展示形式然而，对于PWA来说，有一些重要的特性：Web App 可以被添加到...
2023-01-09 09:29:59
753
原创 【PWA学习】1. 初识 PWA
什么是PWAPWA(Progressive Web Apps，渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势我们需要理解的是，PWA 不是某一项技术，或者某一个新的产物；而是一系列 Web 技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安全、性能和体...
2023-01-09 09:29:50
448
原创 查看简书文章时，自动生成侧边目录
安装 chrome 插件——油猴脚本(Tampermonkey)下载方式Chrome 应用商店下载进入 Chrome 应用商店, 搜索 Tampermonkey 安装即可官网下载进入官网打开扩展程序的开发者模式，点击 "加载已解压的扩展程序"，找到你下载的插件的 exe 文件，安装即可成功安装后，可以在浏览器的右上角显示油猴的图标添加脚本点击浏览器右上角的油...
2022-12-15 09:37:47
135
原创 Vue 两个简易代替 vuex 的方法
当我们做一些小项目，没必要用到vuex的时候，但是又要用类似vuex的功能，这个时候就可以用eventBus或者observableeventBus声明一个全局Vue实例变量 eventBus , 把所有的通信数据，事件监听都存储到这个变量上main.jsVue.prototype.$eventBus = new Vue()parent.vuemethods: { clic...
2022-12-07 21:15:42
397
原创 模型批量压缩
压缩全局安装 gltf-pipelinenpm install -g gltf-pipeline进入模型文件夹(由于会直接覆盖原文件, 建议先备份), 输入 cmd, 打开命令窗口输入命令 (该实例为 .glb 格式)// .gltf 压缩for %i in ('dir *.gltf /s /b') do gltf-pipeline -i %i -o %i -d// .g...
2022-11-15 13:19:43
173
原创 font-spider WebFont 压缩工具
下载 font-spidernpm install font-spider -g注: 下载失败的话可使用淘宝镜像npm config set registry http://registry.npm.taobao.org新建一个 html 文件注: 不要忘记引入下一步创建的 CSS 文件<!DOCTYPE html><html lang="en"> <...
2022-11-13 18:24:33
122
原创 ttf 字体图标文件转 base64
准备好需要转换的字体图标文件(.ttf 格式)在线转换操作步骤点击 Add fonts 按钮, 上传 .ttf 字体文件打开 Family support 和 Base64 encode 开关, Formats 只选择 "WOFF2" 选项点击 Convert 按钮转换完成后会生成下载链接, 点击 Download 下载即可...
2022-11-13 18:10:32
2383
原创 JS 全屏和退出全屏
进入全屏function fullScreen(ele = document.body) { if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen();...
2022-08-05 15:53:25
1174
原创 在项目中配置 vscode
在项目根目录创建.vscodeextensions.jsonsettings.json文件说明extensions.json用于编写扩展插件插件如果成员没有的话并不会自己下载, 但可以在扩展中点击筛选器扩展选中推荐就会出来然后一一安装就可以了添加扩展方法: 打开插件详情, 复制右侧 "详细信息" 下面的标识符即可{ "recommendations": [ ...
2022-07-13 09:52:29
383
原创 js调用vue内的方法并传值
在 vue 页面将方法注册到 window 对象上, 之后在js页面直接 window.xxx 调用即可demo.vuemounted() { window.functionForJs = this.functionForJs },methods: { functionForJs(data) { console.log('接收参数', data) ...
2022-07-05 09:29:49
709
原创 微信小程序字体设置教程
准备字体文件下载一个 .ttf 类型的字体文件, 备用戳这里下载获取字体文件地址微信开发者工具>云开发存储>存储管理>上传文件>点击文件名>复制下载地址项目引入app.wxss 全局引入page { font-family: myFont;}@font-face { font-family: 'myFon...
2022-04-30 13:13:02
1816
原创 前端特殊字符总结
使用HTML<span>❤</span>CSSspan::after { content: '\2764'; font-size: 12px;}JavaScriptconst icon = '\u2764';const icons = '\u2764\u2764\u2764';console.log(icon, icons);文档基本形状图形HTMLCSS/JavaScript▲965025B2
2022-04-26 15:07:06
2618
原创 Cocos Creator 常用API与方法
场景加载场景跳转cc.director.loadScene('场景名称');预加载场景cc.director.preloadScene('场景名称');获取当前场景cc.director.getScene();获取节点通过访问路径来获取节点var node = cc.find("Canvas/bg");通过名字获取子节点var a = this.node.getChildByName('name');获取节点上的组件值node.getComponent(cc.Label)
2022-03-31 17:01:13
2464
2
原创 nvm use 乱码解决方案
场景当使用 nvm use xxx 时, 出现乱码如下:exit status 1: ��û���㹻��Ȩ��ִ�д˲�����原因没有权限安装路径有问题解决卸载原来的 nvm重新安装至 D:\nvm 和 D:\nodejs (C盘一般会有权限问题, 所以最好不要装在C盘)使用管理员模式运行终端 (win10 系统可以右键 win 图标, 选择 "Windows Power...
2022-01-26 15:30:10
2891
3
原创 HTML 快速创建多个标签
使用说明: 在编辑器中输入快捷指令后, 按"Tab"键即可快速生成对应的标签组手册嵌套操作子操作符: >ul>li<ul> <li></li></ul>并列操作符: +div+span<div></div><span></span>上级操作符: ^...
2021-12-02 13:47:12
7234
原创 Chrome 无法检测 Lodop 插件
把 Chrome 浏览器升级到 94+ 版本后, 会导致原来安装的 C-lodop 插件无法使用. 这是由于 Chrome 最新安全策略导致 Chrome94+ 版本阻断 http 页面访问 localhost 服务以下是我的的解决方案:方法1: 网站改用 https 协议应用服务器厂商升级应用服务网站, 将网站改为 https 协议, 这将彻底解决该打印问题方法2: 安装最新的 C-...
2021-11-30 10:03:00
4794
3
原创 react-native 脚手架
react-native-cli安装脚手架npm install -g react-native-cli创建项目react-native init my-appcreate-react-native-appReact 社区孵化出来的一种无需构建配置就可以创建 react-native 的开源项目安装脚手架npm install -g create-react-native-...
2021-11-26 11:13:43
983
原创 node windows 环境配置
配置 node 本地目录node 下载地址安装完成后, 进入 node 安装目录, 这里是 C:\Program Files\nodejs在当前文件夹 (\nodejs) 下创建 node_cache 和 node_global 文件夹修改权限右键 node_cache 文件夹 - 属性 - 安全 - 编辑 - 勾选 "完全控制" - 确定右键 node_globa...
2021-10-29 10:06:49
287
原创 Unity 安装教程
下载官方下载中文手册激活许可证安装成功后打开客户端设置 - 许可证管理 - 激活新许可证 - Unity个人版 - 我不以专业身份使用Unity - 完成注: 许可证过期后需再次手动激活, 否则项目无法运行安装点击安装选择一个版本 (正式版)勾选简体中文新建项目项目-新建选择模板, 输入项目名称及安装位置创建界面配置推荐布局: Win...
2021-09-19 17:57:17
690
原创 Jenkins 自动化部署教程
注: 文章参考自 ぃ小小宇宙-CSDN 和 丰富多彩的薄校长-简书文章推荐: Jenkins 安装教程凭据凭据可以用来存储需要密文保护的数据库密码、Gitlab密码信息、Docker私有仓库密码等，以便Jenkins可以和这些第三方的应用进行交互插件: Credentials Binding Plugin位置: Jenkins > 凭据 > 系统 > 全局凭据...
2021-05-27 15:13:07
264
原创 Jenkins 安装教程
文章推荐: 使用 Docker 安装 Jenkins 教程安装 JDKJenkins 需要依赖 JDK，所以先安装 JDK1.8// 指定版本yum install java-1.8.0-openjdk* -y// 最新版本yum install -y java安装目录为：/usr/lib/jvm查看是否安装成功java -version安装 Jenkins下载页面w...
2021-05-26 14:17:38
125
原创 node 项目配置 https 和 wss
Nginx 配置 SSL 证书node 配置将下载好的证书 (nginx 目录里的 .crt 和 .key 文件) 复制到 node 项目的 https 文件夹 (没有就新建个)安装npm i fs http httpsapp.jsconst https = require('https');const http = require('http');const...
2021-05-21 11:33:57
767
原创 Nginx 配置 SSL 证书
申请证书有免费的, 仔细找找下载证书配置 nginx解压文件, 进入 Nginx 目录, 会看到 .crt 和 .key 两个文件, 将这两个文件发送到服务器 /etc/nginx/cert/ 目录 (没有 cert 新建一个)编辑 nginx 配置文件 /etc/nginx/nginx.confserver { listen 443 ssl; server_na...
2021-05-11 20:25:51
216
原创 使用 Docker 安装 Jenkins 教程
安装并启动 Docker安装 Jenkins下载 Jenkins 镜像文件docker pull jenkins/jenkins创建 Jenkins 挂载目录mkdir /home/jenkins_home启动一个 Jenkins 容器 (命名: jenkins_01; 端口: 9000)docker run -d --name jenkins_01 -p 90...
2021-04-14 10:59:12
94
原创 CentOS 安装 Docker
安装sudo yum install docker启动service docker start设置开机自动启动systemctl enable docker查看配置信息docker info查看版本信息docker version重启sudo service docker restart关闭service docker stop卸载 Docker卸载sudo y...
2021-04-13 20:24:04
78
原创 node 项目打包部署至服务器
准备CentOS Nginx安装及配置全局安装 nodejs: yum install -y nodejs全局安装 pm2: npm install -g pm2发布例: 要发布的项目为 /code/project进入本地项目的上一层级文件夹, 即 /code打开命令行, 输入 tar cvzf project.tgz --exclude=node_modules pro...
2021-02-02 09:39:36
8442
原创 小程序状态码手册
状态码说明-1系统繁忙0请求成功40001验证失败40002不合法的凭证类型40003不合法的 OpenID40004不合法的媒体文件类型40005不合法的文件类型40006不合法的文件大小40007不合法的媒体文件 id40008不合法的消息类型40009不合法的图片文件大小40010不合...
2021-01-28 15:33:47
462
原创 使用 Docker 搭建 mysql 数据库
准备更新 yum 源yum update关闭 SELinuxsed -i 's/SELINUX=enforcing/SELINUX=disabled/g' /etc/selinux/configsetenforce 0关闭防火墙systemctl stop firewalld.servicesystemctl disable firewalld.service安装运维监控系统 Op...
2021-01-02 10:18:42
310
原创 npm 发布流程
1. 注册方法1: 官网注册 (推荐)方法2: 命令注册npm adduser依次输入用户名, 密码, 邮箱 (注: 重复的话会报错)2. 初始化进入项目根目录npm init根据提示填入对应信息, 完成之后会生成一个 package.json 文件, 输入的信息可以在该文件中修改注: 如果你的包引用了第三方包, 则需要在 package.json 文件中增加 de...
2020-10-19 17:22:03
295
原创 宏任务和微任务
介绍这个之前, 建议先了解一下事件循环宏任务 (Macrotask)宏任务包含了解析 HTML、生成 DOM、执行主线程 JS 代码和其他事件如 页面加载、输入、网络事件、定时器事件等。从浏览器的角度，宏任务代表的是一些离散的独立的工作比如: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI ren...
2020-10-16 09:08:25
173
原创 浅谈 JS 事件循环 (Event Loop)
注: 文章参考自浅析 JS 中的 EventLoop 事件循环（新手向）概念JavaScript 是一门单线程语言, 即同一时间只能执行一个任务, 也就是说代码执行是同步并且阻塞的只能同步执行肯定是有问题的, 所以 JS 有了一个用来实现异步的函数：setTimeout队列 (Queue)队列是一种 FIFO(First In, First Out) 的数据结构，它的特点就是先进先出...
2020-10-15 17:46:00
189
原创 iPhoneX 安全区域 safe-area-inset-*
屏幕上安全距离: safe-area-inset-top屏幕右安全距离: safe-area-inset-right屏幕下安全距离: safe-area-inset-bottom屏幕左安全距离: safe-area-inset-leftiOS 11padding-top: constant(safe-area-inset-top);padding-right:...
2020-10-15 14:14:38
8441
原创 koa+mysql 使用教程
初次探索 node, 与大家分享下项目搭建的过程, 有不对的地方欢迎指出创建项目安装脚手架 npm install -g koa-generator使用 ejs 引擎创建名为 project 的项目 koa2 -e project启动进入项目 cd project安装依赖 npm install运行 yarn start建议: 为了使代码修改刷新页面能看到变化，开...
2020-09-25 10:17:55
1002
原创 table 表格合并行或列
合并单元格<table> <tbody> <tr> <th colspan="2">我是占位符</th> <th colspan="2">我是占位符</th> </tr> <tr> ...
2020-09-07 15:03:52
13884
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人