关于前端:vue项目小技巧记录更新中

最近的挪动端我的项目用到的一些不罕用的小技巧：

间接上干货

• vue-cli3 中 webpackServer 代理

首先，.env.development 文件设置

`VUE_APP_baseApi = /api`

其次，vue.config.js 文件设置

devServer: {
  proxy: {
      '/api': {
          target: 'http://xxx/api',
          changeOrigin: true,
          ws: true,
          pathRewrite: {'^/api': ''}
      }
  }
}

• 日期格式化（yyyy-mm-dd hh:mm）

dateFormatter(val) {const YYYY = val.getFullYear()
    const MM = val.getMonth() + 1 < 10 ? "0" + (val.getMonth() + 1) : val.getMonth() + 1;
    const DD = val.getDate() < 10 ? "0" + val.getDate() : val.getDate();

    const hh = val.getHours() < 10 ? "0" + val.getHours() : val.getHours();
    const mm = val.getMinutes() < 10 ? "0" + val.getMinutes() : val.getMinutes();
    return `${YYYY}-${MM}-${DD} ${hh}:${mm}:`
  },

• 日期相减计算（y 年 m 月 d 日 h 时 m 分）

getRemainderTime(val) {
    let runTime = null
    runTime = parseInt(val) / 1000;
    let year = Math.floor(runTime / 86400 / 365);
    runTime = runTime % (86400 * 365);
    let month = Math.floor(runTime / 86400 / 30);
    runTime = runTime % (86400 * 30);
    let day = Math.floor(runTime / 86400);
    runTime = runTime % 86400;
    let hour = Math.floor(runTime / 3600);
    runTime = runTime % 3600;
    let minute = Math.floor(runTime / 60);
    runTime = runTime % 60;
    let second = runTime;
    // console.log(year,month,day,hour,minute,second);
    this.countHour = parseInt(val) / 1000 / 3600
    return `${year?year+'年':''}${month?month+' 月 ':''}${day?day+'天':''}${hour?hour+' 小时 ':''}${minute?minute+'分钟':''}`
  },

• 音频流转 mp3 格局

convertToMp3(wavDataView) {
    // 获取 wav 头信息
    const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实能够不必去读 wav 头信息，毕竟有对应的 config 配置
    const {
      channels,
      sampleRate
    } = wav;
    const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
    // 获取左右通道数据
    const result = recorder.getChannelData()
    const buffer = [];

    const leftData = result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);
    const rightData = result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);
    const remaining = leftData.length + (rightData ? rightData.length : 0);

    const maxSamples = 1152;
    for (let i = 0; i < remaining; i += maxSamples) {const left = leftData.subarray(i, i + maxSamples);
      let right = null;
      let mp3buf = null;

      if (channels === 2) {right = rightData.subarray(i, i + maxSamples);
        mp3buf = mp3enc.encodeBuffer(left, right);
      } else {mp3buf = mp3enc.encodeBuffer(left);
      }

      if (mp3buf.length > 0) {buffer.push(mp3buf);
      }
    }

    const enc = mp3enc.flush();

    if (enc.length > 0) {buffer.push(enc);
    }

    let blob = new Blob(buffer, {type: 'audio/mp3'})
    return blob
  },

• vue bus

main.js

const bus = new Vue()
Vue.prototype.bus = bus

a.vue

this.bus.$emit("onlineType", ...arg)

b.vue

this.bus.$on('useCardTime', (res) => {console.log(res)
})