Skip to content

Web 小程序开发

该页面旨在指导开发者如何开发 Web 小程序类型的插件包。

危险

当插件的 Web 页面(包括 Web小程序通用服务 )打开时,工业示教器上的物理按钮以及快捷键将会失效。

如需在插件中启用快捷按键,请参考:启用快捷按键

关于 Web 小程序

Web 小程序是什么

Web 小程序是指开发者根据自己的需求,在符合 web 开发规范的情况下,开发出的除 AgileLink 内已有页面之外的其他页面。

创建 Web 小程序

目前我们提供使用标准前端工程来创建一个 Web 小程序,在此处的示范中,我们会创建一个 Web 小程序类型的插件,该插件的功能是在页面显示 “Hello Agilebot!”。

步骤一:创建插件文件夹

首先我们需要创建一份插件基本文件夹,该文件夹需包含一个 config.json 配置文件和前端工程文件,我们建议使用 src 作为前端工程的文件夹名称。

您可以从头开始手动创建,也可以使用插件开发包仓库中 "demo" 目录下的模板进行修改。

提示

下文中的 HelloAgilebot 就是我们即将创建的 Web 小程序的插件名。

目录结构:

  • HelloAgilebot
    • config.json
    • src
      • index.html
index.html
html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Agilebot!</title>
  </head>
  <body style="background-color:#f5f6fa;">
    <p style="font-size: 10vh;text-align: center;margin-top: 20%;">
      Hello Agilebot!
    </p>
  </body>
</html>
config.json
json
{
  "name": "HelloAgilebot",
  "type": "webMiniProgram",
  "description": "显示 Hello Agilebot!",
  "version": "0.1",
  "url": "index.html"
}

步骤二:打包、安装

插件打包请参考打包与安装

步骤三:访问页面

下面将介绍两种方式访问之前制作的页面。

  • 方法 1:在插件管理中找到插件名,点击指南针按钮访问。
  • 方法 2:在 应用-Extension 菜单中,找到插件名,点击可访问。