使用说明

前端说明

一．简要概述该功能实现原理 1.配置端通过可视化配置好首页保存并生产JSON数据，客户端通过JSON数据按全局配置和组件配置渲染页面。

2.开发环境，配置端通过iframe嵌入客户端的H5链接，与h5端通过postmessage协议通信，实现配置端更改配置后实时发送到H5端，H5端拿到配置JSON后实时更新页面。

二．配置端开发和打包说明

1.开发运行步骤 npm run bootstrap （electron安装不成功也不影响开发，主要的开发目录是packages下面的mall-cook-platform，其他的不用管），然后npm run dev 选mall-cook-platform

2.打包 npm run build, 生产的文件夹 dist/admin放到服务器上

三．配置端config说明（配置端）

1.开发环境需要配置好接口代理（vue.config.js）

devServer: { proxy: { ‘/api’: { target: ‘https://diy.wo-shop.net',（需更改） ws: true, pathRewrite: { ‘^/api’: ‘/‘ }, changeOrigin: true } } },

iframe链接配置（src/comfing.js 里面的viewUrl），开发时，h5项目运行的地址。上线环境为h5项目链接地址 viewUrl: process.env.NODE_ENV === ‘production’ ? ‘https://diy.wo-shop.net/h5/#/‘ : ‘http://localhost:8081/h5/#/‘
可视化布局组件，配置json目录（src/widgets），配置端配置好参数，h5端通过参数编写组件，一定要对应好，可以新增也可以删减，只要两端能对的上

四．H5端说明

配置端通过iframe引入页面是platforms/h5/build.vue，该页面通过postmessage与配置端通信，可以在这个页面新增消息类型完成新增的功能。
无论是开发环境还是显示环境h5端都通过components/render-widget.vue 该组件将配置的JSON数据渲染成页面。
components/widgets下面的组件是管理端（src/widgets）的具体实现。

1、运行插件。进行打包，打包出来的文件修改名字diypage

2、把diypage上传至服务器 /根目录/public目录