作者：孝夕夕
推荐理由
新手极其友好！带你从零开始了解Replit和多维表格插件。
写在前面
英文不好？没关系。不懂代码？没关系。@孝夕夕将带你逐步了解并熟悉 Replit 以及多维表格插件，真正从零开始——从最初的注册账号到 移植一款2048游戏。
是什么
其主要用途是扩充函数、读取/写入第三方系统的数据。
为什么
这个插件和应用平台里的插件的区别是什么？为什么做两套相似的功能？
在操作多维表格相关数据方面，本插件和应用平台里的插件能实现的功能是几乎一样的。
区别在于本插件更轻量，不需要开放平台的开发者身份，也无需走上架审批流程，
提供了一个 Base 级的 key，降低开发插件的门槛。
250px|700px|reset
从零开始
注册账号
250px|700px|reset
250px|700px|reset
Hello world （HTML.CSS.JS）
完成目标是页面显示字符串“Hello world”
点击+Create Repl创建一个项目，选择HTML.CSS.JS：
250px|700px|reset
默认打开的文件是index.html，是放置代码的地方，以后将会经常和这个文件打交道。
目前不需要改动代码，需要做的是复制链接后粘贴到多维表格中：
250px|700px|reset
250px|700px|reset
需要注意的是，如果重命名项目，一定记得要一并更新上图中5的链接，否则会导致之前添加的脚本失效。
好了，你已经学会如何输出 Hello world了。
示例模板的用途是在指定数据表新建空白记录，界面上有6行文字、1个列表、1个按钮。
250px|700px|reset
我们来看看Replit，点击Fork按钮即可将模板复制到自己的账号下。
左侧的文件树中有7个文件，我们依次看看都是什么用途。
250px|700px|reset
1、favicon.svg
默认自带的图标，并未实际用到，可删除
2、index.scss
默认自带的样式，并未实际用到，可删除
3、index.ts
经过修改的脚本，不可删除
4、index.html
经过修改的主页面，不可删除
5、README.md
经过修改的使用说明，帮助理解文件内容，可删除
6、package-lock.json
默认自带的数据文件，无实际用途，可删除
7、package.json
默认自带的数据文件，无实际用途，可删除
示例模板中，真正发挥作用的只有两个文件：
1、index.ts
2、index.html
Hello world （记录）
接下来完成目标是新增记录并在多行文本字段写入Hello world。
上一章提到官方模板界面上有6行文字、1个列表、1个按钮。
前五行和 hello world 没什么关系，让我们来把他注释掉。
在index.html文件中选中第13行，按CTRL+/，变成绿色即为注释成功。
按相同的方式注释掉第15~42行，可以看到界面干净多了，只留下了菜单和按钮。
250px|700px|reset
接下来点击index.ts文件，将模板的15~17行替换掉：
替换前：
替换后： table.addRecord({
fields: {},
});
const field = await table.getFieldByName('多行文本'); // 选择"多行文本"字段
const res = await table.addRecord({
fields: {
[field.id]: [ // 多行文本对应的值的格式
{
type: 'text',
text: 'hello world'
}
]
}
});
运行：
250px|700px|reset
好了，你已经学会如何新增记录并在多行文本字段写入Hello world了。
2048游戏（HTML）
接下来完成目标是移植游戏，在多维表格玩2048。
为了方便描述，样例中index.html、script.js、style.css三个文件的代码分别简称为： 样例代码H、样例代码J、样例代码C
将代码C原样粘贴进去：
250px|700px|reset
在src文件夹下新建文件script.js，将代码J原样粘贴进去：
250px|700px|reset
切换到index.html文件，在第8行后插入一行代码（截取自代码H）， 目的是链接之前创建的样式表CSS （Cascading Style Sheets，层叠样式表）。
插入代码前
插入的代码
插入代码后<link href="/src/style.css" rel="stylesheet" type="text/css" />
需要提醒的是，文件树比样例增加了一层src文件夹，所以截取自代码H的代码多了字符/src/：
<link href="style.css" rel="stylesheet" type="text/css" />
250px|700px|reset
在第53行后插入多行代码（截取自代码H），把2048的主界面抄过来。<link href="/src/style.css" rel="stylesheet" type="text/css" />
同样，在链接script.js文件时多了字符/src/：
插入代码前
插入代码后
250px|700px|reset
点击运行按钮后，看到的界面是这样：
看起来SCORE没有正常显示，我们来到文件，将代码注释掉。嗯，这样看起来好些了：
250px|700px|reset
好了，你已经学会如何移植游戏，在多维表格玩2048了。
2048You-Xi-HTML.zip
2048记录成绩（HTML）
接下来完成目标是在点击按钮时将成绩写入表格。
我们知道，写入数据主要是在index.ts中实现的，那么接下来修改这个文件。
修改代码前
修改代码后
我们试着运行一下：
250px|700px|reset
看起来游戏界面有点大，无法展示全4行，影响游戏体验，那么来调整一下：
修改代码前：
第12行代码改为
<body style="zoom:0.7">
修改代码后：
250px|700px|reset
这样看起来好多了：
好了，你已经学会如何在点击按钮时将成绩写入表格了。
2048自动记录成绩（HTML）
接下来完成目标是在游戏结束时自动将成绩写入表格。
我们知道，游戏是在script.js中实现的，那么接下来修改这个文件。
目的是当游戏结束时自动点击按钮。
修改代码前：
修改代码后：
250px|700px|reset
// The mighty 2048 tile
if (merged.value === 2048) {
self.won = true;
// console.log("你成功了！");
$("#addRecord").click();
}
} else {
self.moveTile(tile, positions.farthest);
}
if (!self.positionsEqual(cell, tile)) {
moved = true; // The tile moved from its original cell!
}
}
});
});
if (moved) {
this.addRandomTile();
if (!this.movesAvailable()) {
this.over = true; // Game over!
// console.log("你失败了！");
$("#addRecord").click();
}
this.actuate();
}
};
在index.html当中插入一行代码，用于引入 jQuery 库：
好了，你已经学会如何在游戏结束时自动将成绩写入表格了。<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
