<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[cczz66的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/cczz66</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; cczz66]]></copyright><item><title><![CDATA[vue项目实现微信扫码登录流程梳理]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/125311010</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/125311010</guid><author>cczz66</author><pubDate>Mon, 27 Jun 2022 11:45:32 +0800</pubDate><description><![CDATA[微信官方文档：准备工作 | 微信开放文档由于这个项目对接微信开放平台都是在服务端进行的，所以前端只需要把需要的参数传到后端即可，后端通过一系列操作获取到微信开放平台的access_token，获取到用户信息后，返回项目的token到前端，前端进行登录操作。部分代码：





 实例：wxRedirect代码：


实例：...]]></description><category></category></item><item><title><![CDATA[vue项目封装评论组件]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/125280390</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/125280390</guid><author>cczz66</author><pubDate>Wed, 15 Jun 2022 15:53:00 +0800</pubDate><description><![CDATA[效果图： 评论组件：]]></description><category></category></item><item><title><![CDATA[vue项目 signature_pad实现签名手写板功能 ，base64转Blob]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/123270526</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/123270526</guid><author>cczz66</author><pubDate>Fri, 04 Mar 2022 10:29:02 +0800</pubDate><description><![CDATA[安装 signature_pad 插件


npm install --save signature_pad


根据api文档封装一个Sign组件


&lt;template&gt;
  &lt;div v-safeHeaderTop class="page"&gt;
    &lt;Header :isBack="false" title="手写签名"&gt; &lt;/Header&gt;
    &lt;canvas ref="signaturePadCanvas" class="canvas".]]></description><category></category></item><item><title><![CDATA[vue动态设置::before伪元素样式背景颜色]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/122987795</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/122987795</guid><author>cczz66</author><pubDate>Thu, 17 Feb 2022 17:23:40 +0800</pubDate><description><![CDATA[通过动态绑定style，声明css变量"--bgColor"，把变量”color”赋给“--bgColor”


  &lt;div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"&gt;&lt;/div&gt;


在css中使用 var函数 读取“--bgColor”变量


.chart-circle {
  width: 80px;
  height: 80px;
  position: relative]]></description><category></category></item><item><title><![CDATA[在if判断中使用es6的 import 引入文件无效的解决方案]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/122536555</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/122536555</guid><author>cczz66</author><pubDate>Mon, 17 Jan 2022 15:32:58 +0800</pubDate><description><![CDATA[同一个页面需要通过判断来引入不同的文件时，发现 import 写在 if 中这种写法会导致加载不到文件，产生报错；


const system = localStorage.getItem("system");
if (system === "cmd") {
  import { WorkOrdersModule } from "@/store/modules/cmdWorkOrders";
} else {
  import { WorkOrdersModule } from "@/store/modu]]></description><category></category></item><item><title><![CDATA[vue项目中引入百度地图api，并根据经纬度坐标添加覆盖物]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/122289080</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/122289080</guid><author>cczz66</author><pubDate>Thu, 13 Jan 2022 17:04:04 +0800</pubDate><description><![CDATA[先上效果图：



第一步：在 public的index.html中引入百度地图api，ak需要在百度开放平台申请



第二步：定义一个构造函数用于批量创建地图遮盖物


// ----------------------------  1.定义自定义覆盖物的构造函数
function SquareOverlay(this: any, center: any, data: any) {
  this._center = center;
  this._data = data;
}
SquareOverl.]]></description><category></category></item><item><title><![CDATA[videojs播放m3u8格式的视频，处理 HLS 推流延时问题]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121927929</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121927929</guid><author>cczz66</author><pubDate>Thu, 23 Dec 2021 19:08:56 +0800</pubDate><description><![CDATA[HLS 直播协议的原理理解：

把整个视频流分成一个个小的基于HTTP的视频ts文件，每个视频文件地址会在m3u8格式的链接里对应生成一个索引，在开始一个流媒体会话时，客户端通过m3u8文件的索引去寻找可用的媒体流，实现直播效果；

分析延时原因：

服务器端的编码器和流分割器生成TS视频文件需要时间，推流时也会受到带宽的影响，所以就产生了延时，

分析视频组件工作流程：

请求接口获取 hlsUrl ，此时服务器开始生成TS视频文件并推流；
	挂载视频组件，
	播放视频，...]]></description><category></category></item><item><title><![CDATA[echarts无数据时显示暂无数据进行占位]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/122069466</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/122069466</guid><author>cczz66</author><pubDate>Tue, 21 Dec 2021 18:03:57 +0800</pubDate><description><![CDATA[效果：



思路：

提前在 data 中配置一个暂无数据的 option，然后在初始化 echarts 的时候判断接口返回数据是否未空，如果为空就 setOption 暂无数据的 option 渲染 dom，否则正常 setOption 接口数据渲染 dom


 //data
option: {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textS..]]></description><category></category></item><item><title><![CDATA[js数组常用方法总结]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121980882</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121980882</guid><author>cczz66</author><pubDate>Thu, 16 Dec 2021 18:27:42 +0800</pubDate><description><![CDATA[目录

数组扁平

数组去重

数组排序

数组转字符串

数组分割合并

数组元素查找

数组增删

数组迭代



数组扁平


// flat(Infinity): 不论数组有多少层都拍成一维数组且不会改变原数组 es6
const arr = [1, [2, 3, [4, 5], 6, [7, [8, [9, [10]]]]]]; // 多维数组
const arr2 = [[1, 2, 3], [4, 5, 6]]; // 二维数组
arr.flat(Infinity); // 结果 [1, ..]]></description><category></category></item><item><title><![CDATA[npm install 报错问题总结 环境/版本匹配]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121883457</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121883457</guid><author>cczz66</author><pubDate>Tue, 14 Dec 2021 16:41:17 +0800</pubDate><description><![CDATA[npm install报错信息中发现有如下两行代码说明电脑没有python环境


gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2

先去官网下载 python2.7，然后配置好系统环境变量



再执行以下命令设置config


npm install -g node-gyp

npm confi...]]></description><category></category></item><item><title><![CDATA[e-charts水球图，Liquid Fill Chart]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121862752</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121862752</guid><author>cczz66</author><pubDate>Fri, 10 Dec 2021 18:57:35 +0800</pubDate><description><![CDATA[echarts-liquidfill 是 Echarts 的一个插件，所以需要额外的npm引入


npm install echarts-liquidfill

页面中导入 ：


import "echarts-liquidfill";

全部代码：


&lt;template&gt;
  &lt;div v-allSafeArea class="page"&gt;
    &lt;Header :isBack="false" /&gt;
    &lt;div ref="container" cl.]]></description><category></category></item><item><title><![CDATA[van-popup弹出层在ios被遮挡问题]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121704845</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121704845</guid><author>cczz66</author><pubDate>Fri, 03 Dec 2021 19:35:08 +0800</pubDate><description><![CDATA[适配 ios 遇坑，van-popup 弹出层中组件内容被覆盖，而且键盘弹起时 header 被顶出屏幕，通过调整样式层级可以解决部分覆盖问题，但是 header 被顶出屏幕一直没解决；







后来仔细翻看文档，发现官方预留了 get-container 属性，可以把弹出层挂载到指定元素上，设置get-container="body"，把组件挂载到最外层boby上问题解决。








...]]></description><category></category></item><item><title><![CDATA[ios键盘遮挡输入框问题]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121697560</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121697560</guid><author>cczz66</author><pubDate>Fri, 03 Dec 2021 14:18:49 +0800</pubDate><description><![CDATA[/**
     * @description: 输入框焦点
     * @param {*}
     * @return {*}
     */
    focusField() {
      const activeElement = document.activeElement;
      let offsetTop = activeElement.offsetTop;
      let offsetParent = activeElement.offsetParent;
      if.]]></description><category></category></item><item><title><![CDATA[e-charts柱状图，区间段不同颜色渲染显示]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121672614</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121672614</guid><author>cczz66</author><pubDate>Thu, 02 Dec 2021 21:09:18 +0800</pubDate><description><![CDATA[给data里的value一个索引，去对应Y轴，categories里的数据

效果图如下：



以下全部代码：


&lt;template&gt;
  &lt;div class="custom"&gt;
    &lt;div class="status-view"&gt;
      &lt;div class="item"&gt;
        &lt;SvgIcon icon="icon_1"&gt;&lt;/SvgIcon&gt;
        &lt;div class="name...]]></description><category></category></item><item><title><![CDATA[vue+ts实现手机通讯录，左右联动，吸顶效果]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121553667</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121553667</guid><author>cczz66</author><pubDate>Fri, 26 Nov 2021 11:36:45 +0800</pubDate><description><![CDATA[效果图如下：



以下是全部代码：


&lt;template&gt;
  &lt;div v-allSafeArea class="page"&gt;
    &lt;!-- container为滚动区域，content为滚动内容 --&gt;
    &lt;div class="wrap-view"&gt;
      &lt;div ref="container" class="container"&gt;
        &lt;div ref="content"&gt;
         .]]></description><category></category></item><item><title><![CDATA[input formData文件上传，处理同一文件不能二次上传问题]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121523628</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121523628</guid><author>cczz66</author><pubDate>Thu, 25 Nov 2021 20:25:55 +0800</pubDate><description><![CDATA[&lt;input type="file" @change="onFileChange" /&gt;

input change事件的机制只有 value 发生改变的时候触发，

因为第二次上传相同文件 value不变所有不会触发 change 事件，

这时就要想办法在第一次上传时把value 值赋空，

应该在拿到上传所需数据后把 input 的 value 值赋空，这样第二次上传的时候 change事件就会触发；


  /**
   * @description: 新增
   */
  as...]]></description><category></category></item><item><title><![CDATA[echarts雷达图，标签name触发鼠标事件，实现自定义弹窗显示数据]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121473881</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121473881</guid><author>cczz66</author><pubDate>Mon, 22 Nov 2021 16:29:35 +0800</pubDate><description><![CDATA[早上收到产品需求，说要把弹框显示改到鼠标放在标签文字上触发，翻了一遍 e-charts 的文档看到有个 triggerEvent 属性可以控制标签鼠标事件的响应，我们可以配置这个属性让标签触发鼠标事件，然后通过 e-charts 的 event 事件来控制弹窗的显隐。



效果图如下：





以下是全部代码：


&lt;template&gt;
  &lt;div class="radar"&gt;
    &lt;div class="chart-view" ref="dynamicRadar".]]></description><category></category></item><item><title><![CDATA[e-charts雷达图，tooltip显示单轴下的所有数据]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121273806</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121273806</guid><author>cczz66</author><pubDate>Thu, 11 Nov 2021 19:06:36 +0800</pubDate><description><![CDATA[效果图如下：



以下是全部代码：


&lt;template&gt;
  &lt;div class="radar"&gt;
    &lt;div class="chart-view" ref="dynamicRadar"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import * as echarts from "echarts";
import { getDeviceTypeList } from "@...]]></description><category></category></item><item><title><![CDATA[e-charts经纬度渲染map图，tooltip中异步请求数据进行渲染]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121271626</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121271626</guid><author>cczz66</author><pubDate>Thu, 11 Nov 2021 17:08:22 +0800</pubDate><description><![CDATA[效果图：




全部代码 ：
	
	

&lt;template&gt;
  &lt;div class="maps-container"&gt;
    &lt;div class="chart-view" ref="mainMap"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import "echarts/map/js/province/hunan.js";
import * as echarts from ...]]></description><category></category></item><item><title><![CDATA[前端proxy代理的方式解决跨域]]></title><link>https://blog.youkuaiyun.com/cczz66/article/details/121213956</link><guid>https://blog.youkuaiyun.com/cczz66/article/details/121213956</guid><author>cczz66</author><pubDate>Wed, 10 Nov 2021 16:45:55 +0800</pubDate><description><![CDATA[主要思路：配置代理后发送的请求都是给本地服务器发送的，不会出现跨域的问题，但是我们最终目的是给后端服务器发请求，所以我们要通过代理把发送给本地服务器的请求映射到后端地址上

1：把 baseURL 配置的后端接口改为 "/api"

2：配置代理proxy，此时 proxy 会监听拦截所有请求接口中有 "/api" 的接口 =&gt; 重写接口路径把接口中的 "/api" 写为 " " =&gt; 发送给本地服务器的请求映射到 target 中设置的后端接口地址上，最后http://local...]]></description><category></category></item></channel></rss>