设计器

PC 端

安装微应用插件 qiankun

yarn add qiankun

引用 qiankun

import { registerMicroApps, start, initGlobalState } from "qiankun";

registerMicroApps([]);

const action = initGlobalState({});
window.onGlobalStateChange = action.onGlobalStateChange;
window.setGlobalState = action.setGlobalState;

start({ singular: true });

设计器集成

设计器页面路由注册

router 文件中添加设计器路由（/design），建议该页面外不要嵌套布局，设计器界面应全屏展示。

const routes = [
  // 页面设计器
  {
    path: "/design",
    name: "design",
    component: () => import("../views/design/index.vue")
  }
];

微应用加载

添加上述路由对应的 vue 文件

<template>
  <!-- 微应用挂载div -->
  <div id="symaDesign"></div>
</template>

<script>
import { loadMicroApp } from "qiankun";

export default {
  mounted() {
    // 调用api获取已保存的json数据，模拟返回值
    const res = { ...获取到的json数据 };
    const microApp = loadMicroApp({
      name: "vue3-micro-vite",
      entry: `${window.location.origin}/vue3microvite`,
      container: "#symaDesign",
      props: {
        save: this.save,
        request: this.request
      }
    });
    microApp.mountPromise.then(() => {
      window.setGlobalState({
        designJson: res
      });
    });
  },
  methods: {
    // 右上角保存按钮回调，调用api保存JSON。
    // pageJson参数为页面JSON
    // buttonList参数为按钮权限对象数组，对象中包含butCode（按钮编码）和butName（按钮名称）属性
    save({ pageJson, buttonList }) {
      console.log(pageJson, buttonList);
    },
    // 接口请求方法
    request(options) {
      console.log(options);
      // options为接口请求信息对象，内有请求url、method、body等属性
      // 这里需调用工程中的公共请求方法，需返回Promise类型，即可通过.then(res)获取到res接口返回数据
      // return Promise.resolve({});
    }}
  }
};
</script>
<style lang="css" scoped></style>

国际化集成

添加 porps 参数

集成多语言，调用 loadMicroApp()方法时需额外传递以下 props 参数：

openIntl: true // 是否开启国际化，开启需传入true
langList: [], // 国际化语言类型数据，主要用于设计器中配置语言时支持配置的种类
languageCode: string // 当前国际化语言编码
save: function // 保存页面json数据和国际化
getPageIntl: function // 获取页面国际化方法

其中语言种类languageList数据格式如下所示，每一项需包含languageCode和languageName属性

[
  {
    "id": 1,
    "languageCode": "zh_CN",
    "languageName": "中文"
  }
]

languageCode为当前语言编码，例如中文为：zh_CN

save方法接收两个参数 data 和 intlList,其中 data 为对象包含 pageJson 和 buttonList,intlList 参数的结构如下：

[
  {
    "LANGUAGE_KEY": "intl_a2d16d2f-634c-447c-8599-973b86aeb0dd",
    "en_GB": "hello",
    "zh_CN": "你好"
  }
]

getPageIntl为进入渲染器时调用的获取当前页面多语言数据的方法，该方法需返回一个 promise，其中返回的数据格式如下，其中属性名为多语言 key，值为 KEY 对应的多语言文案。

{
  "intl_a2d16d2f-634c-447c-8599-973b86aeb0dd": "按钮"
}

设置设计器当前页面的语言列表数据

当进入设计器时，需通过 window.setGlobalState 方法加载当前设计器所在页面的多语言列表数据。方法如下：

window.setGlobalState({
  intlList: [],
});

其中，intlList参数数据格式如下所示：

[
  {
    "LANGUAGE_KEY": "intl_a2d16d2f-634c-447c-8599-973b86aeb0dd",
    "en_GB": "hello",
    "zh_CN": "你好"
  }
]

切换语言

切换语言后需要向微应用中传递语言编码

window.setGlobalState({
  languageCode: "en_GB",
})

自定义组件集成

添加 porps 参数

getComponentList: function // 获取自定义组件列表数据放大

自定义组件接口

url 地址	方法	参数	header
/walnut/component/queryOutsideInstalled	POST	project: 项目编码，env: 环境	固定传值 watchword = "rotk"

getComponentList 函数示例

async getComponentList() {
  const componentList = await request({
    url: "/walnut/component/queryOutsideInstalled",
    method: "POST",
    data: {
      project: project, // 项目编码 盘古公共平台loacalStorage中的project参数即为项目编码
      env: env // 环境空间 该值需要根据项目不同的运行环境传递，生产环境空间 或测试环境空间
    },
    headers: {
      watchword: "rotk"
    }
  })
  return componentList;
}

本地及 nginx 增加/walnut 代理

本地：
"/walnut": {
  target: "http://walnut-plugincenter-pangea-publicserver-prd.cloudprd.hisense.com",
  changeOrigin: true
}

nginx 配置

nginx 需配置如下代理，其中https://symamicrodev.hisense.com为测试环境地址，https://symamicro.hisense.com为生产环境地址。

// 用于页面模板的图片显示。注意：本条配置项要保证放到/minio配置项（如果有的话）的前面
location /minio/templateCenter/ {
    proxy_pass http://10.19.44.209:8060/pangea-prd-bucket/templateCenter/;
}

location /vue3microvite {
    proxy_pass https://symamicrodev.hisense.com;
}

location /symaMicro {
    proxy_pass https://symamicrodev.hisense.com;
}

location /walnut/ {
    proxy_pass http://walnut-plugincenter-pangea-publicserver-prd.cloudprd.hisense.com;
}

移动端

移动端设计器的引用方式与 PC 相同，nginx 配置需进行如下设置：

nginx 配置

nginx 需配置如下代理，其中https://symamicrodev.hisense.com为测试环境地址，https://symamicro.hisense.com为生产环境地址。

location /vue3microvite {
    proxy_pass https://symamicrodev.hisense.com;
}

location /symaMicro {
    proxy_pass https://symamicrodev.hisense.com;
}

location /uni {
   proxy_pass http://pangea-mobile-micro.clouddev.hisense.com;
}