1.描述

这两天在做人脸认证的功能，其中需要为 H5 端进行适配，然后 阿里云 文档提供了一个 sdk，需要使用 <script> 引入。

文章目录
  • 在加载该 js 后，会在 window 对象上挂载 getMetaInfo() 方法。
<script type="text/javascript" src="https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js" ></script>

于是我就在 index.html 里，引入了这一段标签，结果是不行的，根本就没有加载这个 index.html(通过网络查看是否加载jsvm_all.js)。

2.解决方法_自定义模板

manifest.json -> web配置，在模板路径中填写 index.html，然后打开 index.html，将里面的代码替换成如下。

  • 如果使用的是源码视图，请在 manifest.json -> h5 -> template 中配置。
  • 配置完成后需要重启服务。
  • 请在以下代码中，引入三方 sdk 的 script 标签。
  • 在修改 index.html 后，经过测试并且影响 APP 端布局等内容，其他端请自行测试
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

3.解决方法_使用dom创建标签

在 H5 端，还可以通过使用 dom 创建 <script> 的方式去动态引入资源。

  • 需要注意的是：如果可以多次进入页面，需要在创建前加一个限制条件，不然每次进入页面都会创建该标签。
// 这里为了减少缩进单独写成了一个函数, 在项目中的位置在methods对象中.
function faceH5() {
    // 如果还没有引入 sdk, 那么动态创建标签去引入, 当引入成功后重新调用该函数, 执行业务逻辑
    if (!this.$store.state.system.isLoadFaceSDK) {
        uni.showLoading({ title: "资源加载中...", mask: true });

        // 动态创建<script>标签, 然后引入sdk资源
        const script = document.createElement("script");
        script.src = "https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js";
        document.head.appendChild(script);

        // 当script标签加载完成时, 更改vuex中的状态
        script.onload = () => {
            this.$store.commit("system/SET_key", { key: "isLoadFaceSDK", value: true });
            uni.hideLoading();

            this.faceH5();
        };

        return;
    }

    // 执行业务逻辑, 这里就可以正常访问了
    var metaInfo = window.getMetaInfo();
}
编程踩坑