对新手极其友好！带你从零开始了解Replit和多维表格插件。
写在前面
英文不好？没关系。不懂代码？没关系。@孝夕夕 将带你逐步了解并熟悉 Replit 以及多维表格插件，真正从零开始——从 最初的注册账号 到 移植一款2048游戏。
是什么
在开始之前，我们先简要了解一下多维表格插件是什么—— 使用多维表格插件 www.feishu.cn/hc/zh-CN/ar…
其主要用途是扩充函数、读取/写入第三方系统的数据。
本文的主要读者为没有编程能力或编程能力较弱的入门级用户。 如果你具有良好的编程能力，建议直接阅读官方文档 bytedance.feishu.cn/docx/HazFdS…
为什么
这个插件和应用平台里的插件的区别是什么？为什么做两套相似的功能？
在操作多维表格相关数据方面，本插件和应用平台里的插件能实现的功能是几乎一样的。
区别在于本插件更轻量，不需要开放平台的开发者身份，也无需走上架审批流程，
提供了一个 Base 级的 key，降低开发插件的门槛。
从零开始
注册账号
访问replit注册一个账号，需要一个邮箱：
Hello world （HTML.CSS.JS）
完成目标是页面显示字符串“Hello world”
点击+Create Repl创建一个项目，选择HTML.CSS.JS：
默认打开的文件是index.html，是放置代码的地方，以后将会经常和这个文件打交道。
目前不需要改动代码，需要做的是复制链接后粘贴到多维表格中：
需要注意的是，如果重命名项目，一定记得要一并更新上图中5的链接，否则会导致之前添加的脚本失效。
好了，你已经学会如何输出 Hello world了。
做好后是这样的：replit.com/@xiaoxixi2/…
官方示例模板HTML Template
接下来完成目标是熟悉基于这类项目的官方模板 HTML Template replit.com/@lark-base/…
示例模板的用途是在指定数据表新建空白记录，界面上有6行文字、1个列表、1个按钮。
我们来看看Replit，点击Fork按钮即可将模板复制到自己的账号下。
左侧的文件树中有7个文件，我们依次看看都是什么用途。
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
好了，你已经认识了官方示例模板 HTML Template。
Hello world （记录）
接下来完成目标是新增记录并在多行文本字段写入Hello world。
上一章提到官方模板界面上有6行文字、1个列表、1个按钮。
前五行和 hello world 没什么关系，让我们来把他注释掉。
在index.html文件中选中第13行，按CTRL+/，变成绿色即为注释成功。
按相同的方式注释掉第15~42行，可以看到界面干净多了，只留下了菜单和按钮。
接下来点击index.ts文件，将模板的15~17行替换掉：
替换前：
<div class="hljs-line" data-start="1"> table.addRecord({</div><div class="hljs-line" data-start="2"> fields: {},</div><div class="hljs-line" data-start="3"> });</div>
替换后：
<div class="hljs-line" data-start="1"> const field = await table.getFieldByName('多行文本'); // 选择"多行文本"字段</div><div class="hljs-line" data-start="2"> const res = await table.addRecord({</div><div class="hljs-line" data-start="3"> fields: {</div><div class="hljs-line" data-start="4"> [field.id]: [ // 多行文本对应的值的格式</div><div class="hljs-line" data-start="5"> {</div><div class="hljs-line" data-start="6"> type: 'text',</div><div class="hljs-line" data-start="7"> text: 'hello world'</div><div class="hljs-line" data-start="8"> }</div><div class="hljs-line" data-start="9"> ]</div><div class="hljs-line" data-start="10"> }</div><div class="hljs-line" data-start="11"> });</div>
运行：
好了，你已经学会如何新增记录并在多行文本字段写入Hello world了。
做好后是这样的：replit.com/@xiaoxixi2/…
2048游戏（HTML）
接下来完成目标是移植游戏，在多维表格玩2048。
从零写一份2048太烧脑，所以这里准备好了一份样例：replit.com/@xiaoxixi2/…
样例代码基于：codepen.io/camsong/pen…
制作过程参考#教程# CodePen→Replit hsiaohsihsi.feishu.cn/wiki/S1Iawk…
为了方便描述，样例中index.html、script.js、style.css三个文件的代码分别简称为： 样例代码H、样例代码J、样例代码C
利用上一环节的模板，在src文件夹下新建文件style.css：
将代码C原样粘贴进去：
在src文件夹下新建文件script.js，将代码J原样粘贴进去：
切换到index.html文件，在第8行后插入一行代码（截取自代码H）， 目的是链接之前创建的样式表CSS （Cascading Style Sheets，层叠样式表）。
插入代码前
插入的代码
<div class="hljs-line" data-start="1"><link href="/src/style.css" rel="stylesheet" type="text/css" /></div>
插入代码后
需要提醒的是，文件树比样例增加了一层src文件夹，所以截取自代码H的代码多了字符/src/：
<div class="hljs-line" data-start="1"><link href="style.css" rel="stylesheet" type="text/css" /></div>
<div class="hljs-line" data-start="1"><link href="/src/style.css" rel="stylesheet" type="text/css" /></div>
在第53行后插入多行代码（截取自代码H），把2048的主界面抄过来。
同样，在链接script.js文件时多了字符/src/：
插入代码前
插入代码后
点击运行按钮后，看到的界面是这样：
可以看到，界面上方是原自官方模板HTML Template的Select Table和Add Record按钮；
界面下方是原自样例2048的界面。
看起来SCORE没有正常显示，我们来到文件，将代码注释掉。嗯，这样看起来好些了：
好了，你已经学会如何移植游戏，在多维表格玩2048了。
做好后是这样的：replit.com/@xiaoxixi2/…
2048记录成绩（HTML）
接下来完成目标是在点击按钮时将成绩写入表格。
我们知道，写入数据主要是在index.ts中实现的，那么接下来修改这个文件。
修改代码前
修改代码后
我们试着运行一下：
看起来游戏界面有点大，无法展示全4行，影响游戏体验，那么来调整一下：
修改代码前：
第12行代码改为
<div class="hljs-line" data-start="1"><body style="zoom:0.7"></div>
修改代码后：
这样看起来好多了：
好了，你已经学会如何在点击按钮时将成绩写入表格了。
做好后是这样的：replit.com/@xiaoxixi2/…
2048自动记录成绩（HTML）
接下来完成目标是在游戏结束时自动将成绩写入表格。
我们知道，游戏是在script.js中实现的，那么接下来修改这个文件。
目的是当游戏结束时自动点击按钮。
修改代码前：
修改代码后：
<div class="hljs-line" data-start="1"> // The mighty 2048 tile</div><div class="hljs-line" data-start="2"> if (merged.value === 2048) {</div><div class="hljs-line" data-start="3"> self.won = true;</div><div class="hljs-line" data-start="4"> // console.log("你成功了！");</div><div class="hljs-line" data-start="5"> $("#addRecord").click();</div><div class="hljs-line" data-start="6"> }</div><div class="hljs-line" data-start="7"> } else {</div><div class="hljs-line" data-start="8"> self.moveTile(tile, positions.farthest);</div><div class="hljs-line" data-start="9"> }</div><div class="hljs-line" data-start="10"></div><div class="hljs-line" data-start="11"> if (!self.positionsEqual(cell, tile)) {</div><div class="hljs-line" data-start="12"> moved = true; // The tile moved from its original cell!</div><div class="hljs-line" data-start="13"> }</div><div class="hljs-line" data-start="14"> }</div><div class="hljs-line" data-start="15"> });</div><div class="hljs-line" data-start="16"> });</div><div class="hljs-line" data-start="17"></div><div class="hljs-line" data-start="18"> if (moved) {</div><div class="hljs-line" data-start="19"> this.addRandomTile();</div><div class="hljs-line" data-start="20"></div><div class="hljs-line" data-start="21"> if (!this.movesAvailable()) {</div><div class="hljs-line" data-start="22"> this.over = true; // Game over!</div><div class="hljs-line" data-start="23"> // console.log("你失败了！");</div><div class="hljs-line" data-start="24"> $("#addRecord").click();</div><div class="hljs-line" data-start="25"> }</div><div class="hljs-line" data-start="26"></div><div class="hljs-line" data-start="27"> this.actuate();</div><div class="hljs-line" data-start="28"> }</div><div class="hljs-line" data-start="29">};</div>
在index.html当中插入一行代码，用于引入 jQuery 库：
<div class="hljs-line" data-start="1"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></div>
好了，你已经学会如何在游戏结束时自动将成绩写入表格了。
做好后是这样的：replit.com/@xiaoxixi2/…
相关文档
关于插件的游戏部分就介绍到这里了，接下来我们尝试实用功能：利用多维表格插件制作「轻便地图」 https://juejin.cn/post/7366451908141482024
