五月份开发笔记五月份开发笔记腾讯即时通信、实时音视频对接记录，js-audio-recorder，全局样式变量设置，v

腾讯即时通信、实时音视频对接记录

背景： 使用的是vue2搭建的H5端页面，后续因为首屏加载的问题，又尝试了SSR(Nuxtjs)和纯Html+JQuery两种方案，以下为各注意点记录：

获取信息列表getMessageList方法默认返回最近15条信息，没有一次性全部返回的API
Nuxtjs对接实时音视频时，需要将依赖包放入vendor中，引用时写法也需要调整，否则页面加载时会报错找不带依赖

// nuxt.config.js
  build: {
    vendor: ['trtc-sdk-v5']
  }
  
// 组件中
let TRTC = null
if(process.browser) {
  TRTC = require('trtc-sdk-v5')
}
export default {}

实时音视频包会将JQuery的$覆盖掉，所以需要将JQuery对象符号重新定义

// 首先加载jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

// 然后在jQuery代码执行之后，将$符号重新定义
<script>
jQuery.noConflict();
var $$ = jQuery;

// 现在可以使用$$来代替$
$$(document).ready(function(){
    $$('selector').method();
});
</script>

// 加载其他资源
...

js-audio-recorder

录音结束后获取录音时长，最好用对象的duration属性，不要用onprogress里记录的duration；
录音开始后的系列操作一定要在start的resolve回调中进行，不然出现录制错误（我真傻，真的😮‍💨）
刚开始记得要获取一下录音授权，有提供getPermission方法处理

全局样式变量设置

处理系统换肤功能时，可增加全局样式变量，子页面设置样式时用var使用变量即可，项目需要使用css预编译额

// app.vue
<template>
    <div id="app" :style="{'--bg-color': '#f00'}">
      <router-view />
    </div>
</template>

// page.vue
<style lang="less" scoped>
.container {
 background-color: var(--bg-color);
}
</style>

vue本地开发时跨域请求Cookie携带问题

使用iframe嵌入页面，接口调用在不同域下会有跨域问题，且项目接口是自动将Cookie携带在请求头进行鉴权的，但是浏览器因为安全策略，是不允许手动设置Cooike的。
以上问题发布线上环境时放在同一个域名下即可，但是本地开发调试会有困难。
此时可以登录测试环境，复制到可使用的Cookie后，在vue.config.js的本地代理中添加onProxyReq配置（修改配置后要重新运行项目噢～）

// vue.config.js
module.exports = {
    
  devServer: {
      ...
      '^/api': {
        target: 'XXX',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api/': '/'
        },
        onProxyReq: function (proxyReq) {
          proxyReq.setHeader(
            'Cookie',
            'XXX'
          )
        }
      }
}

Antdv全局配置a-config-provider下只能有一个子元素

...还有想到再说