# 低代码渲染器接入指南

## 1. 概述

- 1.1 什么是低代码渲染器
- 1.2 核心功能和优势
- 1.3 适用项目
  - vue2
  - vue3
  - react
  - 其他框架请联系伊利（sy）或王雪峰（sy3570）添加适配器

## 2. 环境要求

- node >= 20
- vue2 > 2.7.0
- vue3 > 3.5.0
- react > 18.0.0

## 3. 准备工作

1.npmrc 配置文件增加镜像指定，sy 组件库走 shiyue 源，其他走淘宝镜像

```bash
registry=https://registry.npmmirror.com
@sy:registry=http://sy-registry.shiyue.com
```

2. node 至少要升级为 20 以上的版本

```bash
nvm install 20
nvm use 20
```

若不可行，请查看 node 官网历代大版本的 lts 版本（长期维护），自行安装，查看是否能正常渲染，选取稳定渲染悦码的那一个 node 版本作为开发环境

## 5. 接入方式

### vue2 项目接入

```bash
pnpm i @sy/wujie-vue2-renderer-adapter@latest --save
# or 或者
npm i @sy/wujie-vue2-renderer-adapter@latest --save
```

```vue
<script>
import WujieVueRendererAdapter from '@sy/wujie-vue2-renderer-adapter';
</script>

<template>
  <!-- 默认使用高级渲染模式，与原页面深度共享 document 与内存上下文 -->
  <WujieVueRendererAdapter fileId="13a9dmbz" projectId="22" />
  <!-- 降级渲染模式，使用无界 iframe 加载悦码渲染器应用 -->
  <!-- 缺点在于弹窗与遮罩层会约束在 iframe 空间内，无法与原页面共享 document，但无界的 iframe 可以与原页面共享内存上下文 ，这是比传统 iframe 更优的解决方案 -->
  <WujieVueRendererAdapter fileId="13a9dmbz" projectId="22" />
</template>
```

### vue3 项目接入

```bash
pnpm i @sy/wujie-vue3-renderer-adapter@latest --save
# or 或者
npm i @sy/wujie-vue3-renderer-adapter@latest --save
```

```vue
<script setup>
import WujieVueRendererAdapter from '@sy/wujie-vue3-renderer-adapter';
</script>

<template>
  <!-- 默认使用高级渲染模式，与原页面深度共享 document 与内存上下文 -->
  <WujieVueRendererAdapter fileId="13a9dmbz" projectId="22" />
  <!-- 降级渲染模式，使用无界 iframe 加载悦码渲染器应用 -->
  <!-- 缺点在于弹窗与遮罩层会约束在 iframe 空间内，无法与原页面共享 document，但无界的 iframe 可以与原页面共享内存上下文 ，这是比传统 iframe 更优的解决方案 -->
  <WujieVueRendererAdapter fileId="13a9dmbz" projectId="22" />
</template>
```

### react 项目接入

```bash
pnpm i @sy/wujie-react-renderer-adapter@latest --save
# or 或者
npm i @sy/wujie-react-renderer-adapter@latest --save
```

```jsx
import WujieReactRendererAdapter from '@sy/wujie-react-renderer-adapter';

return <WujieReactRendererAdapter fileId="13a9dmbz" projectId="22" />;
```

## API 参考

- 6.1 Props 参数详解
- 6.2 事件监听与回调
- 6.3 实例方法
- 6.4 拦截器使用

## 故障排除

- 常见错误及解决方案
- 日志与调试
- 悦码的日志输出一般在控制台中有 `console.ts 40` 的源码位置标记
- 兼容性问题处理
- renderer-adapter 是默认使用无界微应用来加载悦码渲染器应用的，这种集成方式会让悦码与你的父应用有更深的上下文结合和交互，但有一定的兼容性问题，当出现你无法解决的兼容性问题时，你可以手动设置 `degrade` 为 `false`，这将开启传统降级渲染，使用无界 iframe 加载悦码渲染器应用，若还不行，可摇人处理（王雪峰：sy3570）

- 性能问题诊断
- 悦码渲染器内部使用了 sentry 上报错误，你可以跟 徐川（sy0182） 申请对应警告邮箱的使用权，获取报错邮件

![sentry 邮箱](https://cms-1256453865.cos.ap-shanghai.myqcloud.com/y-code/20250320/企业微信截图_20250320192100.png)
