feat: update

gouxiwen · Jul 5, 2024 · 15cbbc6 · 15cbbc6
1 parent c182cfb
commit 15cbbc6
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 6 deletions.
diff --git a/husky使用笔记.txt b/husky使用笔记.txt
@@ -8,6 +8,7 @@ npm pkg set scripts.prepare="husky install"
 // 创建钩子
 npx husky add .husky/pre-commit "npx lint-staged"
 执行完后会在.husky下添加一个pre-commit脚本，并加入npx lint-staged命令
+注意：add命令在^9.x以上版本已废弃，请参考官方文档解决
 
 // 配置lint-staged
 安装lint-staged npm install lint-staged --save-dev

diff --git a/svg学习笔记.txt b/svg学习笔记.txt
@@ -0,0 +1,63 @@
+svg可以用来绘制矢量图
+
+1. 绘制形状
+基础形状
+rect,circle等
+路径
+path
+命令      名称                                       参数
+ M        moveto  移动到                    (x y)
+ Z         closepath  关闭路径             (none)
+ L         lineto  画线到                        (x y)
+ H        horizontal lineto  水平线到     x
+ V        vertical lineto  垂直线到         y
+ A        elliptical arc椭圆弧                   (rx ry x-axis-rotation large-arc-flag sweep-flag x y)
+ C        curveto 三次贝塞尔曲线到      (x1 y1 x2 y2 x y)
+ S        smooth curveto光滑三次贝塞尔曲线到   (x2 y2 x y)
+ Q       Bézier curveto二次贝塞尔曲线到            (x1 y1 x y)
+ T        smooth Bézier curveto光滑二次贝塞尔曲线到  (x y)
+
+2. 动画
+animate：基础动画
+animateTransform：形变动画
+animateMotion：路径动画
+
+动画属性：
+attributeType: CSS/XML 规定的属性值的名称空间
+attributeName: 规定元素的哪个属性会产生动画效果
+from/to: 从哪到哪
+dur: 动画时长
+fill: 动画结束之后的状态 保持freeze结束状态/remove恢复初始状态（默认值）
+epeatCount：动画重复执行次数
+repeatDur：动画重复执行总时间
+begin：规定动画开始的时间/什么时间触发了再执行动画
+begin=“1s”：1s后开始执行动画
+begin=“click”：click触发事件执行了再执行动画
+begin=“click + 1s”：点击之后，等两秒再执行动画
+restart: 规定元素开始动画之后，是否可以被重新开始执行
+always：动画可以在任何时候被重置。这是默认值。
+whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后，才能再执行。
+never：在整个SVG执行的过程中，元素动画不能被重置。
+calcMode: 规定每一个动画片段的动画表现
+linear：默认属性值, 匀速动画
+discrete: 非连续动画, 没有动画效果瞬间完成
+paced: 规定整个动画效果始终以相同的速度进行，设置keyTimes属性无效
+spline: 配合keySplines属性来定义各个动画过渡效, 自定义动画
+keyTimes:
+划分动画时间片段, 取值0-1
+values:
+划分对应取值片段的值
+
+形变动画：
+形变动画注意点：
+1.attributeName属性的值永远是transform
+2.type属性说明做什么形变（平移、缩放、旋转）
+
+
+路径动画：
+可以让某一元素沿着某一路径运动，使用animateMotion标签
+注意点：
+path属性：指定元素按照哪一路径执行。path中的M起点是相对于矩形位置的。
+rotate=“auto”:是动画沿着路径自动旋转
+
+参考：https://blog.csdn.net/coldriversnow/article/details/130809134
diff --git a/uniapp使用记录.txt b/uniapp使用记录.txt
@@ -4,4 +4,83 @@ app-nvue 页面是原生渲染的，其样式比 web 会限制更多，另见nvu
 app-uvue 页面是原生渲染的，是 web 的css子集，另见uvue的css
 2. 可以使用HBuilderX和cli两种方式进行创建项目，HBuilderX对uniapp集成了很多优化
 3.如果要适配不同屏幕尺寸响应式改变元素尺寸，可以使用rpx单位（ rpx是微信小程序中对单位的规定），rpx不支持动态横竖屏切换计算，在vue页面也可以使用rem、vh/vw
-4.即使使用其他编辑器开发，开发和发布app时还是需要启动HBuilderX进行
+4.即使使用其他编辑器开发，开发和发布app时还是需要启动HBuilderX进行
+
+html5 plus（HTML5+）
+是一种由html5+联盟提出的规范
+提供js调用app原生api的能力，在支持html5+运行时的app中通过webview打开的h5可以使用
+使用方式，需要监听plusready事件
+document.addEventListener('plusready',function () { 
+        // 在这里调用5+ API 
+},false); 
+
+uni-app App端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力，内部webview当然也提供HTML5+ 引擎
+uni-app不需要 plus ready，直接使用
+注意：小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。
+
+webview内H5与应用（小程序，app）的通信
+1. 在H5中引入UniAppJSBridge
+下载地址：https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js
+示例：
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    ...
+  </head>
+  <body>
+    <noscript>
+      <strong>Please enable JavaScript to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+ <!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->  
+  <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
+  <!-- uni 的 SDK -->
+  <!-- 需要把 uni.webview.1.5.5.js 下载到自己的服务器 -->
+  <script type="text/javascript" src="https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js"></script>
+  <script>
+    document.addEventListener('UniAppJSBridgeReady', function() {
+      uni.webView.getEnv(function(res) {
+        console.log('当前环境：' + JSON.stringify(res));
+      });
+      // uni.webView.navigateTo(...)
+    });
+  </script>
+</html>
+2. H5
+向应用发送消息，非实时消息(后退、组件销毁、分享)时
+uni.postMessage({
+            data: {
+              action: 'message'
+            }
+          });
+3. 应用
+接收消息
+<web-view ref="webview" class="webview" @message="handlePostMessage"></web-view>
+
+handlePostMessage: function(data) {
+	console.log("接收到消息：" + JSON.stringify(data.detail));
+},
+
+
+使用hbulidx和vue-cli创建工程的区别
+hbulidx创建的工程没有node_modules，所有的工程类工具集成到编辑器的插件下，main.js兼容了vue2和vue3的创建，可以用mainfest.json->vueVersion切换版本
+vue-cli创建的工程和普通vue工程一样，工程类工具安装到node_modules下，使用命令行启动项目
+两种方式创建的工程都可以使用hbuildx自带的启动命令启动
+
+微信小程序切到后台以后大概40s后定时器会个三到五秒不等执行，五分钟之内不会休眠（目前测了五分钟）
+15：06：30
+...
+15：07：09
+15：07：10
+开始出现3到11秒间隔，长连接心跳从5秒变到30s
+15：08：58
+15：09：00
+出现长间隔
+15：10：38
+15：11：06
+小程序恢复到前台
+计时器正常
+
+
diff --git a/vue更新过程学习记录.txt b/vue更新过程学习记录.txt
@@ -1,2 +1,14 @@
 在父组件里使用子组件，父组件更新会生成新的vnode，子组件对应的vnode也会重新生成，只是子组件内部的vnode需要根据自身的data和props判断要不要重新生成
-在父组件层进行diff时，如果vnode时组件，则会执行prepatch，prepatch会调用updateChildComponent，updateChildComponent里面会处理更新，props，listens和solt，子组件是否更新需要根据props和data是否变化决定
+在父组件层进行diff时，如果vnode是组件，则会执行prepatch，prepatch会调用updateChildComponent，updateChildComponent里面会处理更新，props，listens和solt，子组件是否更新需要根据props和data是否变化决定
+
+h方法调用过程
+组件：
+单文件组件会被编译成一个包含render方法的对象，类似下面
+{
+name: xxx,
+render: function() {}
+}
+当creatElementVnode方法传入组件时，首先会生成组件的vnode，后续拆箱中如果vnode是组件类型则会先生成组件实例instance，然后调用render方法生成该组件的子级vnode：subTree挂在instance上，然后调用patch方法传入subTree继续拆箱。
+
+普通节点：
+直接生成自身的vnode
diff --git a/常用命令.txt b/常用命令.txt
@@ -4,7 +4,7 @@ open -n /Applications/Google\ Chrome.app --args --disable-web-security --user-da
 打开谷歌跨域浏览器指定版本,并禁用跨域限制
 open -n /Applications/Google\ Chrome90.app --args --disable-web-security --user-data-dir=存放数据目录
 win
-chrome.exe --args --disable-web-security --user-data-dir=存放数据目录
+"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=存放数据目录
 
 chrome.exe --args --force-fieldtrials="WebRTC-SpsPpsIdrIsH264Keyframe/Enabled/“
 这个参数的作用：

diff --git a/打开谷歌跨域.txt b/打开谷歌跨域.txt
diff --git a/音视频学习笔记.txt b/音视频学习笔记.txt
@@ -7,10 +7,12 @@
 
 Web主流的视频直播方案有hls、rtsp、MPEG-DASH和rtmp
 hls协议是以http协议为基础的，有一个视频文件播放列表文件m3u8后缀和若干ts文件，视频编码格式是h264，音频编码格式为MP3、AAC或者AC-3，延迟比较大10s以上
+video标签是不支持M3U8文件的识别，只有Safari浏览器可以
+<source src="http://10.10.5.119/live/livestream.m3u8" type='application/x-mpegURL'>
+对于直播流，m3u8文件会在播放过程中定期更新（浏览器自动完成），
 可以使用hls.js实现，https://github.com/video-dev/hls.js
 也可以借助videojs库及它的插件videojs-contrib-hls实现
-<source src="http://10.10.5.119/live/livestream.m3u8" type='application/x-mpegURL'>
-对于直播流，m3u8文件会在播放过程中定期更新（浏览器自动完成），参考：https://blog.csdn.net/qq_39969226/article/details/105634280
+参考：https://blog.csdn.net/qq_39969226/article/details/105634280
 
 rtsp，实时流传输协议，是TCP/IP协议体系中的一个应用层协议，浏览器不支持播放，需要安装插件