蓁祎家进步中

# 其他经历累积

返回：大笔记

# react项目使用第三方js文件

返回顶部

# antd pro项目

由于要使用未编译的第三方js文件，需将文件放到public文件夹下面
并在document.ejs文件中引入

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>
    <title></title>
    <link rel="icon" href="<%= context.publicPath %>logo1.png" type="image/x-icon" id="icon" />
    <script src="<%= context.publicPath %>shiLian/slplayer.wrap.js" type="text/javascript"></script>
    <script src="<%= context.publicPath %>shiLian/jquery-2.0.2.min.js" type="text/javascript"></script>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意src的路径配置

组件中此时可引用第三方js中的方法

useEffect(() => {
    // console.info(channelId, '-----------------')
    let tmpPlayer = null
    let tmpTalker = null
    if (outNo) {
      const playerOptions = {
        canvas: document.getElementById('canvas'),
        onStart: () => console.info('开始播放>>>>>'),
        onEnd: () => {
          console.info('结束播放>>>>>');
        },
        onError: (code, err) => {
          console.info('error: ', code, err);
          if (err) {
            const errCode = err.split(':')[0];
            if (errCode === -7) {
              message.warn('该通道已被占用')
            } else if (errCode === -9) {
              message.warn('大路数设备超过限制')
            }
          }
        },
        onVideoStart: () => console.info('视频播放开始>>>>>'),
        // 设置是否支持AI,为了高效，默认是不支持ai显示的
        enableAI: false,
        onAIInfo: param => {
          const tmpObj = JSON.parse(param);
        },
      };
      SLPlayer(playerOptions).then(obj => {
        tmpPlayer = obj
        setVideoPlayer(obj);
        console.info('播放器实例成功加载');
      })

      const talkerOptions = {
        onStart: () => console.info('开始对讲>>>>>'),
        onEnd: () => console.info('结束对讲>>>>>'),
        onError: (code, err) => {
        },
      }
      SLPlayer(talkerOptions).then(obj => {
        console.info('对讲实例成功加载，version：', obj.version)
        tmpTalker = obj
        setVideoTalker(obj)
      })
      login();
    }

    return () => {
      setLoadingVideo(true)
      if (tmpPlayer) {
        console.info('组件卸载，停止播放，并卸载播放器<<<<<')
        tmpPlayer.stop();
        setVideoPlayer(null)
      }
      if (tmpTalker) {
        console.info('组件卸载，停止对讲，并卸载对讲器<<<<<')
        tmpTalker.stop();
        setVideoTalker(null);
      }
    }
  }, [outNo])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# require动态路径问题

  • 可以
const selectedImg = require(`../../../assets/companyDetail/${this.findImgNameByButton(buttonType)}_b.png`)
1
  • 不可以
const selectedImg = require(`${basePath}${this.findImgNameByButton(buttonType)}_b.png`)
1