Monet-SDK（莫奈大屏渲染）
概述
Monet-SDK是一种微服务低代码解决方案，也可以理解为Iframe的替代方案，可快速将莫奈大屏集成到任何React、Vue工程中，并提供了灵活易用的钩子函数，来满足与莫奈大屏的各种交互场景
Vue [传送门](https://www.npmjs.com/package/@jkyu/monet-draw-vue)如何使用Monet-SDK
1. 安装Monet-SDK
npm install @jkyu/monet-draw-react2. 配置代理
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(proxy('/api', {
target: 'https://imonet.jdcloud.com',
secure: false,
changeOrigin: true,
headers: {
Host: '',
Connection: 'keep-alive'
},
pathRewrite: {
'^/api': ''
}
}));
app.use(proxy('/geojson', {
target: 'https://imonet.jdcloud.com',
secure: false,
changeOrigin: true,
headers: {
Host: '',
Connection: 'keep-alive'
},
pathRewrite: {
'^/geojson': '/geojson'
}
}));
};注意：
以上配置只是提供了配置代理的一种方式，还可以修改webpack进行配置, 示例配置方式适用于React CRA创建的项目，只需要在
src下创建一个setupProxy.js文件，然后将以上代码复制到此文件即可。
3. 修改webpack配置
复制资源，配置别名，开启HTTPS
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const { override,fixBabelImports,addWebpackAlias,overrideDevServer } = require('customize-cra');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const draw = 'node_modules/@jkyu/monet-draw/build';
module.exports = {
webpack: override(
// 配置别名
addWebpackAlias({
'static': path.resolve(__dirname, './static'),
}),
// 针对antd 实现按需打包
fixBabelImports('import',{
libraryName:'antd',
libraryDirectory:'es',
style:'css',
}),
(config) => {
// 将Monet-SDK资源文件复制到工程中的static中
config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
config.plugins.push(
new CopyPlugin(
[
{
from: path.join(draw, 'static'),
to: 'static'
}
],
)
)
return config;
},
),
devServer:overrideDevServer(
(config)=>{
// 开启HTTPS
config.https = true
return config
}
)
};注意：
以上配置是基于
react-app-rewired的配置方式
新建或修改.env文件
HTTPS=true
注意：
开启HTTPS是因为代理中的
target是HTTPS服务所以需要进行统一，统一的原因主要是因为协议限制，以上配置同样是基于React CRA项目的配置方式， 如果代理target配置的是http代理地址，请忽略此步骤
4. 引用样式
<head>
...
<link
rel="stylesheet"
type="text/css"
href="%PUBLIC_URL%/static/monet-sdk.css"
/>
...
</head>5. 使用Monet-SDK
globalOption({
// 配置微服务地址，用于解析大屏信息
// 默认为：https://imonet.jdcloud.com
serverURL: "https://imonet.jdcloud.com"
})
class Demo extends React.Component {
componentDidMount() {
const leftRender = new MonetRender({
bigScreenURL: '', // 大屏发布地址
width:"650px", // 高度
height:"300px", // 宽度
container: 'leftDiv', // 容器ID
token:'234234...' // 授权码
});
leftRender.initDataPool = () => ({}); // 初始化数据池,返回值：Object
leftRender.beforeScreenRender = (screenInfo)=>{} // 大屏信息渲染前
leftRender.beforeComRender = (components)=>{} // 组件信息渲染前
leftRender.watchDataPool = (dataPool)=>{} // 监听数据池
leftRender.onload = (monetEvent)=>{ // 组件渲染完成
// monetEvent.setDataPool("numOption","8888888") // 设置变量
// 根据组件ID，修改样式信息
// monetEvent.setComConfig(3289, (config) => {
// config.style = {
// backgroundColor: 'rgba(224,72,175,0.5)',
// font: { size: 32, color: '#000000' }
// };
// return config;
// });
// 根据组件ID，修改系列信息
// monetEvent.setComSeries(3291, (series) => {
// series[0].barStyle.color = '#6DC8EC';
// return series;
// });
}
}
render(){
<div className="App">
<div id="leftDiv"></div>
</div>
}
}一些案例模板
| demo | 描述 |
|---|---|
| msdk-wp4 | 基于React CRA创建的Webpack4工程，集成Monet-SDK的一个示例模板 |
| msdk-wp5 | 基于React Webpack5工程，集成Monet-SDK的一个示例模板 |
| msdk-vue | 基于Monet-SDK集成莫奈大屏，React to Vue示例工程 |