ios播放音频的坑

canplaythrough前需要执行load()，不然不会触发该回调

      this.audioUrl = this.url
      this.$refs.audioEl.addEventListener('ended', () => {
        this.isPlay = false
      })
      this.$nextTick(() => {
        this.$refs.audioEl.load()
        this.$refs.audioEl.addEventListener('canplaythrough', () => {
          this.canPlay = true
        })
      })

flex布局单行变多行时，两行间距

row-gap: 10px; column-gap: 10px;

粘贴板兼容苹果

苹果手机必须点击时立即执行复制到剪切板这个操作，若内容还需异步获取，这段代码会失效，剪切板里为空

    const id='123456'
    const inputEl = document.createElement('input')
            inputEl.setAttribute('value', id)
            document.body.appendChild(inputEl)
            inputEl.setAttribute('readonly', 'readonly')
            inputEl.select()
            inputEl.setSelectionRange(0, id.length) //兼容苹果
            try {
              document.execCommand('copy')
            } catch (err) {
              console.log(err)
            }
            document.body.removeChild(inputEl)

promise.all的坑

虽然promise.all可以汇集多个请求的请求结果，但是在new Promise时，里面包裹的ajax请求就会开始发送，并不是在 Promise.all这个promise数组时才会发送请求（即：请求是异步的，后端接收到的请求顺序和前端发送顺序不一致）

  //--for循环里包裹这个，每次循环生成不同的arg
  combineRequestList.push(
    new Promise((resolve) => {
      ajaxRequest(arg).then((val) => resolve(val))
    })
  )
  //---for循环完成后，这里等待处理所有请求返回的数据
  Promise.all(combineRequestList)
          .then((el) => {})

若想后端接收请求顺序和前端发送顺序一致

let argsList = []
//---for循环------
argsList.push(arg)
//----循环结束----
this.queueSend(argsList)
//-----
    queueSend(args) {
      // 等上一个返回了，再发下一个
      const argsList = [...args]
      let doneTime = 0
      const eachRequest = () => {
        if (argsList.length > 0) {
          const arg = argsList.shift()
          ajaxRequest(arg).then((el) => {
            if (el.code === 0) doneTime += 1
            eachRequest()
          })
        } else {
          if (doneTime == args.length) {
            this.$message({
              message: '成功！',
            })
          }
        }
        
        eachRequest()

富文本

www.wangeditor.com/

apifox请求的前置操作

点击根目录，添加前置操作脚本,它下面的接口都会自动继承该预处理（场景：请求头里鉴权要用到params和dada的数据）

npm安装-D对webpack打包的影响

打包成网页时-S和-D没区别

由于生产环境内嵌在钉钉里，要用vconsole方便排错，npm i vconsole -D 生产打包时发现能正常用vconsole，devDependencies 里的包一样会被打包不会被忽略

npm i xxx -D 会把包对应在package.json的devDependencies中
这个dependencies做前端的时候不会有问题，因为最终代码都打包到发布文件里面去了。写nodejs应用的时候很明显。nodejs没有打包这一说，需要的外部模块都是node_modules目录下的。

nodejs安装依赖有两种方法，一种是全部安装npm install,一种是安装生产环境的npm install --production

dependencies 中的两种模式都会安装
devDependencies 生产模式不会安装

所以生产环境用--production参数可以保证只下载运行应用必须的包。比如我们开发时用到eslint，那这种需要放到devDependencies 中去，因为这种有没有这个包都不影响服务端代码的执行，只是约束开发时的代码风格。

dependencies 和 devDependencies 区别重新认识 - 知乎 (zhihu.com)

vue-router骚操作

嵌套路由的一般使用

一般来说，嵌套的内层路由path不以/开头，这样就会顺位在父路由的后面加上自己的path

 {
  path: "/home",
  name: "home",
  title: "主页",
  component: Layout,
  children: [
    {
      //访问路径 /home/edit
      path: "edit", 
      name: "edit",
      title: "编辑",
      component: () => import("@/views/home/edit"),
    },
  ],
}

嵌套路由的骚操作

/detail是home的children，在Layout内的router-view上渲染，虽然是它的children，路径上不被污染

{
  path: "/home",
  name: "home",
  title: "主页",
  component: Layout,
  children: [
    {
      path: "/home/edit",
      name: "edit",
      title: "编辑",
      component: () => import("@/views/home/edit"),
    },
    {
      // 访问路径 /detail 它的组件挂载在layout内
      path: "/detail",
      name: "detail",
      title: "详情",
      component: () => import("@/views/community/detail"),
    },
  ],
}

应用场景

利用第二种方式的特性，当使用动态路由时，可以把后端返回的路由的二级路由一维化，并全都挂载到home组件的chidren里，既可以保证该路径对应的组件外面套着layout框架，同时也能保持自身路由的正确性

https才能录音

在https、localhost等安全环境下才能进行录音。
如果必须http访问，Chrome中可尝试打开chrome://flags/#unsafely-treat-insecure-origin-as-secure，启用Insecure origins treated as secure，把你的地址含端口配置进去。

debugger

打开控制台后，debugger;语句才会生效，把程序卡在这儿
对于一些无法f12开控制台的网站，可以先ctrl+f8 禁止打断点，然后再f12

zhuanlan.zhihu.com/p/610280852…

vue template里的东西编译成render函数

.v2.template-explorer

.vue3-template-explorer

代码辅助

codeium.com/

桌面应用媒体文件转换

ffmpeg

不同类型音频获取

silk
- 电脑端企业微信先登录，手机端企业微信发语音消息，电脑c盘文档/WXWork/时间倒序看最新的一个文件夹/Cache/Voice/YYYY-MM/xxx.silk
MP3/AAC/WAV
- 安卓手机录音可设置不同录制格式
WMA/FLAC/MP3/AAC/WAV
- windows的录音机

前端文件流转换

ArrayBuffer、Uint8Array、Blob、 File、DataURL blog.csdn.net/qq_38886284…

测试前端一些js/css属性的兼容性

caniuse.com/?search=get…

svn托管仓库

svnbucket.com/

画各种图

app.diagrams.net/?src=about

油猴和脚本

js/ts博客

www.coding-time.cn/js/preamble…

vue高度未知列表折叠展开

VUE transition实现展开/收起高度不确定的元素 - 简书 (jianshu.com)

--- utiles/collapseTransition.js------
const transitionStyle = '0.1s height ease-in-out'
const Transition = {
  beforeEnter(el) {
    el.style.transition = transitionStyle
    if (!el.dataset) el.dataset = {}

    el.style.height = 0
  },

  enter(el) {
    if (el.scrollHeight !== 0) {
      el.style.height = `${el.scrollHeight}px`
    } else {
      el.style.height = ''
    }
    el.style.overflow = 'hidden'
  },

  afterEnter(el) {
    el.style.transition = ''
    el.style.height = ''
  },

  beforeLeave(el) {
    if (!el.dataset) el.dataset = {}
    el.style.height = `${el.scrollHeight}px`
    el.style.overflow = 'hidden'
  },

  leave(el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = transitionStyle
      el.style.height = 0
    }
  },

  afterLeave(el) {
    el.style.transition = ''
    el.style.height = ''
  }
}

export default {
  name: 'CollapseTransition',
  functional: true,
  render(h, {
    children
  }) {
    const data = {
      on: Transition
    }
    return h('transition', data, children)
  }
}

使用

---- xx.vue ---
<template>
<collapse-transition>
  <div class="inner-skin"
           v-if="isShow">
//------内包裹第一个盒子是 v-show 或 v-if----------
</div>
</collapse-transition>
</template>

<script>
import CollapseTransition from '@/utils/collapseTransiton.js'
export default {
  components: {
    'collapse-transition': CollapseTransition,
  },

若使用了elementui，里面含有一个伸缩的组件

<el-collapse-transition>
....放中间的内容 v-show时 会伸缩
</el-collapse-transition>

查看电脑历史事件

搜：事件查看器/windows日志/系统

script标签不写http[s]

src如果是双斜线//的写法，是会自动匹配http或https，以此为最终路由去互联网上取
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

vue3中后台组件库

深度做管理系统首选ant-design-vue，其次Arco Design Vue//摘过来的，不一定靠谱

零碎知识15