cozy666的博客

原创 如何利用Vue表单处理实现表单的自动保存与恢复

3.当用户成功提交表单数据后，我们需要清除localStorage中保存的数据，以便下次重新填写表单时能够从空白的状态开始。我们通过created生命周期钩子函数来判断localStorage中是否有之前保存的表单数据，如果有，则将其解析并赋值给formData，完成数据的恢复。1.在Vue组件中，我们可以使用computed属性来监听表单数据的变化，并将数据保存到localStorage中。使用computed属性来监听表单数据的变化，并将数据保存到localStorage中。

原创 css---before和after伪元素

1.伪元素:before和:after添加的内容默认是行内元素（加宽高无效，需要调整为行内块或者块级元素），两个伪元素的content属性，表示伪元素的内容，设置before和after时必须设置其content属性，否则伪元素不起作用。伪元素不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用如页面元素一样的CSS样式，表面上看上去貌似是页面的某些元素来展现，实际上CSS样式展现的行为，因此被称为伪元素。

原创 Vite为何比Webpack快

Vite在本地能更快的根本原因，是借用了浏览器原生ESM能力，从而跳过了生成bundle的时间，再加上能够不依赖第三方插件将编译结果缓存，而且esbuild自身的也有着更快的运行速度，从而实现了Vite快速的冷启动。

原创 css浮动

让块级标签完美的排列在一行。

原创 css特性（继承性、层叠性）

可以继承的常见属性（文字控制属性都可以继承）ps:可以通过调试器查看是否能够继承注意：a标签的color会继承失效；h系列标签的font-size会继承失效。

原创 Node.js初步学习

Node.js是一个跨平台Javascript运行环境，使开发者可以搭建服务器端的Javascript应用程序。编写后端程序，提供网页资源浏览功能等等；前端工程化：为后续学习vue和react等框架做铺垫；前端工程化是指开发项目直到上线，过程中集成的所有工具和技术（压缩工具、格式化工具、转换工具、打包工具、脚手架工具、自动化部署等），这些工程化都离不开Node.js，可以主动读取本地前端代码的内容，可以对前端代码进行相应的处理；

原创 uni-app跨端兼容

小程序端不支持*选择器，可以使用（view,text）例如骨架屏样式出现问题，需要将之前的样式拷贝到骨架屏中。提示：H5端是单页面应用，scoped隔离样式。页面视口差异(tabar页、普通页)app端默认是系统webview渲染。经测试app端组件样式也会默认隔离。H5端默认开始scoped。

原创 uni-app条件编译和网页打包

在项目打包时，存在打包微信小程序、h5网页端或者其他平台小程序的情况，但是有些api是某些小程序中特有的，例如wx.requestPayment()，微信支付、授权等功能。在打包网页端时会出现路径问题，需要在manifest.json中配置，改为相对路径。需要注意以wx开头的api，以及open-type，这是小程序中特有的。这时，若不做条件编译，打包成非微信小程序的项目则会报错。针对这一问题，需要使用#ifdef将特殊代码进行包裹。

原创 uni-app项目打包-微信小程序端发布上线

原创 uni-app设置分包和预下载

打开pages.json，里面多了一个subPackages。1.在src下新建一个文件夹，在该文件夹中新建分包页面。3.预下载，加入preloadRule。

原创 uni-app实现快捷登录

3.点击button获取encryptedData，iv。在botton中加入open-type="getPhoneNumber"并绑定getPhoneNumber事件 @getphonenumber="onGetPhoneNumber"1.封装api 这里必传参数有三个，其中code为微信登录code，作为登录凭证，需要调用wx.login()来获得。注意：要企业认证才能使用getphonenumber方法。2.在页面中使用wx.login()来获得code。在绑定事件中获取用户手机号码。

原创 uni-app如何生成骨架屏

2.将生成的wxml代码复制到vscode，在index的components中新建一个vue文件，只需保留请求接口的部分即可。3.在首页中去使用骨架屏组件，如何接口正在加载则显示骨架屏，如果加载结束则显示返回的结果。1.打开微信开发者工具，找到模拟器中的页面信息，选择生成骨架屏。为什么需要骨架屏：为了缓解用户打开程序时等待接口的焦虑情绪。将wxss代码复制到style中。

原创 uni-app实现下拉刷新

注意：如果不用await直接调接口，会导致数据加载顺序不确定，可能数据还没返回完就已经关闭动画。如果三个接口都加上await，则会等待第一个接口返回后再执行第二个接口，以此类推，延长了数据加载时间。最优方案：用Promise.all()方法同时加载三个接口，配合async await，这样可以保证三个接口都返回后再执行下一步操作。4.关闭动画，添加refresher-triggered属性，在数据请求前开启刷新动画，在数据请求完成后关闭动画。2.监听事件，添加refresherrefresh事件。

原创 uni-app实现分页--（2）分页加载，首页下拉触底加载更多

业务逻辑如下：api函数升级定义分页参数类型组件调用api传参。

原创 uni-app实现分页--（1）准备工作，首页下拉触底加载更多

分析：需要在滚动容器中添加滚动触底，在猜你喜欢中获取数据。难点：如何在父页面调用子组件内的方法。父组件中用ref，并定义组件实例类型，子组件中暴露方法。考虑到组件实例会在多处用到，直接早types的component.d.ts中定义。1.在父组件中添加scrolltolower事件，用于调用子组件方法获取数据。3.在子组件中利用defineExpose将方法暴露出去。2.给子组件添加ref属性，并给定义组件实例类型。最后在父组件触底时调用。

原创 如何在项目中使用uni-ui组件库

tsconfig.json中配置。1、安装uni-ui。

原创 uni-app项目创建方式

vue3+ts版：npx degit dcloudio/uni-preset-vue#vite-ts 项目名称。1.通过HBuilderX创建。

原创 uni-app小兔鲜小程序

1.技术架构。

原创 ngrok工具

在做微信公众号开发时，需要验证开发者服务器，在测试号管理页面上填写url开发者服务器地址。由于是本地内网，所以需要使用ngrok工具做到内网穿透，将本地端口号开启的服务映射外网跨域访问的一个网址使用方法：运行ngrok.exe文件，输入：ngrok http 端口号 ，回车后看到online状态表示映射成功，并将映射后的网址填入管理页面。注意ngrok每次运行的网址都不一样，所以尽量不去关闭。

原创 视频监控需求记录

于是我和后端想了一个办法，让后端通过转发视频流的方式来解决，他给我flv流，通过websocket进行数据传输，我通过后端转发的flv流，使用flv.js进行解析播放。听着需求好像很简单，但是~我们需要在一个界面上显示两个厂商的视频（海康、大华），海康这边使用的是萤石自带的平台进行播放，实现比较容易，而大华没有提供播放平台，需要我们自己去实现，原本我想用萤石的平台去播放大华的视频，但是萤石是私码流，对于大华的流解析不了，所以不能这样进行实现。记录一下最近要做的需求，我个人任务还是稍微比较复杂的。

原创 Cannot read properties of null (reading ‘addEventListener‘) 解决方法

中还没有渲染完成（JS 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用）还有人说将script引用的js放在body的最底下，这个对我没有作用，但你们可以尝试一下。1.在mounted中使用window.onload。2.使用$(document).ready()3.使用this.$nextTick。

原创 关于前端代码的一些优化

params 参数就是 应用于 form 没必要一个个的赋值过去 可以 可以用 ... 的方式。直接找到索引, 删除那一项 这样不会像 修改之前那样 每次都要遍历完数组 复杂度会大大降低。每次写代码的时候不应该只会使用。, 这个场景就 通过。

原创 微信小程序---封装uni.$showMsg()方法

当数请求失败之后，经常需要调用 uni.showToast(( /* 配置对象/ 方法来提示用户时，可以在全局封装一个 uni.showMsg()方法，来简化 uni.showToast() 方法的调用。

原创 微信小程序---如何创建分包

1.在项目根目录中，创建分包的根目录，名为subpkg，这个名字可以自己定义2.在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：3.在分包目录，点击右键新建页面，例如：

原创 vscode安装必备插件

1.chinese 转为中文2.Vue Language Features (Volar)3.Code Runner4.Eslint5.fitten code（代码自动补全、注释生成代码、自动添加注释等）

原创 在流媒体应用中推流，拉流，转发，转码都是何含义

在最近做的项目中，涉及到视频监控模板，其中经常会听到推流、拉流、转发、转码这些名词，这里总结一下这些名词的含义。

原创 Failed to load resource: net::ERR_CONNECTION_TIMED_cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js‘

先讲讲为什么要用cdn，在我们的vue项目中，我们去访问系统，浏览器会自动下载vue、vue-router、vuex和axios等一些文件。但是下载的话会比较耗时，因为笔者想打开网页时直接访问别人的资源，用cdn来做会提高访问速度。但是有时候会出现Failed to load resource: net::ERR_CONNECTION_TIMED_cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js'这个错误。后续思考如何解决，今天先记录到这里。

原创 微信小程序---分包

分包就是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。1.主包午发引用分包内的私有资源 2.分包之间不能互相引用私有资源 3.分包可以引用主包内的公共资源。可以优化小程序首次启动的下载时间，在多团队共同开发时可以更好的解耦协作。在app.json的subpackage节点中声明分包的结构。本质上也是分包，只是可以独立于主包和其他分包而单独运行。

原创 微信小程序---全局数据共享

注意：安装完后需要重新构建npm。

原创 微信小程序---API的promise化

2.构建miniprogram_npm，先把miniprogram_npm删除，再点击工具->构建npm。1.实现API promise化。

原创 前端首页渲染请求600多条js

Webpack 内置了 prefetch 预加载插件，会告诉浏览器在页面加载完成后，利用空闲时间加载用户未来可能用到的内容。只要关闭 prefetch 插件，就能实现只加载当前页面用到的脚本。利用webpack打包上线后，登录首页，居然加载了671条js、css、png等等，之前在测试环境并没有此问题。然后再看，请求减少了很多，只有47条了。

原创 利用vue指令解决权限控制问题

后端一般会在登录完成后将该用户的权限资源列表一次性返回给前端，因此，可以先把权限资源列表保存在vuex（pinia）中，因为这个信息我们后面会经常用到。再通过vue自定义指令来判断是否存在该权限即可。在我们的系统中，有的用户有创建权限，有的用户没有创建权限。然后去使用并暴露这个指令。vue指令的钩子函数。

原创 微信小程序---使用npm包安装Vant组件库

将 app.json 中的"style”:“v2” 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。通过npm npm i @vant/weapp@1.3.3 -S --production。注意：如果你的文件中不存在pakage.json，请初始化一下包管理器 npm init -y。通过yarn yarn add @vant/weapp --production。1.通过 npm 安装(建议指定版本为@1.3.3）3.修改app.json。

原创 微信小程序自定义组件---behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于vue中的mixins。

原创 微信小程序自定义组件---父子组件通信

有三种方式。

原创 微信小程序---自定义组件

组件实例刚被创建好的时候，created生命周期函数会被触发此时还不能调用setData，只应该用于给组件的this添加一些自定义的属性字段 个人觉得类似于vue中的beforeCreated组件完全初始化完毕，进入页面节点树后，attached生命周期函数会被触发此时this.data已经被初始化完毕，这个生命周期很有用，绝大多数初始化工作可以在这个时机进行（例如发送请求获取初始化数据） 个人觉得类似于vue中的created在组件离开页面节点树后， detached 生命周期函数会被触发。

原创 微信小程序---wxs脚本

此处例子是在wxs标签内提供module，名为m1，然后将toUpper方法exports出去，在外面就可以直接调用toUpper方法，通过m1.toUpper(username)调用使用外联的wxs脚本。

原创 微信小程序---生命周期

小程序从启动->运行->销毁的过程。

原创 微信小程序-页面导航---导航传参

3.在onLoad中接收导航参数。

原创 微信小程序---页面导航

微信小程序---页面导航（声明式导航、编程式导航）