- 博客(74)
- 资源 (15)
- 收藏
- 关注
RSS订阅
原创 常见 MIME 类型列表
以下代码为各文件的MIME类型，如果有个别文件在代码中找不到相应的MIME类型，可参考网站MDN网站 {".3gp", "video/3gpp"}, {".apk", "application/vnd.android.package-archive"}, {".asf", "video/x-ms-asf"}, {".avi", "video/x-msvideo"},
2020-12-04 11:53:41
559
原创 js常用的操作数组的方法（排序、去重、分组、数组转成tree结构数组、根据指定节点获取所有父级）
排序、去重、分组、数组转成tree结构数组、根据指定节点获取所有父级
2020-07-24 11:15:16
633
原创 js日期工具类，兼容ios
/* js 日期工具类 *//**时间戳、普通日期、字符串格式化,并返回指定格式@param date 字符串/日期@param fmt 返回的日期格式@returns {void | string}@constructor*/export function dateFormat (date, fmt) {if (!date) {return ‘’}date = deal...
2019-08-19 16:25:58
311
原创 常用的CSS渐变样式
加上属性后clip-path: inset(0 round 24px);边框渐变（border-image不支持圆角）方案1： 边框渐变( 支持圆角)
2023-07-28 18:34:09
548
原创 父组件（class）调用子组件（hooks）的方法
子组件import React, { useImperativeHandle, forwardRef } from "react" let Child = (props, ref) => { useImperativeHandle(ref, () => ({ confirmPostcardOrder })) const confirmPostcardOrder = () => { console.log("子组件方法1") } return
2022-04-28 17:17:20
1148
原创 Taro小程序引用ScrollView组件注意点
不同页面引用的ScrollView组件的scrollIntoView属性设置的值必须不一样，否则ScrollView组件里引用的click方法会被污染。例如：前提条件：A页面（Tabbar页）和B页面（非Tabbar页）都引用了ScrollView组件，scrollIntoView属性设置的值都一样。造成结果：从A页面跳转到B页面，再从B页面返回A页面，此时B页面已被卸载，但是触发A页面ScrollView组件里调用的click方法时，发现实际上触发的时B页面ScrollView组件里调用的clic
2022-02-16 16:30:10
1841
原创 canvas绘制多个矩形实现热区图功能
热区图功能：上传一张背景图，在背景图上框选指定区域，配置对应的跳转链接和领券信息canvas绘制矩形组件<template> <div class="img-intercept-content" :style="hotStyle"> <div class="imgContainer" :style="hotStyle" ref="imgContainer"> <canvas ref
2021-11-29 17:48:28
1726
原创 js注意点
一、三个等号和两个等号的区别（=== 和 ==）===：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；==：称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；类型转换规则：1）如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。2）如果等号两边出现了null或undefined,null和undefined除了和自己相等，就彼此相等注意：NaN=
2021-08-26 11:23:41
63
原创 微信小程序苹果手机边框1rpx显示不全解决办法
微信小程序苹果手机边框1rpx显示不全，加上transform: rotateZ(360deg).address-map_details{ width: 125px; height: 36px; line-height: 36px; border: 1px solid #e4e5e6; transform: rotateZ(360deg);}
2021-08-10 11:02:19
891
原创 js计算文本在页面所占px宽度
计算文本在页面所占px宽度 -- 扩展String原型方法pxWidth（web端适用）/*** 获取文本px宽度* @param font{String}: 字体样式**/String.prototype.pxWidth = function(font) { var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),
2021-06-28 10:10:28
1717
2
原创 如何优化具有许多图像和无限滚动的网页的性能
总结超前阈值的懒加载＋DOM Cache和图片Cache＋滚动throttle模拟＋CSS fadeIn动画。
2021-06-09 14:52:03
81
原创 瀑布流的多种实现方式和优缺点
瀑布流相关个人建议（供参考）用flex布局+JS计算两列高度来实现。基本思路是flex-box容器下有左右两列容器（对应组件state中的list1和list2数组），从list1开始创建子项，创建后计算左右两列容器的高度来比较，高度小的列对应的list数组就会push一个子项，这样循环到列表项全部创建完为止。（因为商品流的图片区域高度是固定的，影响列表子项容器高度的只有标签，所以不用考虑图片加载完成后才能得到的高度，即不用考虑Image组件的onLoad事件，因此实现起来还是简单的）注意点：Taro3
2021-06-08 16:29:50
950
原创 js数组分页
将数组进行分页，返回新的分页数组/** 将数组进行分页，返回新的分页数组 * @param {Object} pageSize 每页大小 * @param {Object} arr 数组 */function returnAllPageFunc(pageSize, arr) { let pageNum = 1 let pageObj = { pageNum: 1, list: [] } let pageResult = [] let newArr = JSON.par.
2021-05-31 11:53:37
3068
原创 小程序视频组件重写
需求视频交互：用户wifi状态：视频自动播放（默认静音播放） 流量状态：视频界面有播放按钮，点击按钮可播放视频。点击视频界面则视频停止播放，下方出现播放开关、进度条、声音开关，支持调节进度条 再次点击视频界面可重新播放，重新播放时进度条隐去。页面滑动至视频下方，即完全看不见该视频界面，则视频播放停止。 视频尺寸750宽*420高。componentWillMount () { // 入口判断是否wifi条件访问小程序 let _this = this Taro.g
2021-05-26 15:35:41
151
原创 小程序分享
转发获取更多转发信息通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息，例如群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true ，当用户将小程序转发到任一群聊之后，此转发卡片在群聊中被其他用户打开时，可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket。通过调用 wx.getShareInfo 接口传入此 shareTicket 可以获取到转发信息。页面内发起转发基础库 1.2.0
2021-04-16 09:52:29
119
原创 小程序保存图片到相册
情景1：只有图片的远程链接1.通过wx.downloadFile将图片下载到本地，拿到临时图片路径，再通过注意：以下代码使用的是Taro框架，如果是用原生开发，将Taro改成wx情景2：只有图片的二进制流数据...
2021-04-14 16:48:17
775
原创 小程序使用canvas生成海报
Taro框架使用taro-plugin-canvas插件快速生成海报小程序原生框架使用wxa-plugin-canvas插件快速生成海报
2021-04-14 16:38:04
285
原创 小程序埋点工具类
import { reportUrl } from '@/utils/conf.js'import { getJsonHead } from '@/utils/header.js'import request from '@/utils/request.js'import Taro,{getCurrentInstance} from '@tarojs/taro'const maxlength = 1 //最大上传数据, 当本地存有10条数据的时候才开始上报，1即每次手收集到数据就上报// 是否验
2021-04-14 16:28:35
170
原创 web前端基本技能
1、 es62、http，https，tcp，通信原理3、ajax，fetch，websocket4、vue原理和基础，vue2和vue3，vuex， vue-router5、react，redux，react native6、小程序，uniapp, 公众号7、页面适配（vw，rem，自适应，响应式布局，流式布局等）8、项目优化，打包优化9、webpack，nodejs10、js基础，css基础，html基础，jQuery11、h5缓存12、浏览器兼容性（js和css）13、ngin
2021-01-12 17:45:04
144
原创 前端接收图片流并展示图片
1. 请求方法加上responseType：‘blob’2. 将图片流转成blob格式，通过window.URL.createObjectURL方法获取图片路径并展示
2020-12-22 16:01:28
7174
原创 文件柜组件，上传文件组件（Vue版本）
<template> <div> <a-modal v-if="ready" width="1024px" :visible="true" :maskClosable="false" @cancel="$emit('cancel')" :footer="null" >
2020-12-17 10:22:36
511
原创 UEditor组件封装，重写上传文件功能，重写全屏样式（Vue版本）
前言：使用百度编辑器，重写上传功能，将编辑器的上传图片，上传音视频功能禁用，在工具栏中多加一个上传文件的功能（这是一个文件柜，支持上传图片/音频/视频/压缩文件/文本文档）将ueditor封装成组件，编辑器的id要随机生成的，这里编辑器的id我拿的是时间戳this.editorId = String(new Date().getTime())修改编辑器的ueditor.config.js配置文件（1）编辑器的默认层级过高，修改编辑器的默认层级（2）插入图片时，需要为图片增加styl
2020-12-17 10:03:59
639
原创 Redux实现数据持久化
在开发的过程中，数据用redux管理，觉得希望将数据持久化保存，也就是说当用户下一次打开app或网站的时候，我们希望浏览器/APP自动加载出上次的数据，怎么办？有没有一个统一的方式？有的，这就是简单易用的redux-persist，事情比想象的简单太多了。话不多说，上代码！1、对于reducer和action的处理不变，只需修改store的生成代码，修改如下import {createStore} from 'redux'import reducers from '../reducers/inde
2020-09-09 10:33:55
272
原创 Vue组件通信（父子组件通信，非父子组件通信）
总结常见使用场景可以分为三类：父子通信：父向子传递数据是通过 props，子向父是通过 events（emit）；通过父链/子链也可以通信（emit）；通过父链 / 子链也可以通信（emit）；通过父链/子链也可以通信（parent / children）；ref也可以访问组件实例；provide/injectAPI；children）；ref 也可以访问组件实例；provide / inject API；children）；ref也可以访问组件实例；provide/injectAPI；attrs
2020-08-28 16:16:46
302
原创 React入门篇-兼容IE9+
1. @babel/core ^7.4.0以上版本（含 ^7.4.0版本）IE9+兼容方案如下：安装依赖包 core-jsnpm install core-js在入口文件最顶部引入// 兼容IEimport "core-js/stable";import "regenerator-runtime/runtime";2. @babel/core ^7.4.0以下版本IE9+兼容方案如下：安装依赖包 @babel/polyfillnpm install @babel/pol
2020-06-10 15:44:23
360
原创 React入门篇-vw移动端适配
vw 适配，简单配置，一劳永逸，高可靠的还原设计师的稿子，给你底气和设计师对标UI。 该demo 为vw 适配方案 react 16 && react-router-dom 4+ 搭配使用，一个多页面路由项目步骤：创建项目 && 初始化create-react-app react-vw-layoutcd react-vw-layout开启我们的配置之路&&简单配置react 把配置都隐藏了，需要我们手动来显示配置npm run eje
2020-06-09 10:31:41
938
1
原创 Js根据class名/id/标签在指定位置替换html标签内容
function getClass(obj, attr) { var aArray = [];//定义一个新的空数组 var i = 0; var aAll = document.getElementsByTagName('*');//获取obj对象下面所有的节点 for (i = 0; i < aAll.length; i++) { if (aAll[i].className == attr) {//判断
2020-06-04 11:29:26
1050
原创 vue项目打包开启gzip压缩
vue-cli3+ 项目开启gzip压缩安装compression-webpack-plugin插件(可装1.1.12版本，部分版本打包会报错)npm install compression-webpack-pluginvue.config.js文件中加入以下指定代码const productionGzipExtensions = /\.(js|css|json|txt|html...
2020-04-07 16:39:52
1234
原创 宝塔面板：Nginx开启gzip，提高网站访问速度
1.进入自己自己的网站配置，在最后的 } 前面，添加如下代码 gzip on; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_types image/svg+xml text/plain text/html text/x...
2020-04-07 15:40:28
4121
1
原创 vue使用keep-alive后watch事件不销毁解决方案
使用了keep-alive动态缓存页面之后，有一些很难解决的问题：每个页面里面设置的watch监听事件，如果监听了路由的变化或者vuex的变化，在切换页面的时候不会被销毁页面上的一些方法会被叠加触发，不知道是不是监听了路由的原因，导致每次切换页面，很多方法会被重复叠加的触发，比如切换第一次触发2次，切换第2次触发3次，第3次触发4次，类似这样的情况解决方案：定义一个全局 mixin.j...
2020-03-30 11:05:06
3900
2
原创 小程序RSA加密 - 公钥加密
RSA使用import { Base64 } from "../../utils/js-base64"; // base64加密const Encrypt = require('../../utils/jsencrypt.js'); // 路径看个人的放哪里哈import { publicKey} from '../../utils/util.js' // 公钥// 使用RSA加密后...
2020-03-27 10:34:21
1159
原创 webpack分环境打包 - 基于vue-cli3/vue-cli4
1.了解环境变量概念我们可以根目录中的下列文件来指定环境变量:.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略我们可以根目录中的下...
2020-03-27 09:59:17
282
原创 webpack分环境打包
在项目开发中，我们的项目一般分为开发版、测试版、prod版。Vue-cli的默认环境一只有dev和prod两个，之前每次要发布测试版或prod版都是修改了源码中API地址后打包，这样很麻烦。如果能根据不同环境打包就完美了。主要针对不同环境，需要调用多个域的接口有所区分，有时候一个项目中，需要调用多个域名不同的接口，分环境打包就显得非常方便了。1.安装cross-envnpm i --save-...
2020-03-27 09:27:57
512
原创 Vue项目中使用vw完成移动端页面适配
前提你已经了解vue cli来构建项目。无论使用vue cli 2.x 还是3.x 版本，如果你了解webpack配置，那么过程都是大同小异。首先我们初始化一个项目:vue init webpack vue-vw进入项目：cd vue-vw启动项目：npm run dev1. 安装一些PostCSS插件在项目的根目录下有一个.postcssrc.js，默认情况下已经安装了以下...
2019-11-07 13:23:28
368
原创 各式各样的css loading，兼容各种浏览器
<style type="text/css"> .lds-circle { display: inline-block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; background: red; ...
2019-11-01 10:40:57
269
sku多属性选择算法-基于vue
2021-07-27
纯css-loading兼容Safari ，Chrome，Mozilla Firefox，opera，ie10+
2019-04-04
Expo 安卓apk安装包（调试React Native）
2018-10-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人