前端sdk引用问题

本部分内容主要包括引入前端 sdk 的 js 文件时常见的问题。结合客户的具体使用场景，前端 sdk 的使用可分为以下两个部分：1.非组件内使用；2.组件内使用；

以下是具体说明：

# 一、非组件内使用

如无特殊需求，建议在 index.html 中按如下顺序引入 sdk 文件，请确保 ZwInit 方法传入的 dom 元素是正确的（id 名或类名不作限制），此元素将作为 sdk 的容器。

<body>
  <script type="text/javascript" src="/assets/ZwCloud2DSDK/ZwCloud2D.js"></script>
  <script type="text/javascript" src="/assets/ZwCloud2DSDK/ZwCloud2DPrivateAPI.js"></script>

  <div id="container"></div>

  <script>
        //设置后端服务地址
        ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('http://192.168.56.176:8888');

        //使用Cloud2D公网服务时,需要设置请求token
        //ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('https://test2d.zwsoft.cn');
        //ZwCloud2D.ZwDataProcessor.ZwSetToken('');

        //设置加载图纸的docId
        ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg('1606196943661817856');

        let container = document.getElementById('container');

        //初始化前端组件
        ZwCloud2D.ZwEditor.ZwInit(container);

        //加载图纸
        ZwCloud2D.ZwDataProcessor.ZwLoad();
   </script>
</body>

常见问题：

1.如遇编译报错类似 Module is not defined，Module、ZwCloud2D 均为挂载到 window 上的全局对象，在对应的对象前添加 window 即可解决，如 window.Module、window.Zwcloud2D 等；

2.如遇报错 unexpected token '<'，请检查 js 文件引用路径是否正确。如引用路径错误，对于请求会返回 index.html 中的内容，可据此判断；

# 二、组件内使用

通常情况下，我们推荐在 index.html 中引用 js 文件，在组件中执行初始化方法，如下所示，如需在 js 代码中动态引入 sdk，请直接查看本节第 4 部分内容

<body id="wholeFrame">
  <div id="app"></div>
  <script type="text/javascript" src="/assets/ZwCloud2DSDK/ZwCloud2D.js"></script>
  <script type="text/javascript" src="/assets/ZwCloud2DSDK/ZwCloud2DPrivateAPI.js"></script>
</body>

根据前端主流框架的划分，以下主要包括四部分内容：1.基于 vue 框架的使用说明；2.基于 angular 框架的使用说明；3.基于 react 框架的使用说明；4.补充说明。

# 1.基于 vue 框架的使用说明

vue 框架需要在 mouted 生命周期执行初始化方法，请确保 ZwInit 方法传入的 dom 元素是正确的（id 名或类名不作限制），此元素将作为 sdk 的容器。

<template>
    <div id="container"></div>
</template>

<script>

export default {
    name: "cloud2d",

    data() {
        return {};
    },
    props: [],

    components: {

    },

    mounted() {
        //设置后端服务地址
        ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('http://192.168.56.176:8888');

        //使用Cloud2D公网服务时,需要设置请求token
        //ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('https://test2d.zwsoft.cn');
        //ZwCloud2D.ZwDataProcessor.ZwSetToken('');

        //设置加载图纸的docId
        ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg('1606196943661817856');

        let container = document.getElementById('container');

        //初始化前端组件
        ZwCloud2D.ZwEditor.ZwInit(container);

        //加载图纸
        ZwCloud2D.ZwDataProcessor.ZwLoad();
    },

    methods: {

    }
}
</script>
<style lang="scss" scoped>

</style>
<style>
#container {
    width: 100vw;
    height: 100vh;
}
</style>

# 2.基于 angular 框架的使用说明

angular 框架需要在 ngOnInit 生命周期执行初始化方法，请确保 ZwInit 方法传入的 dom 元素是正确的（id 名或类名不作限制），此元素将作为 sdk 的容器。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dwg-editor',
  templateUrl: './dwg-editor.component.html',
  styleUrls: ['./dwg-editor.component.scss']
})
export class DwgEditorComponent implements OnInit {
  constructor() {
  }
  ngOnInit(): void {
        //设置后端服务地址
        ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('http://192.168.56.176:8888');

        //使用Cloud2D公网服务时,需要设置请求token
        //ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('https://test2d.zwsoft.cn');
        //ZwCloud2D.ZwDataProcessor.ZwSetToken('');

        //设置加载图纸的docId
        ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg('1606196943661817856');

        let container = document.getElementById('container');

        //初始化前端组件
        ZwCloud2D.ZwEditor.ZwInit(container);

        //加载图纸
        ZwCloud2D.ZwDataProcessor.ZwLoad();
  }
}

# 3.基于 react 框架的使用说明

react 框架需要在 componentDidMount 生命周期执行初始化方法，请确保 ZwInit 方法传入的 dom 元素是正确的（id 名或类名不作限制），此元素将作为 sdk 的容器。


import React from "react";
import PropTypes from "prop-types";
import "./Display.css";
export default class Display extends React.Component {
  static propTypes = {
    value: PropTypes.string,
  };

  render() {
    return (
      <div id="test">
      </div>
    );
  }

  componentDidMount() {
        //设置后端服务地址
        ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('http://192.168.56.176:8888');

        //使用Cloud2D公网服务时,需要设置请求token
        //ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('https://test2d.zwsoft.cn');
        //ZwCloud2D.ZwDataProcessor.ZwSetToken('');

        //设置加载图纸的docId
        ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg('1606196943661817856');

        let container = document.getElementById('container');

        //初始化前端组件
        ZwCloud2D.ZwEditor.ZwInit(container);

        //加载图纸
        ZwCloud2D.ZwDataProcessor.ZwLoad();
  }
}

# 4.补充说明

本节内容适用于需在 js 代码中动态引入 sdk 的场景，在各个前端框架对应的生命周期时执行相关代码即可，如 vue 的 mouted、angular 的 ngOnInit 和 react 的 componentDidMount，注意，请务必按照如下所示的引用顺序，否则可能会引发某些时序问题。以下为基于 react 框架的例子。

import React from "react";
import PropTypes from "prop-types";
import "./Display.css";
export default class Display extends React.Component {
    static propTypes = {
        value: PropTypes.string,
    };

    render() {
        return (
            <div id="container">
            </div>
        );
    }

    componentDidMount() {
        var oHead = document.getElementsByTagName('head')[0];

        var oScript1 = document.createElement("script");
        oScript1.type = "text/javascript";
        oScript1.src = "assets/ZwCloud2DSDK/ZwCloud2D.js";

        var oScript2 = document.createElement("script");
        oScript2.type = "text/javascript";
        oScript2.src = "assets/ZwCloud2DSDK/ZwCloud2DPrivateAPI.js";

        oHead.appendChild(oScript1);
        oScript1.onload = () => {

            oHead.appendChild(oScript2);
            oScript2.onload = () => {

                //设置后端服务地址
                ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('http://192.168.56.176:8888');

                //使用Cloud2D公网服务时,需要设置请求token
                //ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl('https://test2d.zwsoft.cn');
                //ZwCloud2D.ZwDataProcessor.ZwSetToken('');

                //设置加载图纸的docId
                ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg('1606196943661817856');

                let container = document.getElementById('container');

                //初始化前端组件
                ZwCloud2D.ZwEditor.ZwInit(container);

                //加载图纸
                ZwCloud2D.ZwDataProcessor.ZwLoad();
            }
        }
    }
}

IE浏览器兼容指南

开放平台