\\n\"}],\"zoneId\":\"cpct8ibmtc\",\"zoneType\":\"Z\"}}","text":"作者：孝夕夕\n推荐理由\n新手极其友好！带你从零开始了解Replit和多维表格插件。\n\n\n写在前面\n英文不好？没关系。不懂代码？没关系。@孝夕夕将带你逐步了解并熟悉 Replit 以及多维表格插件，真正从零开始——从最初的注册账号到移植一款2048游戏。\n \n是什么\n在开始之前，我们先简要了解一下多维表格插件是什么——使用多维表格插件。\n其主要用途是扩充函数、读取/写入第三方系统的数据。\n \n本文的主要读者为没有编程能力或编程能力较弱的入门级用户。如果你具有良好的编程能力，建议直接阅读官方文档多维表格扩展脚本开发指南以及扩展脚本 API。\n为什么\n这个插件和应用平台里的插件的区别是什么？为什么做两套相似的功能？\n在操作多维表格相关数据方面，本插件和应用平台里的插件能实现的功能是几乎一样的。\n区别在于本插件更轻量，不需要开放平台的开发者身份，也无需走上架审批流程，\n提供了一个 Base 级的 key，降低开发插件的门槛。\n \n\n从零开始\n注册账号\n访问replit注册一个账号，需要一个邮箱：\n \n \n \nHello world （HTML.CSS.JS）\n完成目标是页面显示字符串“Hello world”\n点击+Create Repl创建一个项目，选择HTML.CSS.JS：\n \n \n \n默认打开的文件是index.html，是放置代码的地方，以后将会经常和这个文件打交道。\n目前不需要改动代码，需要做的是复制链接后粘贴到多维表格中：\n \n \n需要注意的是，如果重命名项目，一定记得要一并更新上图中5的链接，否则会导致之前添加的脚本失效。\n \n好了，你已经学会如何输出 Hello world了。\n做好后是这样的：点击查看\nHello-world-HTMLCSSJS.zip\n \n官方示例模板HTML Template\n接下来完成目标是熟悉基于这类项目的官方模板HTML Template。\n示例模板的用途是在指定数据表新建空白记录，界面上有6行文字、1个列表、1个按钮。\n \n我们来看看Replit，点击Fork按钮即可将模板复制到自己的账号下。\n \n左侧的文件树中有7个文件，我们依次看看都是什么用途。\n \n1、favicon.svg\n默认自带的图标，并未实际用到，可删除\n2、index.scss\n默认自带的样式，并未实际用到，可删除\n3、index.ts\n经过修改的脚本，不可删除\n4、index.html\n经过修改的主页面，不可删除\n5、README.md\n经过修改的使用说明，帮助理解文件内容，可删除\n6、package-lock.json\n默认自带的数据文件，无实际用途，可删除\n7、package.json\n默认自带的数据文件，无实际用途，可删除\n示例模板中，真正发挥作用的只有两个文件：\n1、index.ts\n2、index.html\n好了，你已经认识了官方示例模板HTML Template。\nHello world （记录）\n接下来完成目标是新增记录并在多行文本字段写入Hello world。\n上一章提到官方模板界面上有6行文字、1个列表、1个按钮。\n \n前五行和 hello world 没什么关系，让我们来把他注释掉。\n在index.html文件中选中第13行，按CTRL+/，变成绿色即为注释成功。\n按相同的方式注释掉第15~42行，可以看到界面干净多了，只留下了菜单和按钮。\n \n接下来点击index.ts文件，将模板的15~17行替换掉：\n替换前：\n\n 替换后：\n \n \n \n运行：\n \n好了，你已经学会如何新增记录并在多行文本字段写入Hello world了。\n做好后是这样的：点击查看\nHello-world-Ji-Lu.zip\n2048游戏（HTML）\n接下来完成目标是移植游戏，在多维表格玩2048。\n从零写一份2048太烧脑，所以这里准备好了一份样例：点击查看\n样例代码基于：2048 game制作过程参考#教程# CodePen→Replit#Base#\n为了方便描述，样例中index.html、script.js、style.css三个文件的代码分别简称为：样例代码H、样例代码J、样例代码C\n利用上一环节的模板，在src文件夹下新建文件style.css：\n \n将代码C原样粘贴进去：\n \n在src文件夹下新建文件script.js，将代码J原样粘贴进去：\n \n切换到index.html文件，在第8行后插入一行代码（截取自代码H），目的是链接之前创建的样式表CSS （Cascading Style Sheets，层叠样式表）。\n插入代码前\n \n插入的代码\n\n 插入代码后\n \n需要提醒的是，文件树比样例增加了一层src文件夹，所以截取自代码H的代码多了字符/src/：\n \n \n \n\n 在第53行后插入多行代码（截取自代码H），把2048的主界面抄过来。\n同样，在链接script.js文件时多了字符/src/：\n插入代码前\n \n插入代码后\n \n点击运行按钮后，看到的界面是这样：\n \n可以看到，界面上方是原自官方模板HTML Template的Select Table和Add Record按钮；\n界面下方是原自样例2048的2048界面。\n看起来SCORE没有正常显示，我们来到文件，将代码注释掉。嗯，这样看起来好些了：\n \n好了，你已经学会如何移植游戏，在多维表格玩2048了。\n做好后是这样的：2048游戏（HTML）\n2048You-Xi-HTML.zip\n2048记录成绩（HTML）\n接下来完成目标是在点击按钮时将成绩写入表格。\n我们知道，写入数据主要是在index.ts中实现的，那么接下来修改这个文件。\n修改代码前\n \n修改代码后\n \n我们试着运行一下：\n \n看起来游戏界面有点大，无法展示全4行，影响游戏体验，那么来调整一下：\n修改代码前：\n \n第12行代码改为\n\n \n修改代码后：\n \n这样看起来好多了：\n \n好了，你已经学会如何在点击按钮时将成绩写入表格了。\n做好后是这样的：2048记录成绩（HTML）\n2048Ji-Lu-Cheng-Ji-HTML.zip\n \n2048自动记录成绩（HTML）\n接下来完成目标是在游戏结束时自动将成绩写入表格。\n我们知道，游戏是在script.js中实现的，那么接下来修改这个文件。\n目的是当游戏结束时自动点击按钮。\n修改代码前：\n \n修改代码后：\n \n\n \n在index.html当中插入一行代码，用于引入 jQuery 库：\n \n\n 好了，你已经学会如何在游戏结束时自动将成绩写入表格了。\n做好后是这样的：2048自动记录成绩（HTML）\n2048Zi-Dong-Ji-Lu-Cheng-Ji-HTML.zip\n\n\n\n\n\n\n"},"recommendList":[{"path":"/content/7296703705051267075","title":"飞书审批也可有AI助力？通过集成平台即可！","coverTitle":"订单审批发票管理","cover":"https://p1-hera.byteimg.com/tos-cn-i-jbbdkfciu3/abcd85ad936b44669ebdb19542b01b85~tplv-jbbdkfciu3-image:0:0.image"},{"path":"/content/7291470161407213569","title":"我于首旅如家，通过一表管理邮箱、审批、数据、企微！","coverTitle":"首旅如家多场景管理","cover":"https://p1-hera.byteimg.com/tos-cn-i-jbbdkfciu3/b77e74657caa49829f2cca8c8578c72c~tplv-jbbdkfciu3-image:0:0.image"},{"path":"/content/7296677823208767492","title":"将“集成”能力发挥到最大化，BI系统数据实时推送精准触达","coverTitle":"BI系统数据集成","cover":"https://p1-hera.feishucdn.com/tos-cn-i-jbbdkfciu3/b3216d337ef84f7db3c35451719a5d2e~tplv-jbbdkfciu3-image:0:0.image"},{"path":"/content/7299160789762736131","title":"便捷的小团队人事管理系统，多维表格+飞书人事即可！","coverTitle":"小团队人事管理","cover":"https://p1-hera.feishucdn.com/tos-cn-i-jbbdkfciu3/28f0c85e333f4edb8d4979591d359f51~tplv-jbbdkfciu3-image:0:0.image"}],"coverTitle":"编程新手教程","contentType":"richtext"};