yemuxia_sinian的博客

vite+ts+vue3+tsx+ant-design-vue搭建的项目框架，

最近做H5微信分享，用的微信jssdk来做，现记录下一些过程和遇到的问题。

最近在使用decodeURIComponent的时候，发现浏览器参数中含有特殊符号%，会导致decodeURIComponent等解码报错。今天就简单分享一下如何处理这个问题。浏览器中的不安全字符不安全符号 解释 空格 Url在传输的过程，或者用户在排版的过程，或者文本处理程序在处理Url的过程，都有可能引入无关紧要的空格，或者将那些有意义的空格给去掉 引号以及<> 引号和尖括号通常用于在普通文本中起到分隔Url的作用 # 通常用于表示书签或者锚点

最近公司项目有个需求，富文本编辑器上传一篇文章后，需要对文章内容里面的一级标题和对应的标题内容做提取处理，然后文章展示的时候就可以用来做锚链接导航处理。此功能主要用到了以下正则const reg = /<h1(([\s\S])*?)<\/h1>/g改正则用来提取h1标题及其标签里面的内容，改下标签就可以用来提取任意标签内容了。一、一级标签提取具体代码：const article = '<div data-v-65f82510=""><div d

无需引入第三方库，原文地址：sample-reels/index.vue at master · zhaowhY/sample-reels · GitHub基于上面源码做了修改，可直接复制到组件中使用。具体代码：<template> <div> <div class="wordCloud__tagBall" :style="{width:`${this.width}px`,height:`${this.height}px`}

1、全局引入，在main.js里面引入import Vue from "vue";import 'ant-design-vue/dist/antd.css';import Antd from "ant-design-vue";Vue.use(Antd)html使用：<template> <div class="page-wrap"> <a-anchor> <a-anchor-link href="#a" title="a

问题：nvm安装了两个node版本后，使用use切换到指定版本，确还是不能使用node和npm解决办法：找到nvm得安装位置，打开setting配置文件发现node的位置是错误的两个版本的node都是安装在nvm文件夹下的：所以修改配置文件的path路径然后保存就可以了，如下：重新查看node和npm...

具体代码：const zoomSize = 6; this.useageChart.getZr().on("click", (params) => { let xIndex = this.useageChart.convertFromPixel({ seriesIndex: 0 }, [ params.offsetX, params.offsetY ])[0]; // 阴影索引值 this.use

解决方法：子元素设置宽度即可{ flex: 1; width: 0;}// 或者{ flex: 1; min-width: 0}

新建代码库# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-name]# 下载一个项目和它的整个代码历史$ gitclone [url]配置Git的配置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）。# 显示当前的Git配置$ git config --list# 编辑Git配置文件$ git config .

做pdf文件下载的时候，后端返回了二进制数据流，前端在发起请求时需要设置responseType: arraybuffer 或者blob类型才可以，具体操作可以看我之前的文章（传送门）。一开对接的时候下载打开都是正常的，过后突然就不行了，能下载成功，页数也是正常的，但是打开页面却都是空白的。搜索百度了一番，都是说设置好response Type就可以了，偶然发现有人评论说不能用axios请求要用原生的Ajax请求才可以，试了一下果然成功了。具体代码：downloadFn() { l

在项目中遇到一个问题：在前端需要把后台返回的json字符串转换成一个js中的json对象，可是从后台返回的字符串中含有转义字符：\"，在网上查到方法如下，可以处理这种情况：var myjson= eval("("+data+")");...

如上图做搜索功能时，因为搜索框和搜索列表页是非父子组件，所以通信的时候就用到中央事件总线来做。一开始自己用的是用vuex + watch，监听搜索值来做，但是这样有个问题：改变左边的搜索类型，重新搜索就没办法触发watch进行搜索了，因为搜索值没变。用中央事件总线的过程中，遇到了以下一些问题：1、搜索事件多次触发了 2、绑定的事件出发了，但是却没办法修改data的值，也没办法更新视图。分析这些问题之前，先看下一些知识点一、什么是中央事件总线有时候两个非父子关系的组件，也需要通信。可以将一个...

前端下载文件有两种方法，第一种：后台直接返回下载流格式的文件地址，前端用a标签新开窗口或者window.open()下载即可；另外一种：后台返回二进制流文件内容，前端通过blob进行转化后再下载。具体代码：async downloadFn() { this.loading = true; let res = await defenseUserAgreementGet(this.userId); this.loading = false; cons..

其实主要问题在于target的设置，一开始看文档也是不清楚这个属性要怎么设置，有两种情况：1、如果滚动条是整个document自身的那么此时target不用设置，如下即可：<template> Scroll down to see the bottom-right button. <el-backtop></el-backtop></template>2、如果此时页面的滚动条设置在了某个dom节点上（某个dom节点设置了overflow

最近项目做了一个简单的H5在线点酒，用的vue-cli脚手架搭建，运行在微信环境，涉及到微信授权登录，jssdk的使用，微信支付等功能，现记录下一些流程，以便后续自己查阅。微信开发文档传送门一、微信H5网页授权登录授权登录流程微信开发文档已经写的很清楚了，如下：1 第一步：用户同意授权，获取code2 第二步：通过code换取网页授权access_token3 第三步：刷新access_token（如果需要）4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

之前使用饿了么select组件时，都是直接把v-model的值和options的选项值绑定起来，但是获取当前选项的一些数据时，都是需要当前选项的id来调用接口，获取对应数据。所以这样做还必须给select绑定change事件，选项改变，再通过v-model的值去选项数组中比对获取当前值的id，再去调用接口。如下：var vm = new Vue({ el: "#app", data: { options: [ { id: 0,

vue项目开发过程中页面太多，路由配置起来也是一件很麻烦的事，好在webpack提供了一个require.contextApi，通过执行require.context函数可以获取一个特定的上下文，实现自动化导入模块。一、语法require.context('./dir',true, /\.js$/)；第一个参数表示相对的文件目录，第二个参数表示是否包括子目录中的文件（true，false），第三个参数表示引入的文件匹配的正则表达式。二、自动配置路由修改router文件夹下的index.js.

一开始我是直接在pro.env.js里面配置了两个地址，每次打包时注释掉不要的就好了，但打包频繁了，越发觉得很不方便，然后就有了后面的方法。一、模仿npm run build，新建一个新的命令：npm run sit通过新建命令：npm run sit 来打包测试环境包，npm run build专门来打包正式包就可以了1、复制一份config/文件夹下的pro.env.js，改名si...