企业官网建设流程全解析

这是我的第一篇文章，写的不好请多多见谅。

海康无插件版demo下载地址海康开放平台

Vue3通常的引入做法，应该是将demo中的webs下的jquery-1.7.1.min.js、require-2.3.3.min.js、sea-3.0.1.min.js还有codebase下的webVideoCtrl.js，codebase/encryption下的AES.js、encryption.js、cryptico.min.js、encryption.js、crypto-3.1.2.min.js放到public包下，然后在index.html中引入，代码示例如下

<!-- index.html --> <script src="/jquery-1.7.1.min.js"></script> <script src="/codebase/webVideoCtrl.js"></script> <script src="/require-2.3.3.min.js"></script> <script src="/sea-3.0.1.min.js"></script> <script src="/codebase/encryption/AES.js"></script> <script src="/codebase/encryption/encryption.js"></script> <script src="/codebase/encryption/cryptico.min.js"></script> <script src="/codebase/encryption/encryption.js"></script> <script src="/codebase/encryption/crypto-3.1.2.min.js"></script>

这种方式是全局引入，一次引入，全局调用，在对应的页面新建WebVideoCtrl ，然后调用文档中的官方方法即可。

本文通过动态引入，可以减少全局引入带来的资源浪费，首屏加载慢的问题，适用手机H5环境

代码如下

const HIK_SDK_PROMISE_KEY = "__hikSdkLoadPromise"; // 判断是否是非网页 H5环境 const isH5Runtime = () => typeof window !== "undefined" && typeof document !== "undefined"; const trimText = (val) => String(val ?? "").trim(); const normalizeBase = (basePath) => trimText(basePath).replace(/\/+$/, ""); const loadScript = (src) => { return new Promise((resolve, reject) => { if (!isH5Runtime()) { reject(new Error("Not H5 runtime")); return; } const existing = document.querySelector(`script[data-hik-src="${src}"]`); if (existing) { if (existing.dataset.loaded === "1") { resolve(); return; } existing.addEventListener("load", () => resolve(), { once: true }); existing.addEventListener("error", () => reject(new Error(`Load script failed: ${src}`)), { once: true, }); return; } const script = document.createElement("script"); script.src = src; script.async = true; script.dataset.hikSrc = src; script.onload = () => { script.dataset.loaded = "1"; resolve(); }; script.onerror = () => reject(new Error(`Load script failed: ${src}`)); document.head.appendChild(script); }); }; export const ensureHikSdkLoaded = async (basePath = "/mobile_camera_app/static/hikvision") => { if (!isH5Runtime()) return false; if (window.WebVideoCtrl && (window.$ || window.jQuery)) { return true; } // 多个页面同时进入 只挂载一次 if (window[HIK_SDK_PROMISE_KEY]) { await window[HIK_SDK_PROMISE_KEY]; return !!window.WebVideoCtrl; } const base = normalizeBase(basePath); const scripts = [ `${base}/jquery-1.7.1.min.js`, `${base}/codebase/encryption/AES.js`, `${base}/codebase/encryption/cryptico.min.js`, `${base}/codebase/encryption/crypto-3.1.2.min.js`, `${base}/codebase/webVideoCtrl.js`, ]; window[HIK_SDK_PROMISE_KEY] = (async () => { for (const script of scripts) { await loadScript(script); } })(); await window[HIK_SDK_PROMISE_KEY]; return !!window.WebVideoCtrl; };

在需要的页面中，import导入后，使用异步加载判断ensureHikSdkLoaded是否加载成功，示例如下

import { ensureHikSdkLoaded } from "@/mobile_camera_app/utils/hikSdkLoader"; const loaded = await ensureHikSdkLoaded(props.sdkBase); if (!loaded) throw new Error("海康SDK加载失败"); // 加载成功后可以创建海康无插件版的对象，然后进行官方方法的调用 const WebVideoCtrl = window.WebVideoCtrl; // 以下是操作代码 ....