Qw-sdk-demo NPM

调研项目，将 react 开发的业务组件打包成 umd 供接入方使用，不受接入方技术栈限制的微前端方案调研，以公司的企微中台产品为例
iframe 的痛点：Why Not Iframe
打包成 umd 或组件有类型提示，对接更友好

使用示例

安装

方式一：script 引入

<script src="//cdn.jsdelivr.net/npm/qw-sdk-demo@latest/dist/qwsdk.js"></script>

方式二：npm 安装

npm install qw-sdk-demo

import QwSdk from 'qw-sdk-demo';

使用

方式一

添加一个容器

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

生成

const qw = new QwSdk({
  container: 'qw-container' // 容器元素 id
});

qw.render({
  type: 'ChannelCode', // 字符串，要渲染哪一个中台组件
  permission: ['00', '01'], // 权限点

  // 自定义包裹元素样式
  style: {
    border: '1px solid red'
  },
  className: 'abc'
});

方式二：React 组件

import QwSdk from 'qw-sdk-demo/dist/qwsdk-react';

export default function App() {
  return (
    <div className="App">
      <QwSdk
        type="ChannelCode"
        permission={['00', '01']}
        className="abc"
        style={{ color: 'red' }}
        // ...其他配置
      />
    </div>
  );
}