- 博客(49)
- 收藏
- 关注
RSS订阅原创 JS如何控制任务的执行顺序
唠唠嗑放假在家当咸鱼有一段时间了，也好久没写笔记了，今天逛技术社区的时候遇到了一个有点意思的题目，正好也是我没遇到过的场景，于是记录一下整活需求是这样的：实现一个 EatMan说明:实现一个 EatMan，EatMan 可以有以下一些行为示例:1.EatMan(“Hank") 输出Hi This is Hank!2.EatMan(“Hank”).eat(“dinner”).eat(" supper") 输出Hi This is Hank!Eat dinner~Eat supper
2021-02-18 21:31:48
2226
原创 从 0 实现一个 mini redux
前言本文从 redux 原理出发，一步步实现一个自己的 mini-redux，主要目的是了解其内部之间的各种关系，所以本篇不会讲解太多关于 redux 的用法redux 是什么redux 是一种可预测的状态管理库，在 react 中，它解决的是多个组件之间的通信问题在没有使用 redux 的情况下，如果两个组件(非父子关系)之间需要通信的话，可能需要多个中间组件来为他们进行消息传递，这样既浪费了资源，代码也会变得更复杂redux 提出了单一数据源 store 来存储状态数据，所有的组件都可以通过
2021-01-11 18:08:11
201
原创 taro3-不使用-typescript-的情况下使用-taro-ui-时报错
最近有个小程序的项目，用 taro3 脚手架创建了项目，在组件里引入了 taro-ui 的组件之后，执行 yarn dev:weapp 一直报错，报错内容是无法识别 taro-ui 里面的 ts 语法报错信息Module build failed (from ./node_modules/babel-loader/lib/index.js):SyntaxError: /Users/chenlin/workspace/taro_test/node_modules/taro-ui/dist/weapp/c
2021-01-06 09:30:45
1378
原创 nginx配置ssl实现https
环境说明服务器系统：Ubuntu 18.04 64位nginx：1.14这篇文章主要是记录配置 https 的步骤，就不介绍申请ca证书的相关细节了这里有免费的 ssl 证书：https://cloud.tencent.com/act/pro/ssl我是西部数码的域名，在腾讯云申请的证书申请证书并签发后，把证书先下载到本地1、安装 nginx$ apt-get update // 更新软件$ apt-get install nginx // 安装nginx2、配置 ca 证书2
2021-01-06 09:27:06
186
原创 Taro -webkit-box-orient: vertical 失效
在使用 taro 写多行文本超出显示省略号时，发现 -webkit-box-orient: vertical; 没起作用最后去社区查了下，发现有人遇到了同样的问题，最后得到的解决方案是：第一种/* autoprefixer: ignore next */-webkit-box-orient: vertical;第二种/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */两种凡是都是加入 css
2021-01-06 09:24:51
211
原创 ubuntu 18.04 上安装git
直接执行命令：apt install git安装过程中如果出现了以下错误，需要更新一下 apt 包列表Reading package lists... DoneBuilding dependency tree Reading state information... DonePackage git is not available, but is referred to by another package.This may mean that the package is mi
2021-01-06 09:22:42
196
原创 html2canvas ios 报错 Maximum call stack size exceeded
最近的一个微信 h5 项目，有生成分享图的需求，用到了 html2canvas 这个库代码：let el = document.querySelector('.xxx');html2canvas(el, { width: el.offsetWidth, height: el.offsetHeight, scale: 2, dpi: window.devicePixelRatio * 2, useCORS: true,}).then(canvas => { this.c
2021-01-06 09:17:55
908
原创 ios 微信 h5 中的 chooseImage 接口拿到 localId 后无法通过 img 标签显示图片
最近的一个微信 h5 项目，用到了 微信 jssdk 的 chooseImage 方法，遇到了坑，在这里记一下需求是用户拍照或上传本地图片，先显示出来，然后再上传图片做其他的事情，弄的过程中发现，安卓可以使用 chooseImage 方法返回的 localId 显示图片，ios 显示不出图片查了下，找到了解决方法：ios 微信6.5.3版本开始支持开发者手动切换 WKWebview 和 UIWebview，使开发者可提前对 WKWebview 进行适配WKWebview 不再支持通过使用 choos
2021-01-06 09:14:27
1398
原创 小程序 接入流量主广告
最近公司开发的小程序需要接入流量主广告，让我去开发。这里记录一下开发过程首先，小程序开通流量主有以下几个条件：累计独立访客（UV）不低于1000有严重违规记录的小程序不予申请开通之后，我们要创建广告位，拿到广告位 ID这里用 激励视频广告 举例把下面代码复制到项目里，就可以看到效果了激励视频广告组件默认是隐藏的，在用户主动触发广告后，开发者需要调用 RewardedVideoAd.show() 进行显示用户在什么时候触发广告，就要自己去安排了// 在页面中定义激励视频广告let v
2020-12-08 18:29:41
1234
原创 react 文字跑马灯
之前的一个 pc 端项目，有文字滚动的功能，找了下，没有合适的轮子，于是自己造了一个目前只支持横向滚动index.tsximport React, { useRef, useEffect, useState } from 'react'import './index.css'import styled from 'styled-components'interface TextScrollProps { /** * 内容 */ content: string /**
2020-12-08 18:27:24
3466
2
原创 uni-app 安装 scss 引发的报错
最近接手了一个有点历史的小程序，用 uni-app 开发的，没有装 css 预处理器，开发效率有点低，装好之后控制台报错了：报错信息：Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):ValidationError: In
2020-12-07 19:11:13
2711
原创 小程序 富文本 图片过大问题
最近的一个项目遇到了这个问题，这个问题也很好处理，一段代码就够了：<!-- 以下是 uni-app 代码 --><rich-text :nodes="(product.exchangeExplain || '').replace(/\<img/gi, '<img style=\'max-width: 100%;height:auto;display:block;\'')"></rich-text>给 img 设置一下最大宽度就可以了阅读原文：小鑫
2020-11-30 09:28:57
400
原创 react 监听键盘事件 hook
import { useCallback, useEffect, MutableRefObject } from "react";type keyType = KeyboardEvent["keyCode"] | KeyboardEvent["key"];type keyFilter = keyType | Array<keyType>;type EventHandler = (event: KeyboardEvent) => void;type keyEvent = "keyd
2020-11-23 18:56:17
3212
2
原创 CSS height:100%和height:100vh的区别
vh 是 CSS 中的相对长度单位，相对视口高度（Viewport Height），1vh = 1% * 视口高度也就是说：height:100vh == height:100%但是元素没有内容的时候，设置 height:100%，该元素不会被撑开，此时高度为0但是设置 height:100vh，该元素会被撑开跟屏幕高度一致阅读原文：小鑫の随笔...
2020-11-20 20:02:41
2484
原创 为什么 useState 返回的是 array 而不是 object？
前言这是我今天收到的一条推送文章，发现自己好像也没有去思考过这个问题，于是点进来了明白了原因之后，想用自己的话梳理一遍，分享给其他还不了解的同学正文先来看看 useState 的日常用法const [count, setCount] = useState(0)这里可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？我们在自定义 hook 时应该返回什么类型呢？为什么是返回数组而不是返回对象要弄懂这个问题要先明白 ES6 的解构赋值，来看 2 个简单的例子：
2020-11-11 18:53:22
4038
原创 react 倒计时 hook
import { useRef, useState, useEffect } from 'react';/** * 解析毫秒为天、时、分、秒 * @param milliseconds 毫秒 */const parseMs = (milliseconds: number) => { return { days: Math.floor(milliseconds / 86400000), hours: Math.floor(milliseconds / 3600000) %
2020-11-11 09:28:38
761
3
原创 font-spider 让网页引入中文字体成为可能
随着互联网的飞速发展，人们已经不满足于在web页面上使用一些默认字体了，但是页面引入字体文件体积很大加载又费时，那是怎么办呢？今天介绍的这个工具就可以完美的解决这个问题介绍字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。具体意思就是说你可以在页面直接引入字体，它能自动检测 css 里 @font-face 自定义的字体，并且从字体里提取出页面中有用到的字体，极大的减少了字体文件的空间。前置知识会css、html、nodeJs、npm的基础操作
2020-11-10 09:14:44
147
转载 如何编写漂亮的 JavaScript 代码
一、变量传参使用默认值// Bad:function createMicrobrewery( name ) { const breweryName = name || 'Hipster Co.'; // ...}// Good:function createMicrobrewery( name = 'Hipster Co.' ) { // ...}避免无意义的命名既然创建了一个car对象，就没有必要把它的颜色命名为 carColor// Bad:const
2020-11-03 19:31:38
223
原创 CSS 单/多行文本溢出样式
单行文本溢出省略核心 CSS 语句overflow: hidden; 文字长度超出限定宽度，则截断超出的内容white-space: nowrap; 规定段落中的文本不进行换行text-overflow: ellipsis; 文本溢出时，用省略号来代替Demo<style>div { width: 150px; height: 50px; border: 1px solid red; overflow: hidden; white-space: no
2020-11-02 18:45:22
243
原创 ReferenceError: React is not defined 报错解决方法
今天使用 create-react-app 写 demo 的时候遇到了这个问题还原事故现场：用 create-react-app 创建项目后执行 npm run eject 暴露配置启动项目就报错了：搜索了一圈啥收获也没有，最终在官方的 issues 里找到了解决办法原因是：jsx 运行时的 webpack 配置会在 eject 时候被删除所以需要在 package.json 把配置加回来// package.json{ "babel": { "presets": [
2020-10-30 18:48:19
22292
转载 编写高质量代码之命名技巧
1.不使用没有任何意义的英语字母进行命名for(let i=0; i<10; i++) { //...}应该表明这里 i 的用途是什么，比如是遍历元素，可以使用 index2.不使用拼音或拼音首字母组合cishu = 5; // 循环的次数zzje = 1000.00; // 转账金额3.方法名的命名，需要使用 “动宾结构短语” 或 “动词+表语结构短语”如果宾语是一个集合，最好是使用复数createOrder(); // goodorderCreate(); //
2020-10-30 09:21:54
249
原创 react 强制重新渲染组件的 hook
/** * 强制刷新 */export const useUpdate = () => { const [_, setState] = useState(0); return useCallback(() => { setState((num: number): number => num + 1); }, []);};点我查看代码运行效果阅读原文
2020-10-29 09:25:33
6267
原创 JS 判断日期是不是今天、昨天、明天
// 判断日期是不是今天、昨天、明天const isToday = (str) => { let d = new Date(str).setHours(0, 0, 0, 0); let today = new Date().setHours(0, 0, 0, 0); let obj = { '-86400000': '昨天', 0: '今天', 86400000: '明天', }; return obj[d - toda
2020-10-26 18:42:57
4446
原创 JS 解决sort字母排序的问题
前言前些天写bug的时候，需要对数组按字母进行排序，就想到了 sort ，没想到还给了我个惊（jing）喜（xia）还原事故现场数组：[{letter: ‘a’}, {letter: ‘c’}, {letter: ‘b’}, {letter: ‘d’}]需要按数组元素的 letter 属性来排序，吓得我赶紧掏出了我的24K合金键盘来，三下五除二的写出了 sort 排序：let arr = [{letter: 'a'}, {letter: 'c'}, {letter: 'b'}, {letter
2020-10-26 09:05:40
3393
5
原创 JS 在数组指定位置插入元素
最近有个需求：将一个元素插入到现有数组的指定位置回忆了一下，添加数组元素有这几个方法：unshift、push、splice前两个是只能在数组开头/末尾添加，显示是不符合需求的，那么只剩 splice 了splice 的定义是：从数组中添加/删除项目，返回被删除的项目，并且会改变原数组。这不就是我们想要实现的吗上才艺var array = [1, 3, 4];array.splice(1, 0, 2); // after：[1, 2, 3, 4]每次都要这样写有点麻烦，来封装一下/**
2020-10-22 19:03:22
2219
原创 小程序图片转base64
/*** 图片转base64* @param img 要读取的文件的路径 (本地路径)*/imgToBase64 = (img: string) => { return 'data:image/jpeg;base64,' + Taro.getFileSystemManager().readFileSync(img, 'base64');};可以配合 wx.chooseImage api做上传图片功能更多说明请看文档：https://developers.weixin.qq.com/m
2020-09-28 17:49:14
103
原创 JS 词法分析和变量提升
众所周知，js 代码是自上而下执行的，但是在执行前，会先进行词法分析。所以 js 执行过程分为 词法分析和执行两个阶段开始之前先介绍下形参和实参的区别形参和实参的区别说白了就是，形参就是函数声明时的变量，实参就是调用该函数时传入的具体参数 栗子function add(a, b) { return a + b}add(1, 2)在声明函数 add 时 a, b就是形参，在调用函数add(1, 2)时 1, 2就是实参词法分析主要有三个步骤分析参数分析变量声明分析函数声明
2020-09-10 18:02:49
262
原创 Nodejs版 12306查询余票小工具
一个 Nodejs 写的查询12306余票的小工具，查询到指定车次的车票后会反馈到邮箱git地址：https://github.com/isxiaoxin/12306已实现的功能根据中文站点名称去查找对应的站点代号支持查询单个/多个车次数据定时监控余票数量检测到指定车次票数的变化后发送新结果到邮箱使用方法1、把代码克隆到本地$ git clone https://github.com/isxiaoxin/12306.git2、安装依赖$ npm install/
2020-09-03 11:38:02
442
原创 JS 9种数据类型区别及相互转换
数据类型分类基本数据类型stringnumberbooleanobjectfunctionsymbol引用数据类型ObjectDateArray不包含任何值的数据类型nullundefined数据之间的转换其他数据类型转换成 Number转换方法Number(val)parseInt/parseFloat(val)Number浏览器内部默认 Number 转换在进行计算Number("1"); // 1Number(""); // 0Numb
2020-09-02 18:56:58
395
原创 h5 小游戏总结及踩坑记录（全是干货~）
这是近期的一个 h5 项目，由于某些原因，预览地址不能放出来。不过这不是重点，没有 demo 不就可以好好看文章了吗 哈哈哈~文中提到的 pixi 是 pixiJs，精灵是 pixiJs 中的概念。阅读本文假设你已经知道了这些东西，不过这在本篇文章中并没有太多关于这个库的内容觉得这篇文章有帮助到自己，就让它去收藏夹吃灰；觉得没用或觉得写的不好的，可以留下你的足迹；觉得我的代码或文字可以改善...
2020-04-30 20:06:00
1052
原创 font-spider 让网页引入中文字体成为可能
随着互联网的飞速发展，人们已经不满足于在web页面上使用一些默认字体了，但是页面引入字体文件体积很大加载又费时，那是怎么办呢？今天介绍的这个工具就可以完美的解决这个问题介绍字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。具体意思就是说你可以在页面直接引入字体，它能自动检测css里 @font-face 自定义的字体，并且从字体里提取出...
2020-04-19 22:20:13
167
原创 快过年了，给你的 commit 加上表情吧
官方demo弄的比较大气，但是不太适合找图标。我这里只是把图标整理成了表格方便大家查阅，也顺便让不知道这个工具的童鞋简单了解一下用法效果安装npm i -g gitmoji-cli使用git commit -m ":art: 说明"图标列表图标代码说明????????改进了代码结构或代码格式⚡️⚡️提升了性能????????删了代码或改了文件????...
2020-01-20 09:13:36
244
原创 兼容ios浏览器记录
兼容ios浏览器记录一、：hover在ios无效问题1. js绑定1. html添加二、部分元素存在默认样式的问题写的好好的网站 到真机·iphone上会被各种兼容坑的苦不堪言。今天来介绍几种常见坑的解决办法。一、：hover在ios无效问题这个比较简单。只需要在按钮元素或body或html上绑定一个touchstart事件，激活:active状态就好了。1. js绑定document...
2019-04-25 15:15:42
287
原创 xScroll.js 元素滚动触发效果插件(原创)
xScroll.js 一款轻量级的元素滚动插件使用文档：1、引入animate.css<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css">2、HTML <div class="xScroll(可以自定义类名)" data-animation="fade...
2019-04-12 07:45:05
808
转载 GitHub上传整个文件夹
下载git：点我进入下载页面然后开始使用Git BashGit要求每台电脑都要有自己的用户名(User Name)和邮箱(Email)设置账户和密码：git config --global user.name "your name"git config --global user.email "your email"建立和上传SSH Key找到你这台电脑的管理员账户文件夹下有这个...
2019-03-15 18:24:06
2238
转载 px2rem的食用方法
安装npm install px2rem-loader找到 build 文件夹里的 utils.js 这个文件 在cssloader 后面加入var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 40 // 40px = 1rem remPrecisio...
2019-03-06 10:51:58
3277
原创 gulp打包项目记录
一、安装环境NodeJS、NPM安装配置步骤(windows版本)1、windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/） 便可以看到首页的“INSTALL”按钮，直接点击就会自动下载安装了。2、安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加...
2019-02-22 21:04:14
937
原创 面向对象思想开发选项卡插件
面向对象思想开发选项卡插件(总结) - 小鑫参数说明triggerType触发事件的类型effect切换的效果，只支持淡入淡出(fadeIn)和defaultauto是否自动切换，数值为自动切换invoke默认显示第几个选项卡完整代码如下(部分有注释)：&lt;!doctype html&gt;&lt;html lang="en"&gt;...
2019-02-01 21:58:25
186
转载 快速理解js中的call，apply
今天被小伙伴问到 js 中的 call，apply 的区别和用途，解释了一番后，想到之前在逼乎上看到更清楚的解释第一位生动形象的回答本身不难理解，看下MDN就知道了，但是不常用，遇到了，还要脑回路回转下。或者时间长了，还是要确定下去看下文档，为了方便记忆：猫吃鱼，狗吃肉，奥特曼打小怪兽。有天狗想吃鱼了猫.吃鱼.call(狗，鱼)狗就吃到鱼了猫成精了，想打怪兽奥特曼.打小...
2019-01-30 22:28:12
88
转载 jQuery动画效果插件easing的使用方法
我们都知道 jQuery自定义动画的函数animate自带的效果太单一了，只有linear和swing，这样的话怎么做有趣的效果呢？下面我给大家介绍jquery的动画效果插件easingcdn：https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.js引入之后，easing参数可选的值就有以下32种：1.linear2.swi...
2019-01-30 22:27:30
1966
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人