- 博客(56)
- 收藏
- 关注
原创 vue eggjs 文件分片上传
相当于如果10M的文件,可以把每个文件分成1M的大小上传,然后上传完后再进行合并。文件大小过大的时候可以对文件进行分片上传。eggjs服务器端代码。
2023-06-14 11:56:22
469
原创 Next 报 Super expression must either be null or a function
官网链接:https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-vs-client-components。第一次用next,发现组件引入后会报错,查了下文档发现是要在首行加入。
2023-06-13 11:27:37
348
原创 小程序包体优化
分包因为小程序限制了主包的大小不能超过2MB,而分包却没有限制这么,因此分包可以极大的优化包体。css对于主包中要用的css抽提出来,放在一个css中然后在app.tsx中引入,避免重复引入,打包后占包体大小。图片包中最好不要放1KB以上的图片,也可以全部放到CDN服务器上
2023-05-26 11:27:22
242
原创 EventSource+eggjs
最近看了chartGpt的请求,发现了EventSource的事件,之前没用过,所以学习下。请求过程中发现跨域了,然后配置了下允许跨域。eggjs 后端代码。
2023-03-30 17:02:48
540
原创 npm 发布私有包遇见 402 Payment Required
402 Payment Required - PUT https://registry.npmjs.org/ - You must sign up for private packages
2022-08-29 15:25:54
2461
原创 JS 实现队列
通过JS实现队列的数据结构,首先是最普通的队列,先入先出// 队列function createQueue() { // 队列 let queue = [] // 入队 const enQueue = (data) => { if(data == null) return queue.push(data) } // 出队 const deQueue = () => { if(queue.length === 0) return
2022-05-19 14:58:08
6218
1
原创 JS 遍历 哨兵模式优化
通过在遍历的时候,添加哨兵对数组进行优化,对比了下,在极限情况大概一千万条可以减少60%以上的遍历时间// 遍历const find = (num, key) => { let arr = [] for(let i = 0; i < num; i++) { arr.push(i) } const startTime = new Date() let i = 0 const n = arr.length while(i < n) { if( a
2022-05-11 17:51:52
254
原创 JS 链表实现LRU 最终使用淘汰算法
LRU: LRU是Least Recently Used的缩写,即最近最少使用,是一种常用的页面置换算法,选择最近最久未使用的页面予以淘汰。JS链表库 linked-listhttps://github.com/wooorm/linked-list大家也可以自己写链表import { List, Item } from "linked-list";`// LRU实例export default class LRUItem extends Item { constructor(value)
2022-05-11 17:41:19
328
原创 webapck 5 背景图无法正常加载
因为我之前用的webpack 4,但是新安装的用的webpack5,然后我图片还是按照老一套的进行配置的,图片使用的url-loader,然后背景图片就无法加载了,最终通过看帖子和文档才发现,新版本的需要进行特殊设置或者可以使用最新的所以如果继续使用url-loader { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', o
2022-01-11 09:32:38
291
原创 redux文件结构优化
因为公司的redux结构不是太分明,因此研究了下redux的文件结构首先我们对reducer功能进行分离,这样更利于后期维护。// clearGoodsReducer.jsimport constants from "../constants";const { GOODS_CLEAR } = constantsexport const clear = () => ({ type: GOODS_CLEAR})export const reducer = (state, action
2021-12-29 17:48:41
475
原创 antd-mobile 多层modal弹框导致mask层显示异常
最近用antd-mobile2.30,因为需求需要输入大量信息,因此用到了多层弹窗,然后发现在安卓中多层弹窗正常,但是在ios弹窗中的Modal.alert弹框的mask层无法正常显示因此看了下它的css属性发现,wrap层存在z-index, translateZ两个属性在两个系统中渲染顺序的问题.am-modal-wrp { z-index: 999; transform: translateZ(0.2667rem);}z-index在安卓中等级较高,而translateZ在ios中等级较
2021-12-13 10:52:23
2765
1
原创 使用ftp-deploy进行自动化发布
最近准备整个自动化发布,发现了react架构中可以直接使用ftp-deploy,于是开搞首先 安装依赖npm install ftp-deploy然后在项目build目录下新建ftp-deploy.jsconst FtpDeploy = require('ftp-deploy')const ftpServ = new FtpDeploy()let config = { user: username, // 服务器登录账号 password: password, // 服务器密码
2021-12-09 15:52:47
1404
原创 antdesign-mobile 图片选择器ImagePicker反写
今天遇见一个问题,是把base64数据重新反写倒ImagePicker中,稍微研究了一下首先需要先把base64进行转换。// base64 to fileconst dataURLtoFile = dataurl => { let binary = atob(dataurl.split(',')[1] let mime = dataurl.split(',')[0].match(/:(.*?);/[1]) let array = [] for(let i = 0; i < b
2021-11-19 18:11:39
606
原创 antd-mobile teaxtarea出现异常滚动条
今天在开发一个页面的时候,发现文本输入框里面,多出来一条灰色的由于在我的手机上没有出现,而是在一个老版本的安卓手机上出现的这就让我感觉很有意思,后面我就试了试,发现它还会随着内容变长,我感觉基本就是一条滚动条了,但是还是记录下只需要在内部样式.am-text-area-control { overflow: hidden; .am-text-area-control { textarea { overflow: hidden; } }}...
2021-09-14 17:36:13
281
原创 react List点击父节点绑定点击事件
今天我在做一个List的点击选择的时候,我发现平常我都是直接把List中的每一个Item都会进行点击事件绑定,这样性能似乎不太好,我完全可以在父节点上进行绑定。<List onclick={e => fun(e.target.offesetParent.parentNode.id)}> arr.map((item, index) => ( <div id={index} key={String(index)}> {item.data} </div&
2021-09-01 17:52:09
504
原创 taro-ui at-input的title样式无法修改的问题
今天要对input组件进行二次封装以下,发现在组件中样式文件写进去没效果.at-input__title { font-size: 34PX; width: 34PX; color: #3C3C3C;}具体原因我还是没发现,但是通过class选择器确实无法修改样式,最终通过诸多尝试,我发现可以使用标签选择器label { font-size: 34PX; width: 34PX; color: #3C3C3C;}这样就可以了...
2021-08-23 09:52:10
908
原创 变量声明与循环变量冲突
今天写taro代码的时候,发现报此变量声明与循环变量冲突,我百思不得其解,明明map和平常是一样的写的 ,最后我多番尝试,发现自己犯了一个基础问题,class命名不规范,export default class index extends Component {}class名首字母应该大写export default class Index extends Component {}...
2021-08-13 11:12:55
184
原创 Taro 下载图片到手机
最近需要做一个微信下载图片到手机的需求,因为涉及到微信的照片权限,因此做个记录// 鉴权操作 判断是否有保存到相册的权限// 有就直接下载 没有就弹窗提示给权限downImg() { Taro.getSetting({ success: res => { if(!res.authSetting['scope.writePhotosAlbum']) { Taro.authorize({ scope: 'scope.writePhotosAlbum', suc
2021-08-12 10:51:00
784
原创 vue 多页面打包配置
因为我们公司的项目是多页面应用,不同于传统单页面应用,一个包就可以了。我们必须要分模块打包,因此特意研究了下webpack,然后整理了一下多页面打包的逻辑。1.首先,用vue-cli搭好基本的项目结构。安装vue-clinpm install --global vue-cli然后用测试下vue -V 然后生成项目vue init webpack hndlBuild然后这是生成的项目结构接下来我们对这个结构进行下调整2. 项目结构调整由于每个功能的路由也是单独的,因此我们需要
2021-05-24 15:58:48
1624
原创 Vue 数据可视化大屏适配
最近手里有个需求,需要做大屏适配,原本在本地展示正常的页面,放在大屏上展示就无法满屏了,在网上搜集了一点资料最终自己总结了下首先在mounted生命周期中,监听window的变化window.addEventListener('resize', () => { console.log('resize') this.resize()})然后在methods中增加resize方法resize() { // 记录开发时候的尺寸 const width = 1550 ,h
2021-05-15 17:44:32
2712
原创 Echarts 折线图 渐变区域
series: [ { name: "农村", type: "line", data: [20,10,20,10,20], symbol: "none", // 去掉折现图上的圆点 areaStyle: { // 折线下区域样式 color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgba(0, 101, 203,1)" }, {.
2021-04-27 10:06:44
236
原创 微信浏览器音乐不自动播放
在进行微信公众号开发的时候,发现在微信公众号中直接调用audio.play()会报错,Uncaught (in promise) DOMException,在了解过后发现时因为浏览器本身的原因,但是浏览器也提供了解决方案只需要通过var audio = doucument.getElementById('id');audio.load()var playPromise = audio.play()if(playPromise !== undefined) { playPromise.then(f
2021-02-04 17:19:34
434
原创 eggjs session传递不成功
最近自己写node后台的时候遇见一个问题,在egg框架中,跨域参数设置成config.cors = { origin: 'http://localhost:3000', allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS' };无法进行session传递,登录接口获取session后并没存储起来于是乎发现需要允许cookie跨域config.cors = { origin: 'http://localhost:3000',
2021-01-26 15:06:31
752
1
原创 vue 使用element-ui input输入框输入值不变
同事在使用el-input组件时,在v-model绑定对象的时候,发现输入不生效<el-input v-model="model.name" placeholder="请输入内容"></el-input>data() { return { model: {} }, methods: { getData() { model.name = 'zs'; } }}后来我检查发现是由于在初始化时并未设置name属性,在设置该参数后无法监听参数的改变<
2021-01-15 09:42:53
3480
原创 echart图标渐变色
渐变色调用echarts内部对象{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ { offset: 0, color: '#41c469' }, { offset: 1, color: '#ffffff' } }])}
2021-01-15 09:10:55
192
原创 js 深拷贝
JS的深拷贝由于基本数据类型一般存储在栈中,而引用类型栈中只存储了一个引用,真正的内容存储在堆中比如我们对一个基本类型进行赋值var a = 1var b = aa = 3console.log(a) //3console.log(b) //1我们发现b并未因为a的改变而被改变而对一个引用类型进行赋值时var a ={ name: 'zs', age: 33,}var b = ab.age = 35console.log(a.age) // 35console.log(b
2020-12-21 13:39:15
99
原创 前端 css 模块居中
通过父盒子flex布局father-box { display: flex; align-items: center; justify-content: center;}通过子盒子margin和transformbox { margin-top: 50%; margin-left: 50%; transform: translateX(-50%) translateY(-50%);}通过子盒子绝对定位box { width: 100px; height: 100.
2020-12-16 16:28:12
428
原创 echart 折线图点击区域获取对应参数
今天有个新需求,需要点击某片区域获取对应参数,但是发现echart折线图必须点到点上面才可以,于是查阅了几篇博客,总算解决了,解决方法如下:首先需要在option的xAxis中增加triggerEvent: true然后调用echart.setOption(optionData)生成图形后新增点击事件chart.getZr().on('click', function(params) { var pointInPixel = [params.offsetX, params.offsetY]
2020-12-10 10:22:02
2714
原创 CocosCreator笔记
Cocos creator声音控制增加声音 先在全局增加一个节点Node 再在script中创建一个sound脚本 集中控制声音 再通过对脚本进行挂载 然后脚本可以通过传入参数进行判断播放什么声音全局对象定义对于全局需要使用的对象,类似商商城,人物信息等,可以通过window全局对象进行挂载,如window.g_login通过延迟调用来实现在别的js中调用该js然后再node中把js挂载 在把挂载的node拖到需要调用的js中 properties: { canvas: requir
2020-11-02 15:11:58
1558
原创 webpack 笔记
webpackurl-loader小图片可以通过url-loader转换成base64文件监听在修改页面后要立马刷新,而不是手动去构建,可以通过文件监听来完成。启动webpack命令时,带上 --watch参数在webpack.config.js 中设置watch: true缺点: 需要手动刷新原理是 : 轮询判断文件的最后编辑时间是否变化某个文件发生了变化,并不会立刻告诉监听者,而是先缓存起来,等aggregateTimeoutmodule.export = { // 是否监听
2020-11-02 15:10:14
275
原创 小程序笔记
小程序小程序点击事件bindtap 会穿透catchtap 不会穿透函数中this会指向函数本身需要给事件处理函数指定参数 只能通过dataset来指定 <button bindtap="hello" data-say="hello">点击</button>然后在js中e.target.dataset.say小程序无法实现数据的双向绑定可以调用this,setData({ name: value}) // 直接赋值无法实现通知界面做出变化 所以不使用t
2020-11-02 15:03:57
161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人