vue 组件中动态引入外部js库

李维亮

发布于 2022-01-15 11:46:32

6.5K00

代码可运行

运行总次数：0

代码可运行

最近开发项目在和华为Volte做对接，结果华为volte第一版还是原生加jquery来实现的，由于里面有不少需要引入外部js文件的，就给了一天的时间做对接，没办法只能剑走偏锋了首先定义一个 utils/loadScript.js 封装一个动态加载js文件的方法

export function loadScript (url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')

    script.onload = () => resolve()

    script.onerror = () => reject(new Error(`Load script from ${url} failed`))

    script.src = url
    const head =
        document.head || document.getElementsByTagName('head')[0]
      ;(document.body || head).appendChild(script)
  })
}

然后定义一个 callVoLte.js文件供vue文件引入调用的

/**
 * Created by liweiliang 406320591@QQ.com on 2022-01-12 10:59.
 */


import { loadScript } from '@/utils/loadScript'

const RESOURCE_LIST = [
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/tools/jquery/jquery-3.1.1.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/tools/jquery/jquery-query.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/tools/jquery/jquery.cookie.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/tools/jquery/jquery.json-2.3.min.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/tools/jquery/jquery.utils.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/tools/jquery/jquery.md5.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/tools/pop/jquery-translucent.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/ams/reconnecting-websocket.min.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/ams/websocket.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/ams/ams-utils.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/ams/xnams-websocket.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/rtcjs/rest-api.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/rtcjs/socket.io.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/rtcjs/adapter-7.0.0.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/rtcjs/rtc.min.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/sdk_lib/tools/common.js",
  "https://huawei-volte-v2.oss-cn-beijing.aliyuncs.com/static/demo.js"
]

export function loadVoLteResourceList () {
  return RESOURCE_LIST.reduce((res, el) => res.then(() => loadScript(el)), Promise.resolve()).then(() => {
    console.log('success')
  }).catch((error) => {
    console.error('外呼VoLTE sdk 前置 js 资源加载失败:', error.name, error.message)
    return Promise.reject(error)
  })
}

最后在.vue文件中引用定义好的callVoLte.js中的方法及在生命周期函数中调用下就好了

import { loadVoLteResourceList } from './callVoLte' //引用

export default {
  name: 'index',
  created() {
    loadVoLteResourceList() //调用运行
  },
  data(){
    return {
    }
  },
  methods: {
    screen_capture() {
      let user_id = $('#showPhone').text()
      let img_str = screenCapture(user_id)
      if (img_str == '') {
        console.log('截屏失败')
        return
      }
      console.log('xxxxxxxx 截屏成功，图片base64字符串：', img_str)
      this.$bus.$emit('upload-photos', img_str)
    },
    closeVoLte(){
      this.$store.commit('setVoLteState',false)
    }
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-09-24，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript