🧭 「代码交流」使用指南
一、游玩者指南
1.1 什么是「代码交流」？
这是一个围绕 Realm 平台的客户端组件和 HTML 组件的学习与交流社区。你可以在这里浏览开发者们发布的组件作品，也可以亲自尝试编写和发布自己的组件。
1.2 浏览发布内容
进入不同的发布页面浏览不同的排序方式和组件类型。
1.3 点赞互动
在「发现」分组的各类页面中，你可以对喜欢的作品点赞。点赞数据按日期存储，每天独立统计。
1.4 参与交流
在「社区」分组下的「交流」页面，你可以：
- 发布动态，与其他开发者讨论
- 回复他人的帖子
- 分享你的经验和疑问
1.5 小提示
- 页面左侧的侧边栏可以快速切换各个页面
- 带"发现"标签的分组里每天都有新内容
- 多关注时间显示和点赞排行，看看大家都在做什么
二、客户端组件开发者指南
2.1 什么是客户端组件？
客户端组件是在玩家浏览器中运行的组件，使用
组件.新组件() API 动态创建 UI。它不能直接访问服务器数据（属性、物品、数据库），但可以通过对外接口函数和通道与服务器通信。而本领域封装了对外接口函数，使得在前端也可以使用旧写法await 数据.读([<路径>])和await 数据.写([<路径>], <值>)来操作各页面相互独立的数据库。2.2 快速开始
进入「发布」分组下的「提交组件」页面：
- 填写标题和介绍
- 在代码框中输入你的组件代码
- 点击「发布」
发布后，其他玩家可以通过「发现」分组看到你的作品。
2.3 核心 API
创建组件
const 文本 = 组件.新组件('文本');
文本.内容 = "你好，世界！";
文本.样式.字体.大小 = 20;
const 按钮 = 组件.新组件('按钮');
按钮.当点击时(() => {
提示('被点击了！');
});
可用类型：
'块'、'文本'、'按钮'、'链接'、'图片'、'文本输入框'、'图标'、'富文本'通信
方式一：使用内置的数据封装
在客户端内置了
数据.读 、 数据.写 和数据.删除的封装，用法：const 结果 = await 数据.读(['你的', '数据', '路径']); // 一定要加上await
await 数据.写(['你的', '数据', '路径'], 值); // 不能写入undefined
await 数据.删除(['删除的', '数据', '路径']);
方式二：通道实时通信
通道('通道名').当收到信息时((数据) => {
// 处理收到的数据
});
通道('通道名').发送(任何值);
2.4 注意事项
- 不能直接访问
属性.xxx、物品.xxx、数据.读等服务器端 API - 所有数据交互必须通过对外接口函数和通道
- 代码和参数都会被用户查看，不要存放敏感信息
- 组件参数更新时会刷新整个组件（沙箱重置），注意状态保持
三、HTML 组件开发者指南
3.1 什么是 HTML 组件？
HTML 组件使用完整的 HTML/CSS/JavaScript 编写，在沙箱中运行。与客户端组件相比：
- ✅ 可以完全控制 DOM（
document、window可直接使用） - ✅ 可以引入外部 CSS/CDN 库
- ✅ 适合复杂动画、Canvas/WebGL 效果
- 同样需要通过对外接口函数和通道与服务器通信
3.2 快速开始
进入「发布」分组下的「提交HTML」页面：
- 填写标题和介绍
- 在代码框中输入你的 HTML 代码（只需填写
<head>到<body>之间的内容，系统会自动包裹<!DOCTYPE html>和<html>标签） - 点击「发布」
3.3 标准模板
<div id="app">
<h2 id="title">加载中...</h2>
<button onclick="handleClick()">点击</button>
</div>
<script>
// 组件参数作为全局变量可直接使用
function handleClick() {
玩家.提示('按钮被点击了！');
await 数据.写(['是否点击'], true);
}
// 通过通道接收实时更新
通道('更新通道').当收到信息时((数据) => {
document.getElementById('title').textContent = 数据.内容;
});
</script>
<style>
#app { padding: 20px; font-family: sans-serif; }
button { background: #3b82f6; color: white; border: none;
padding: 10px 20px; border-radius: 6px; cursor: pointer; }
</style>
3.4 操作数据库
此处的用法与客户端脚本组件相同。
3.5 注意事项
- HTML 组件高度固定，如有需要请使用
height: 100%+ 绝对定位撑满页面 - iframe 沙箱环境中没有
localStorage、cookie等浏览器 API - 通过对外接口函数通信时，函数不能有返回值（只能通过通道返回）
- 组件参数变化会重建整个 iframe，所有状态丢失
- 避免在 HTML 中直接使用
eval或new Function执行不可信代码
四、常见问题
Q: 如何查看我发布过的代码？
A: 进入「提交组件」或「提交HTML」页面，系统会自动加载你上次发布的内容。
Q: 点赞数据什么时候重置？
A: 点赞数据按日期存储，每天独立计算。
Q: 客户端组件和 HTML 组件有什么区别？
A: 客户端组件使用
组件.新组件() API 构建 UI，运行在 Wasm 沙箱中，适合简单的结构化界面；HTML 组件运行在 iframe 中，能导入外部CDN库，可以完全控制 DOM，适合复杂视觉效果。更多信息，敬请参考