跳到主要内容

小程序开发简介

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

现在,维格云内支持自建小程序,让开发者充分运用 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 使用效果。