【事务中心】额外卡片使用新的加载方式

yangchunrong

事务中心额外卡片使用新的加载方式，配置如下

1、dumi_jqzy分支为参考dumi做出来的酒泉职业额外卡片实例，可从该分支复制新的项目地分支修改，打开该分支，可以看到以下页面：

这里是前端展示总入口，可以在这里配置需要的卡片，直接使用原本的配置就行

2、组件的代码写在src文件下：

所有的组件都放在hom/index.js页面进行展示

3、卡片写完后，把需要导出的组件写在src/index.js中（home/index.js必须导出）：

4、卡片中使用到的组件，需要在package文件中配置（常用的组件包已配置，如果没有新组件，可以不改）：

5、配置完成后，使用npm run build命令打包，在dist文件中可得到以下文件：

6、将dist文件夹中的文件全部复制（如果文件夹中有图片或其他文件也要一起复制），在服务器上建个文件夹放起来，如/opt/swzx/extraCard：

放了统一方便查看，事务中心前端的文件建议放在和我同样的文件夹下

7、去potainer平台做挂载：

在swam找到服务器点进详情：

如果没有label的话自己加一个

• 把引用额外卡片的服务固定在你刚才放文件的服务器上
  
  

配置挂载：


在引入额外卡片的项目也需要修改（事务中心4.0前端已修改，不需要再改）

1、总入口文件（如事务中心index.js）进行如下修改：

代码中的两个函数为：

/**
* 创建script标签加载js
* @param {string} [url='']
* @returns
*/
export const createScript = (url = '') => {
    let scriptTags = window.document.querySelectorAll('script');
    let len = scriptTags.length;
    let i = 0;
    // 截取字符串,去掉可能url是相对路径的
    url = url.indexOf('.') === 0 ? url.substr(1) : url;
    let _url = location.origin + url;
    return new Promise((resolve, reject) => {
        var isHas = false;
        for (i = 0; i < len; i++) {
            var src = scriptTags.src;
            if (src && src === _url) {
                isHas = true;
                resolve();
                // scriptTags.parentElement.removeChild(scriptTags);
            }
        }
        if (!isHas) {
            let node = document.createElement('script');
            node.type = 'text/javascript';
            node.src = url;
            node.onload = resolve;
            document.body.appendChild(node);
        }
    });
};
/**
*
* 创建link标签加载css
* @export
* @param {*} cssURL
* @param {*} charset
* @param {*} media
* @returns
*/
export function createLink(cssURL, charset, media) {
    console.log("创建link");
    var linkFirst = document.getElementsByTagName('link')[0],
        linkTag = null;
    console.log("创建link1",linkFirst);
    if (!cssURL) {
        return false;
    }
    console.log("创建link2");
    linkTag = document.createElement('link');
    linkTag.setAttribute('rel', 'stylesheet');
    linkTag.setAttribute('charset', charset || 'utf-8');
    linkTag.setAttribute('media', media || 'all');
    linkTag.setAttribute('type', 'text/css');
    linkTag.href = cssURL;
    console.log("创建link3",linkTag);
    linkFirst.after(linkTag); //在第一个link的后面追加
}

2、在项目中加入额外卡片使用的依赖包的js文件：

3、package引入包：

"html-webpack-tags-plugin": "^2.0.17"

4、配置webpage：

5、加载完成后可直接使用window.ExtraCard获取组件库

第一次配置好后以后更新就不用配置了，直接把修改后的文件打包好，拖进服务器对应文件夹即可，前端不需要更新或重启

tanzhi

有点东西

tanzhi

春荣流批