Wujie Card SDK

该 SDK 用于帮助卡片开发者构建微前端应用，使其在工作台容器环境与本地开发环境中都能无缝运行。

安装

npm install wujie-card-sdk

使用方式（Vue）

1. 在 main.js 中初始化（推荐）

从 wujie-card-sdk/vue 引入 defineCard，用于自动处理 Wujie 生命周期与运行环境识别。

import { defineCard } from 'wujie-card-sdk/vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 本地开发使用的 Mock 数据
// 注意：mockData 模拟的是从上层工作台传入的数据。
// 仅当卡片内部逻辑必须依赖这些外部数据时，才需要在此配置 mock 数据。
const mockData = {
  theme: 'light'
}

defineCard({
  rootComponent: App,
  mockData,
  debug: true,
  // 通过 setup 安装插件（router、pinia、element-plus 等）
  setup: (app) => {
    app.use(ElementPlus)
  }
})

2. 在组件中使用上下文（App.vue）

<script setup>
import { useCardContext } from 'wujie-card-sdk/vue'
import { watch, ref } from 'vue'

const { props } = useCardContext()
const sales = ref(0)

// 获取主应用下发的数据（或本地开发时的 mockData）
watch(props, () => {
  if (props.data) {
    sales.value = props.data.sales
  }
}, { immediate: true, deep: true })
</script>

功能特性

• 生命周期管理：自动处理 window.__WUJIE_MOUNT 与 window.__WUJIE_UNMOUNT。
• 环境自适应：自动识别是否处于 Wujie 环境。
• Mock 数据：本地运行时可提供 mock 数据。

TypeScript 支持

SDK 内置 TypeScript 类型定义。请确保你的 tsconfig.json 中包含该 SDK 的类型：

{
  "compilerOptions": {
    "types": ["wujie-card-sdk"]
  }
}

xw 兼容用法

SDK 提供 xw 兼容层，支持与历史 xw.js 调用方式一致的 API。可在组件中通过上下文获取 host 来调用。

<script setup>
import { useCardContext } from 'wujie-card-sdk/vue'

const { host } = useCardContext()

host.xw('getUserInfo', {
  success: (res) => {
    console.log('用户信息', res)
  },
  fail: (msg) => {
    console.error('获取用户信息失败', msg)
  }
})

host.xw('getMainConfig', {
  success: (res) => {
    console.log('主应用配置', res)
  }
})

host.xw('getCpnConfig', {
  params: { name: 'your-component-name' },
  success: (conf) => {
    console.log('组件配置', conf)
  }
})

host.xw('openAlert', {
  params: { title: '提示', message: '内容文本' }
})

host.xw('openNewTab', {
  params: { title: '新标签', path: '/your/path', query: { id: '1' } }
})

host.xw('openWindow', {
  params: { url: 'https://example.com' }
})

host.xw('jump', {
  params: { path: '/your/path', query: { id: '1' } }
})

host.xw('updateTabName', {
  params: { name: '新的标题' }
})

host.xw('close')
</script>