分类学习笔记下的文章

2024-05-12

2024年05月12日
823 阅读
0 评论
0 点赞

2023-12-26

堆叠轮播图（color ui原生小程序代码优化) {% note info simple %}界面内容并非本人原创，只是适配了原生小程序代码{% endnote %}最近找了一些小程序的组件库，发现了Color UI界面和色彩搭配都比较符合我的需求，但是在进一步了解的时候发现这个项目已经停更了很长时间，有一部分功能已经无法正常使用。感兴趣的可以到作者仓库看看{% link coloruicss,github,https://github.com/weilanwl/coloruicss?tab=readme-ov-file %}项目中的堆叠轮播图挺好看，但是没有原生小程序代码，故此进行了简单的适配这里封装成了组件，组件属性根据自己需求修改tower-swiper.json{ "component": true, "usingComponents": {} }tower-swiper.wxml<view> <view class="tower-swiper" bindtouchmove="TowerMove" bindtouchstart="TowerStart" bindtouchend="TowerEnd"> <view class="tower-item {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key="index" style="transform: scale(calc(0.5 + {{item.zIndex}} / 10));--index: {{item.zIndex}};margin-left: calc({{item.mLeft}} * 100rpx - 150rpx); z-index: {{item.zIndex}};"> <view class="swiper-item"> <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image> <video src="{{item.url}}" autoplay loop muted data-show-play-btn="false" objectFit="cover" wx:if="{{item.type == 'video'}}"></video> </view> </view> </view> </view>tower-swiper.wxss.tower-swiper { height: 420rpx; position: relative; max-width: 750rpx; overflow: hidden; } .tower-swiper .tower-item { position: absolute; width: 300rpx; height: 380rpx; top: 0; bottom: 0; left: 50%; margin: auto; transition: all 0.2s ease-in 0s; opacity: 1; } .tower-swiper .tower-item .none { opacity: 0; } .tower-swiper .tower-item .swiper-item { width: 100%; height: 100%; border-radius: 6rpx; overflow: hidden; }tower-swiper.jsComponent({ /** * 组件的属性列表 */ properties: { swiperList:{ type:Array, value:[{ id: 0, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg' }, { id: 1, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg', }, { id: 2, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg' }, { id: 3, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg' }, { id: 4, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg' }, { id: 5, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg' }, { id: 6, type: 'image', url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg' }] }, towerStart:{ type:Number, value:0 } }, /** * 组件的初始数据 */ data: { timer:null, towerStart: 0, direction: 'left' }, lifetimes:{ attached(){ this.TowerSwiper(); this.direction = 'left'; this.setData({ direction: "left" }) this.swiperOn() } }, /** * 组件的方法列表 */ methods: { swiperOn(){ const _this = this let timer = this.data.timer if(!timer){ timer = setInterval(()=>{ _this.TowerEnd() },1000) this.setData({ timer }) } }, // 初始化towerSwiper TowerSwiper() { let list = this.data.swiperList; for (let i = 0; i < list.length; i++) { list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2)) list[i].mLeft = i - parseInt(list.length / 2) } this.setData({ swiperList: list }) }, // towerSwiper触摸开始 TowerStart(e) { const pageWidth = wx.getSystemInfoSync().windowWidth this.setData({ towerStart: e.touches[0].pageX, direction: e.touches[0].pageX < pageWidth/2 ? 'right':'left' }) }, // towerSwiper计算方向 TowerMove(e) { this.setData({ direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left' }) }, // towerSwiper计算滚动 TowerEnd() { let direction = this.data.direction; let list = this.data.swiperList; if (direction == 'right') { let mLeft = list[0].mLeft; let zIndex = list[0].zIndex; for (let i = 1; i < this.data.swiperList.length; i++) { list[i - 1].mLeft = list[i].mLeft list[i - 1].zIndex = list[i].zIndex } list[list.length - 1].mLeft = mLeft list[list.length - 1].zIndex = zIndex } else { let mLeft = list[list.length - 1].mLeft; let zIndex = list[list.length - 1].zIndex; for (let i = list.length - 1; i > 0; i--) { list[i].mLeft = list[i - 1].mLeft list[i].zIndex = list[i - 1].zIndex } list[0].mLeft = mLeft; list[0].zIndex = zIndex; } this.setData({ direction, swiperList: list }) }, } })

2023年12月26日
450 阅读
0 评论
0 点赞

2023-11-18

使用MySql触发器简化各表数据操作触发器基本语法生成一个触发器CREATE TRIGGER 触发器名触发事件(BEFORE|AFTER INSERT|UPDATE|DELETE) ON 表名 FOR EACH ROW 触发器激活后需要执行的语句一些注意事项同一个数据库中不能创建同名触发器在同一张表中不能出现触发条件相同的触发器使用NEW和OLD来获取数据变化前后的记录值如果激活后只有一条操作，可以直接写，如果需要复杂操作则需要使用BEGIN...END;语句包围查看触发器SHOW TRIGGERS ;删除触发器DROP TRIGGER 触发器名; 修改触发器将已有触发器删除后再重新创建😂一个简单的触发器示例CREATE TRIGGER update_userinfo_trigger AFTER UPDATE ON user FOR EACH ROW BEGIN IF NEW.user_name <> OLD.user_name THEN UPDATE task_my SET user_name = NEW.user_name WHERE user_id = NEW.id; UPDATE table1 SET user_name = NEW.user_name WHERE user_id = NEW.id; UPDATE table2 SET user_name = NEW.user_name WHERE user_id = NEW.id; END IF; END;该触发器实现了，在更新user表中的name时，可以同时联动着将其他表中的name也更新掉，实现用户数据的统一

2023年11月18日
402 阅读
0 评论
0 点赞

2023-10-03

CSS实现水波纹扩散效果主要CSSanimationtransform: scale()opacitynth-child()效果展示代码<div> <style> .ripple { width: 200px; height: 200px; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); border-radius: 50%; background-color: blueviolet; } /* 根据需求自定义 */ .content{ position: absolute; z-index: 99; /* 与.ripple的top和left相同 */ top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; border-radius: 50%; background-color: rgb(42, 42, 180); font-size: 20px; font-weight: bold; color: #FFF; text-align: center; line-height: 200px; } .ripple:nth-child(2){ animation: wave 1s linear infinite; } .ripple:nth-child(3){ animation: wave 2s linear infinite; } .ripple:nth-child(4){ animation: wave 3s linear infinite; } .ripple:nth-child(5){ animation: wave 4s linear infinite; } @keyframes wave { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } } </style> <div class="box"> <div class="content">内容</div> <div class="ripple"></div> <div class="ripple"></div> <div class="ripple"></div> <div class="ripple"></div> <div class="ripple"></div> </div> </div>实现的逻辑就是通过animation动画重复将这些元素放大1.5倍，同时将元素变为完全透明，从而达到波纹扩散的效果

2023年10月03日
423 阅读
1 评论
0 点赞

2023-05-24

NextCloud无法上传大文件问题解决 NextCloud无法上传大文件问题解决限制NextCloud上传大文件的主要因素有两个，一个就是上传文件的大小，以及文件上传超时时间。修改PHP文件上传限制查看PHP配置文件路径php -i |grep php.ini修改文件中的upload_max_filesize限制上传文件大小可根据自己的需求设置，我这里设置了16Gupload_max_filesize = 16G修改文件上传超时时间max_execution_time以及页面数据接收超时时间max_input_timemax_execution_time = 3600 max_input_time = 600修改post表单接收最大值post_max_sizepost_max_size = 16G修改Nginx文件上传限制修改Nginx配置文件/etc/nginx/nginx.conf在http或者location下添加client_max_body_size 0;0表示无限制内网穿透多Nginx配置如果做内网穿透使用HTTPS并且使用了多个Nginx，每个Nginx下都要做文件上传限制配置

2023年05月24日
573 阅读
0 评论
0 点赞

2023-04-30

2023年04月30日
474 阅读
0 评论
0 点赞

2023-02-05

ESP32通过SmartConfig扫码配网前引对于ESP配网方式和SmartConfig的介绍，在ESP-IDF编程指南中已经介绍得很详细了，这里就不在赘述。{% link ESP配网API,ESPRESSIF,https://docs.espressif.com/projects/esp-idf/zh_CN/latest/esp32/api-reference/provisioning/index.html %}这里主要来介绍一下在Arduino中怎么使用SmartConfig来实现微信扫码配网，配网失败的一些解决办法，主要代码参考了CSDN上的一篇文章（不能确定是不是原作者，对贡献代码的人都表示感谢）{% link ESP8266/ESP32 SmartConfig一键配网+自动重连+微信扫码配网,lw1997的博客-CSDN博客_esp32蓝牙配网,https://blog.csdn.net/u014091490/article/details/105178037 %}正文我只是在代码的原基础上做了简单的添加，指定了SmartConfig的Type#include "WiFi.h" void SmartConfig() { WiFi.mode(WIFI_AP_STA); Serial.println("\r\nWait for Smartconfig..."); WiFi.beginSmartConfig(SC_TYPE_ESPTOUCH_AIRKISS); //我做了修改的部分添加了“SC_TYPE_ESPTOUCH_AIRKISS” while (1) { Serial.print("."); delay(500); // wait for a second if (WiFi.smartConfigDone()) { Serial.println("SmartConfig Success"); Serial.printf("SSID:%s\r\n", WiFi.SSID().c_str()); Serial.printf("PSW:%s\r\n", WiFi.psk().c_str()); break; } } } bool AutoConfig() { WiFi.begin(); //如果觉得时间太长可改 for (int i = 0; i < 20; i++) { int wstatus = WiFi.status(); if (wstatus == WL_CONNECTED) { Serial.println("WIFI SmartConfig Success"); Serial.printf("SSID:%s", WiFi.SSID().c_str()); Serial.printf(", PSW:%s\r\n", WiFi.psk().c_str()); Serial.print("LocalIP:"); Serial.print(WiFi.localIP()); Serial.print(" ,GateIP:"); Serial.println(WiFi.gatewayIP()); return true; } else { Serial.print("WIFI AutoConfig Waiting......"); Serial.println(wstatus); delay(1000); } } Serial.println("WIFI AutoConfig Faild!" ); return false; } void setup() { Serial.begin(115200); delay(100); if (!AutoConfig()) { SmartConfig(); } } void loop() { // put your main code here, to run repeatedly: }在使用作者源代码的时候，微信扫码和ESPTouch APP都没有成功，然后看到说要指定连接的类型，就可以解决根据自己的需求选合适的类型就行。关于连接工具微信扫码官方给的工具网址为：https://iot.espressif.cn/configWXDeviceWiFi.html可以利用网址链接转二维码工具生成二维码，像我生成的二维码：利用ESPTouch可以到ESP官网下载软件，有Android和iOS版本{% link 资源 | 乐鑫科技,ESPRESSIF,https://www.espressif.com.cn/zh-hans/products/software/esp-touch/resources %}乐鑫信息科技微信公众号

2023年02月05日
409 阅读
0 评论
0 点赞

2022-12-21

Linux安装指定版本Nodejs 安装nodejs通过Linux自带软件库安装的nodejs往往版本较老可以通过设置代理更新nodejs软件版本curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -需要安装哪个版本就设置setup_18.x对应版本数字sudo apt-get install -y nodejs nodejs -v 查看版本号，测试安装成功npm更换淘宝镜像npm config set registry https://registry.npm.taobao.org

2022年12月21日
279 阅读
0 评论
0 点赞

2022-12-16

双系统时间不一致问题解决（Win和Linux） {% note info simple %}本文内容只为方便自己平时查找使用，并非原创性内容{% endnote %}在Linux中使用命令sudo timedatectl set-local-rtc 1将Linux系统时间和BIOS时间同步。sudo timedatectl status是最简单，命令最少的一种方法，亲测有效

2022年12月16日
291 阅读
0 评论
0 点赞

2022-11-26

DHT11模块 Arduino代码补充前引Arduino中已经有关于DHT11的库，但是为了理解模块的运行原理，而写了这个代码，代码中的不足之处还请多多指正。关于DHT11的原理，在之前的文章中已经提到过，就不再赘述。{% link DHT11温湿度模块部分代码实例,Mstzf,https://mstzf.cn/posts/dhtcode %}代码部分#define DHT11 15 void setup() { Serial.begin(115200); } void loop() { dht(); delay(2000); } void dht(){ double hum,tem; pinMode(DHT11,OUTPUT); digitalWrite(DHT11,HIGH); delay(2); digitalWrite(DHT11,LOW); delay(25); digitalWrite(DHT11,HIGH); delayMicroseconds(30); pinMode(DHT11,INPUT); if(!digitalRead(DHT11)){ Serial.println("ok"); while(!digitalRead(DHT11)); delayMicroseconds(10); while(digitalRead(DHT11)); int humInt=getData(); int humDec=getData(); int temInt=getData(); int temDec=getData(); int Check=getData(); if((humInt+humDec+temInt+temDec)==Check){ if(humDec<10){ hum=humInt+humDec/10.0; }else if(humDec<100){ hum=humInt+humDec/100.0; } if(temDec<10){ tem=temInt+temDec/10.0; }else if(temDec<100){ tem=temInt+temDec/100.0; } Serial.print("温度："); Serial.print(tem); Serial.println(); Serial.print("湿度："); Serial.print(hum); Serial.println(); } } else{ Serial.println("error"); } } int getData(){ byte Data; byte temp; for(int i=0 ;i<8;i++){ while(!digitalRead(DHT11)); delayMicroseconds(35); if(digitalRead(DHT11)){ temp=0x01; }else{ temp=0x00; } Data<<=1; Data|=temp; while(digitalRead(DHT11)); delayMicroseconds(10); } return Data; }

2022年11月26日
308 阅读
0 评论
0 点赞