Skip to main content

小程序开发简介

维格小程序是维格表推出的扩展功能。通过小程序,可以让表里的数据得到延伸扩展,让数据得到更充分的有效利用,实现更丰富的数据传输和数据可视化。

现在,维格表内支持自建小程序,让开发者充分运用 SDK 能力,开发更多符合业务场景和个人需求的小程序。

你能用自建小程序做什么

如果说维格表是一款对小白用户友好的可视化数据库,小程序便是将这款数据库直接变成不同形态的 App 的最佳助手。

扩展维格表的数据可视化能力

下面是一些自建小程序示例:

  • 单元格查看器:一款方便你浏览不同列类型数据的小程序,以一种全新的方式来查看神奇引用、神奇关联、附件类型的数据
  • 维格地图:一款在谷歌地图里显示表格内的地址数据的小程序
  • URL 预览:一款快速预览指定 URL 网页内容的小程序

扩展维格表的数据交互能力

下面是一些自建小程序示例:

  • 邮件通知:当表格内数据变更时,向指定的人发邮件
  • To do list:通过任务待办类 App 式的界面,快速录入数据到维格表

小程序开发指引

开发者技能

在创建你的第一个小程序之前,请确保你已经掌握了如下技能:

  • 熟悉维格表的基本概念,特别是记录、字段、视图
  • 熟悉 JavaScript 语言和 React 框架。TypeScript 是加分项,可以帮助你开发更稳定的小程序
    • 如果你还没有接触过 JavaScript,但对 Web 开发有浓厚的兴趣,推荐你阅读 MDN JavaScript 教程React 教程
    • 小程序 SDK 中使用的核心能力包括 React Hooks 和 React 函数式组件
  • 了解 npm 或者 yarn 包管理器
  • 熟悉最基础的命令行语句,比如 cd 进入一个目录,最基础的就够用了。

开发环境要求

  • Google Chrome 浏览器
  • 安装 NodeJS,推荐使用最新版本 v14.16.0,理论上 12 版本以上都可以。推荐使用 nvm 管理你的 node 版本。
  • 需要一个代码编辑器,推荐使用 VS Code(维格程序猿鼎力推荐)

开发者工具

小程序命令行开发工具 (widget-cli)

widget-cli 是一个辅助式的命令行工具,它可以帮你快速初始化、运行、发布、下架小程序(构建和发布过程依赖了内置的 webpack)。

小程序 SDK 工具 (widget-sdk)

widget-sdk 提供的丰富的 API,可以实现读/写表格中的各类数据,以及调用维格表的各种内置方法,根据你的需要来开发强大的自定义小程序。widget-sdk 也是一个标准的 npm 模块,在 package.json 中进行了声明。

维格表小程序本质上是一个 React 应用,除了 widget-sdk 外,你可以像构建一个标准的 React 应用一样构建你的自建小程序,引入你需要的 npm 包。

widget-sdk 中使用的核心是 React 函数式组件以及 hooks。

widget-sdk 的所有能力在 API 参考 有完整的详细信息,你可以在以下总结中先寻找一个灵感:

  1. 读取元信息
    1. 当前表信息,如表 ID、表名称等
    2. 小程序自身相关信息
  2. 读取表格数据
    1. 行数据
    2. 列数据
    3. 对数据进行筛选/排序(开发中)
  3. 写入表格数据
    1. 行数据
    2. 列数据(开发中)
  4. 实时协作的 Key-Value 存储器
    1. 存储小程序自身所需要的数据,并且实时协同
  5. 读取选区信息
    1. 激活的单元格
    2. 激活的选区
    3. 激活的视图
  6. 与主应用的交互
    1. 展开、关闭小程序
    2. 展开、关闭小程序设置
    3. 展开一个记录编辑卡片

小程序 UI 组件库 (components)

components 提供了丰富的 UI 组件库,帮助开发者构建跟维格表风格一致的小程序,降低开发成本。

  1. Colors
  2. 基础组件
  3. 其他业务型组件

小程序图标库 (icons)

除了 UI 组件之外,我们还提供了由维格精心设计的图标库,进一步丰富信息展现维度。

例子

你也可以前往 开发者模板小程序,在一个实际的小程序中查看全部的 API 使用效果。