WO2024022063A1 - H5页面交互和编辑的方法与设备、计算机可读介质 - Google Patents

Abstract

本公开提供了一种第五代互联网超文本标记语言H5页面交互的方法，其包括：接收对H5页面的目标元素的目标交互操作；与所述目标交互操作绑定的目标组件执行对应的目标组件行为。本公开还提供了一种H5页面交互的设备、H5页面编辑的方法与设备、计算机可读介质。

Description

H5 页 面交 互和编 辑的 方法 与设备 、 计算机 可读介 质 技术 领域 本 公开涉 及互 联网 技术领 域，特别 涉及 H5页面 交互 和编辑 的方 法 与设 备、 计算机可读 介质 。 背景 技术

H5 （HTML5, 第 五代互 联网 超文本 标记 语言 ）页面是 基于 HTML5 语 言的页 面， 其被广泛用 做广 告、 邀请函 等。

— 些 相关 技术 中的 H5页面 仅具 有页面 静态 展示 功能 ，而没有实现 动态 交互 逻辑 的能力 ，例如 ， H5页面无法 将表 单的数 据向 服务 器发送, 不 能获取 页面 内组件 的数 据， 不能控制页 面内展 示 内容的 变化等 。 发 明内容 本 公开提 供一 种 H5页面 交互和 编辑 的方 法与设 备、计算 机可读 介 质 。 第 一方面 ， 本公开 实施例 提供 一种 H5页 面交互 的方 法， 其包括: 接 收对 H5页面 的 目标元 素的 目标交 互操 作； 与 所述 目标交 互操 作绑定 的 目标组 件执行 对应 的目 标组件 行为 。 在 一些 实施例 中， 所述目标组 件行 为包括 以下 至少 一项 ： 路 由跳转 、 指令执 行、 请求发 送、 事件触发。 在 一些 实施例 中， 所述目标 组件行 为包 括事 件触 发； 在所述 与所 述 目标交 互操 作绑 定的 目标组 件执 行对应 的 目标组 件行 为之后 ， 还包 括 ： 所 述目标 组件 将触 发的事 件上 报事 件总线 。 在 一些 实施例 中， 本公开实施 例的 H5页 面交互 的方 法还 包括 ： 响 应组 件监 听所述 事件 总线 ， 当监听到 订阅 的事件 时， 执行与订 阅 的事件 对应 的响应 组件 行为 。 在 一些 实施例 中， 所述响应组 件行 为包括 显示 行为 。 在 一些 实施例 中 ， 所述与所 述目标 交互 操作 绑定 的目标 组件 执行 对 应的 目标组 件行为 包括 ： 将 对应 所述 目标组 件行为 的 目标行 为代码 挂载 到所 述目标 组件 。 第 二方 面， 本公开 实施 例提供 一种 H5页 面编辑 的方 法， 其包括： 接 收对 H5页 面的 目标元 素的 交互选 择指 令和行 为选 择指 令；所述 交 互选择 指令 包括 目标交 互操 作， 所述行为选 择指 令包 括目标 组件 行 为 ； 将 与所 述目标 组件 行为 对应 的目标 组件 与所 述目标 交互 操作 绑定 。 在 一些 实施例 中 ， 所述目标 组件行 为包 括事 件触 发； 本公开 实施 例 的 H5 页面编 辑的 方法还 包括 ： 构 建事 件总线 ； 所述事 件总 线用于 接收 触发 的事件 ， 组件用 于监 听 所述总 线。 在 一些 实施例 中， 本公开实施 例的 H5页 面编辑 的方 法还 包括 ： 接 收对 响应组 件的 事件 响应指 令； 所述事件 响应指 令包 括事 件和 响应 组件 行为 ； 使 所述 响应组 件行 为对 应的 响应组 件订 阅所 述事件 ； 所述响 应组 件用 于在 监听 到订 阅的事 件时 执行所 述响 应组件 行为 。 在 一些 实施例 中，所述接 收对 H5页 面的 目标元 素的 行为 选择指 令 包括 ： 接收对 应目标 组件 行为 的目标 行为 代码 ； 所 述将 与所述 目标 组件 行为 对应 的目标 组件 与所 述目标 交互 操作 绑 定包括 ： 将所述 目标行 为代 码挂载 到所 述目标 组件 。 在 一些 实施例 中，所述接 收对 H5页 面的 目标元 素的 交互 选择指 令 和 行为选 择指 令包括 ： 接 收对 预置 的所述 目标 交互操 作和 所述 目标组 件行 为的选 择 O 在 一些 实施例 中， 本公开实施 例的 H5页 面编辑 的方 法还 包括 ： 通 过模 板表达 式定 义动态 参数 。 第 三方面 ， 本公开 实施例 提供 一种 H5页 面交互 的设 备， 其包括: 一 个或 多个处 理器 ； 存 储器 ， 其上存储 有一个 或多 个计 算机程 序：

— 个 或多 个 I/O接口 ， 连接在所 述处 理器与 存储 器之 间， 配置为 实现 所述 处理 器与存 储器 的信 息交互 ； 当 所述 一个或 多个 计算 机程 序被所 述一 个或 多个 处理器 执行 时， 能实 现本 公开 实施例 的任 意一种 H5 页面交 互的 方法 。 第 四方面 ， 本公开 实施例 提供 一种 H5页 面编辑 的设 备， 其包括: 一 个或 多个处 理器 ； 存 储器 ， 其上存储 有一个 或多 个计 算机程 序： 一 个或 多个 I/O接 口， 连接在 所述处 理器 与存 储器之 间， 配置为 实现 所述 处理 器与存 储器 的信 息交互 ； 当 所述 一个或 多个 计算 机程 序被所 述一 个或 多个 处理器 执行 时， 能实 现本 公开 实施例 的任 意一 种 H5 页面编 辑的 方法 。 第 五方 面， 本公开 实施 例提供 一种 计算 机可 读介质 ， 其上存 储有 计算 机程 序， 所述计算机 程序 被处理 器执 行时实 现： 本 公开 实施例 的任 意一种 H5页 面交 互的 方法 ，或实现本 公开实 施 例 的任意 一种 H5页 面编辑 的方 法。 附 图说明 附 图用来 提供 对本 公开 的进一 步理 解，并且 构成说 明书 的一 部分, 与详 细实 施例 一起 用于解 释本 公开 ， 并不构成 对本 公开 的限制 。 通过 参考 附 图对详 细实 施例进 行描 述， 以上和其它 特征 和优 点对本 领域 技 术人 员将 变得 更加显 而易 见， 在附 图中： 图 1为本 公开实 施例 提供 的一种 H5页 面交 互的 方法 的流程 图; 图 2为本 公开 实施例 提供 的另一 种 H5页面 交互 的方法 的流 程图 图 3为本 公开 实施例 提供 的一种 H5页 面编 辑的 方法 的流程 图； 图 4为本 公开 实施例 提供 的另一 种 H5页面 编辑 的方法 的流 程图 ； 图 5为本公 开实施 例得 到的 一种 H5页面的 编辑 过程 的逻辑 示意 图; 图 6为本 公开 实施例 得到 的一种 H5页 面的 构架示 意 图； 图 7为本 公开 实施例 提供 的一种 H5页 面交 互的 设备 的组成 框图 ； 图 8为本 公开 实施例 提供 的一种 H5页 面编 辑的 设备 的组成 框图 ； 图 9为本 公开 实施例 提供 的一种 计算 机可 读介质 的组 成框 图。 具体 实施方 式 为 使本 领域 的技术 人员 更好 地理解 本公 开的 技术 方案 ， 下面结合 附 图对本 公开 提供 的 H5页 面交 互和 编辑 的方法 与设 备、计算机 可读介 质进 行详 细描 述。 在 下文 中将参 考附 图更 充分 地描述 本公 开， 但是所示 的实施 例可 以 以不 同形式 来体 现， 且不应 当被 解释 为限于 本公 开阐 述的实 施例 。 反 之， 提供这 些实 施例 的目的 在于 使本 公开透 彻和 完整 ， 并将使本 领 域技 术人 员充 分理解 本公 开的 范围 。 本 公开 可借 助本 公开 的理 想示 意图 而参 考平 面图 和 /或截面 图进 行 描述 。 因此， 可根据制 造技 术和 /或容限来 修改 示例 图示。 在 不冲 突的情 况下 ， 本公开 各实施 例及 实施 例中 的各特 征可 相互 组合 。 本 公开 所使用 的术 语仅 用于 描述特 定实 施例 ， 且不意欲 限制 本公 开 。 如本公开 所使用 的术 语 “和 /或”包括 一个或 多个 相关列 举条 目的 任 何和所 有组 合。 如本公开所 使用 的单 数形式 “一个 ” 和 “该” 也意 欲 包括复 数形 式， 除非上下文 另外 清楚指 出。 如本公开所 使用 的术 语 “包 括” 、 “由 … …制成” ， 指定存在所 述特 征、 整体、 步骤、 操作、 元件 和 /或组件， 但不排除存 在或 添加一 个或 多个其 它特 征、 整体、 步 骤 、 操作、 元件、 组件和 /或其群组。 除 非另 外限定 ， 否则本 公开所 用 的所有 术语 （包括技术 和科 学术 语 ） 的含义与 本领 域普通 技术 人员 通常 理解 的含义 相同 。 还将理解 ， 诸 如那些 在常 用字 典中 限定的 那些 术语 应当被 解释 为具 有与其 在相 关 技 术以及 本公 开的 背景下 的含 义一 致的含 义 ， 且将不解 释为具 有理 想 化 或过度 形式 上的含 义， 除非本公开 明确 如此 限定。 本 公开 不限于 附 图中所 示的 实施例 ， 而是包 括基 于制造 工艺 而形 成 的配置 的修 改。 因此， 附图中例 示的 区具有 示意 性属 性， 并且图 中 所示 区的 形状 例示 了元件 的区 的具体 形状 ， 但并不是 旨在 限制性 的。 第 一方 面， 本公开 实施例 提供 一种 H5页 面交互 的方 法。 本 公开 实施例 的方 法由加 载 H5（HTML5 ,第五 代互联 网超 文本标 记语 言 ）页面 的设备 （如终 端）执 行， 或也可 视为 由 H5 页面执 行； 从 而 ，用户可 通过对 设备 上显 示的 H5页面 进行 操作 实现一 些功 能， 也就 是 实现与 H5页 面的 交互 。 参 照图 1 , 本公开实施例 的 H5页面 交互 的方法 包括 ：

S10K 接收 对 H5 页面 的目标 元素 的目标 交互 操作 。 当 用户 通过 鼠标或 触摸屏 等，对设 备上显 示的 H5页 面中 的某个 元 素 （如某个 图标 ）进行 操作 （如点击 、 双击、拖动 等）时 ， H5页面 （或 者 说设备 ） 会接收到 针对 目标 元素 的目标 交互操 作。

S102 、与目标 交互操 作绑 定的 目标组 件执 行对 应的 目标组 件行为 。 对 目标 元素 的目标 交互 操作 ， 是预先与 一定 的目 标组件 行为 （如 输入 密码 ）绑定 的， 故 H5页 面接 收到 目标交 互操作 后， 与目标 组件行 为对 应 的目标 组件 （如密码组 件） 即会执行 以上的 目标 组件行 为 （如 准 备接收 密码 ） , 从而实现 H5页 面的 交互 。 应 当理 解， 目标组件行 为还 可有一 些相 关参 数， 而目标组件 行具 体 可根据 这些 参数执 行。 应 当理 解， H5页 面中可 同时 有多 个元素 ， 其中可以 只有 部分元 素 为 目标元 素， 即只有部 分元 素可进 行交 互； 也可以是 H5页 面中 所有 的 元 素均为 目标 元素 ， 即所有元 素均可 进行 交互 。 应 当理 解， 针对不 同 目标元 素的相 同 目标交 互操 作， 应视为 不同 的 目标交 互操 作， 其可绑 定不 同的 目标组 件行 为 （如对 A元素 的单击 和 对 B 元素 的单击 可引起 不 同行为 ） ； 当然， 若针对不 同目标 元素 的 相 同目标 交互 操作绑 定不 同的 目标组 件行 为， 也是可行的 （如对 A 元 素 的单击 和对 B元素 的单 击都 可引起 同一 行为 ） 。 应 当理 解， 对每个 目标 元素 的每个 目标 交互 操作 ， 可只有一 个绑 定 的目标 组件 行为 （即对目标 元素 的每 个操作 只能 引起 一个 行为 ） ， 也 可有多 个绑 定的 目标组 件行 为 （即对目标元 素的 每个 操作可 同时 引 起 多个行 为） 。 应 当理 解， 对每个 目标 元素 ， 其可以只 有一 个目 标交互 操作 （即 目 标元素 可只 对一 种操 作产生 反应 ） ， 也可有多个 不同 的目标 交互 操 作 （即目标元 素可 对多种 不 同的操 作产 生反应 ） ； 而且， 每个目标 元 素 的多种 不同 的 目标交互 操作 可绑 定相 同的 目标组 件行 为 （即对目标 元 素的多 种不 同的 操作可 引起 相同 行为 ） ， 也可绑定不 同的 目标组 件 行 为 （即对目标元素 的多 种不 同的操 作可 行为 不同的 行为 ） 。 本 公开 实施 例中 ， 针对目标 元素 的目标 交互 操作 是与 目标组 件行 为 预先绑 定的 ， 故通过对 目标 元素 进行 目标交 互操 作， 可以引发 目标 组 件执行 相应 的目标 组件 行为 ，也就是对 H5页 面中 元素 的操作 可以 引 起 H5页 面的反 馈， 从而可实现 通过 H5页 面进行 交互 。 在 一些 实施例 中， 目标组件行 为包 括以 下至少 一项 ： 路 由跳 转、 指令执 行、 请求发 送、 事件触发。 作 为本 公开 实施例 的一 种方 式， 示例性 的， 目标组件 行为可 包括 路 由跳转 （即 H5页 面跳转 至其 它路 由） ， 指令执行 （即 H5页面 向外 部 的其它 主体 发出 特定 的控制 指令 ， 如向终端 发出 指令 要求终 端进 行 振 动等操 作） ， 请求发送（即 H5页 面向 服务 器发送 异步 请求 ， 如通过 HTTP 向服 务器 发送搜 索请 求并获 取相 应的 结果数 据） 、事件触发 （即 H5 页 面触发 进行 一定 的事件 ， 如触发输 入密 码的 事件 ） 。 应 当理 解，目标组 件行 为可 以是 H5页面 的任 何组件 能进 行的任 何 行 为， 而不限 于以上 的具 体例 子。 在 一些 实施例 中 ， 参照图 2 , 目标组件行 为包括 事件 触发 ； 在与 目标 交互 操作 绑定 的目标 组件 执行对 应的 目标组 件行 为（S102）之后 ， 还包 括：

5103 、 目标组件 将触 发的事 件上 报事件 总线 。 作 为本 公开实 施例 的一种 方式 ， 当目标组件 行为 包括事 件触 发时 ， 在 触发事 件之 后， 目标组件还 可将 事件 上报给 预设 的事 件总线 （即上 报 总线某 事件 已经 发生 ） ， 从而可让其 它组件 通过 事件 总线获 知事 件 的 发生 ， 在全局范 围内实 现， 实现组件 之间 的相互 控制 、 参数传递 ， 也 就是实 现组 件间 的联动 。 在 一些 实施例 中， 参照图 2, 本公开实 施例 的 H5页面 交互的 方法 还包 括：

5104 、 响应组件 监听 事件 总线 ， 当监听到 订阅 的事件 时， 执行与 订 阅的事 件对 应的 响应组 件行 为。 作 为本 公开实 施例 的一 种方 式， 部分组 件 （响应组件 ） 可能需要 在 发生一 定的 事件 后进行 响应 ， 故其可监 听事 件总 线中 的数据 ， 并在 监 听到 自身预 先订 阅的事 件 已经发 生时 ， 执行与订 阅的 事件对 应的 响 应 组件行 为， 实现组件的 联动 。 应 当理 解， 响应组件应 当是 持续对 事件 总线 进行监 听的 ， 并在任 何监 听到 相应 事件 的情况 下作 出响应 ； 因此， 以上 S103步 骤和 S104 步 骤的编 号和 描述 顺序 ， 并不表示 响应组 件是 在事 件已 经上报 事件 总 线 之后才 开始 对事件 总线 进行 监听 。 应 当理 解， 可以 同时存 在多 个响应 组件 对事 件总线 进行 监听 ， 它 们 订阅 的事件 可相 同或不 同； 即， 可以有多个 响应 组件 订阅一 个事 件 （如一个 事件 可引 起多个 响应 组件 的联动 ） ， 也可以有 一个响 应组 件 订 阅多个 事件 （如多个事 件均 可引起 一个 响应组 件的 联动 ） 。 应 当理 解， 如果不 存在任 何响 应组 件， 也是可 行的 。 在 一些 实施例 中， 响应组件行 为包括 显示 行为 。 作 为本 公开实 施例 的一 种方 式， 由响应组件 对事件 进行 响应 而发 生 的响应 组件 行为 ，具体可以 是能影 响显 示的 内容 的显示 行为 ；例如， 显示 行为 可包 括但不 限于 展示 数据、显示 新内 容、隐藏 已显示 的内 容、 改变 显示 样式 （如显示高 亮、 闪烁等效 果等 ） 、 改变显示大小 （如进 行缩 放等 ） 。 应 当理解 ，响应组 件行为 可以 是 H5页面 的任何 组件 能进行 的任 何 行 为， 而不限 于以上 的具 体例子 。 在 一些 实施例 中， 与目标交 互操作 绑定 的 目标组件 执行 对应 的目 标组 件行 为 （S102） 包括：

S1021 、 将对应 目标组 件行为 的 目标行 为代码 挂载 到目标 组件 。 作 为本 公开实 施例 的一 种方 式， 用户还 可提 前输入 针对 扩展 的目 标组 件行 为 （扩展行 为） 的代码 （目标 行为代 码） ， 从而 H5页面可接 收该 目标 行为 代码 ， 并将其挂 载到 目标组 件 ， 以实现目 标组件 与 目标 组件 行为 的对 应。 例 如， 可将需要扩 展的 行为 编写成 一段 代码 ， 并记录到 文本 文件 中 ， 从而后续 可选择 之前 编写 的这段 代码 ， 实现逻辑 挂载 。 第 二方面 ， 本公开 实施例 提供 一种 H5页 面编辑 的方 法。 本 公开 实施例 的方 法由编 辑 H5 页面的设 备执 行， 或也可 视为 由 “H5 页 面编辑 器 （设计器） ”执 行； 从而， 用户可通过 对设 备进行 操 作 （或者说使用 “H5 页面 编辑 器） ， 构建得到所需的 、 具有交互 能力 的 H5页面 。 参 照图 3 , 本公开实施例 的 H5页面 编辑 的方法 包括 ：

S20K 接收对 H5 页面 的目标 元素 的交互 选择 指令和 行为 选择 指 令 。 其 中， 交互选择指 令包 括目标 交互 操作 ， 行为选择 指令 包括 目标 组件 行为 。 用 户可 对 H5 页面编 辑器 进行 操作 ， 为 H5页面中 的目 标元素 选定 目 标交互 操作 和 目标组件 行为 ， 即， 选定目标 元素 在受 到目标 交互 操 作 时， 应当引 发的 目标组 件行 为。

S202 、 将与目标 组件 行为对 应的 目标 组件与 目标 交互操 作绑 定。 由此， H5页 面编 辑器 可在接 收到 用户 的选择 指令 （交互 选择指 令 和 行为选 择指 令） 后， 根据选择指 令， 将目标元素 的 目标交互 操作 与 目 标组件 行为 绑定 ；从而在后 续用户 对 H5页面 的目 标元素 的进 行目标 交 互操作 时， 可引起目标 组件 执行该 目标 组件 行为 。 应 当理 解， 用户给出以 上交 互选择 指令 、 行为选 择指令 等具 体方 式 是多样 的。 例如， 可以是在 用户 选定 H5页 面上 的目标 元素 后， 即给 出 弹窗 ， 从而用户 可在弹 窗的 下拉 菜单 中选择 与该 目标 元素相 关的 目 标 交互操 作和 目标 组件 行为； 或者， 也可以是 通过 输入 代码等 其它 的 方 式实现 交互 选择指 令、 行为选择指 令的 输入 。 应 当理 解， 目标组件行 为需 要一些 相关 参数 ， 而这些相 关参 数也 可 在行为 选择 指令 中一并 输入 。 应 当理 解，本公 开实 施例 的 H5页 面编 辑的 方法 中，还可 包括编 辑 H5 页 面的 显示 内容、 元素等的步 骤， 或者说 H5 页面编 辑器 还应具 有 编 辑 H5 页面 的显示 内容 、 元素等功 能， 此不再 详细 描述 。 在 一些 实施 例中 ， 参照图 4, 目标组件行 为包括 事件 触发 ； 本公 开 实施例 的 H5页面 编辑 的方法 还包 括：

S200 、 构建事件 总线 。 其 中， 事件总线用 于接 收触发 的事 件， 组件用 于监 听总线 。 作 为本 公开实 施例 的一 种方式 ，若在 H5网页 中需要 不同 组件通 过 事 件实现 联动 ， 则可预先构 建事 件总线 。例如 ， 可在编辑 H5网 页的其 它 内容之 前， 首先构建事 件总 线。 在 一些 实施例 中， 参照图 4, 本公开实 施例 的 H5页面 编辑 的方法 还 包括 ：

S203 、 接收对响 应组 件的事 件响 应指令 。 其 中， 事件响 应指 令包括 事件 和响应 组件 行为 。

S204 、 使响应组 件行为 对应 的响 应组件 订阅 事件 。 其 中， 响应组件用 于在监 听到 订阅 的事件 时执 行响应 组件 行为 。

H5 页面 编辑 器接 收用 户对相 互关 联 的事件 和响 应组 件行 为的选 择 （事件响应 指令 ） ， 并根据事件 响应指 令使 相应 的响应 组件 订阅 相 应 的事件 ， 从而可 实现组 件之 间的 相互控 制、 参数传递 ， 也就是在 后 续实 现组 件的 联动 。 在 一些 实施例 中，接收对 H5页 面的 目标 元素 的交互 选择 指令和 行 为选 择指 令 （S201） 包括：

S2011 、 接收对预 置的 目标交 互操 作和 目标组 件行 为的选 择。 作 为本 公开实 施例 的一 种方 式， 可以是 在编 辑器 中 “预置” 多种 候选 的交 互操 作和组 件行 为， 从而在编 辑 H5页面 时， 只要直接 从中选 择 （如通过下 拉菜 单选择 ） 出相应 的目标 交互 操作 和目 标组件 行为 即 可 。 应 当理 解， 本公开 实施 例中 的其它 操作 ， 例如构建 总线 等， 也可 通过 在编 辑器 （设计器） 中选择预置 的指 令完成 。 由 此， 本公开实施 例可 通过对 编辑 器的 简单 操作 ， 即制备出 具有 交互 能力 的 H5页面 ， 相对于一些 相关 技术 中通过 输入代 码编 辑 H5页 面 的方式 ， 本公开 实施例 的方 式可 大大减 少工 作量 ， 同时大幅 降低 对 用户 专业 水平 的要求 。 在 一些 实施 例中 ， 接收对 H5 页面 的目 标元 素的 行为 选择 指令 （S201） 包括：

S2012 、 接收对应 目标 组件行 为的 目标 行为代 码。 将 与目 标组件 行为 对应 的目标 组件 与 目标交 互操作 绑定 （ S202） 包括 ：

S2021 、 将目标行 为代 码挂载 到 目标组件 。 作 为本 公开实 施例 的另 一种方 式 ， 除了选择 预置 的目标 交互 操作 与 目标组 件行 为相 互关联 外， 还可 “自定 义” 目标组件 行 ， 即输入代 表 应进行 的 目标组 件行 为 （扩展行为） 的目标行为 代码 ， 并将目标 行 为 代码挂 载到 目标组 件； 从而， H5网页运 行时 目标行 为代 码可 动态编 译 并混入 到对 应的 目标行 为组 件中 ， 通过 onListener监听器挂载 到 目 标 行为组 件的 触发方 式上 。 由此，本 公开实 施例 编辑 的 H5页 面的 扩展 性好 ，其中组 件与行 为 执 行可任 意组 合， 从而其 可实 现更丰 富的 交互 内容、 交互逻辑 行为。 在 一些 实施例 中，本 公开实 施例 的 H5页面 编辑 的方法 还包括 ：通 过 模板表 达式 定义动 态参 数。 本 公开 实施 例中 ， 还需要定 义很 多参数 ， 而这些 参数可 为 由模板 表 达式定 义的 动态参 数， 即参数也可 以是 动态 的。 例 如， 通过模板表 达式 定义 动态参 数 ， 从而运行 时可使 用表 达式 换 算出上 下文 中所 需的变 量， 得到需要的 动态 参数 。 示 例性 的， 作为本公开 实施 例的一 种具 体方 式， 下面对本公 开实 施 例的编 辑 H5页面 和与 H5页面 进行 交互 的过程 进行 详细 描述 。 参 照图 5 , 本公开实施例 的主 要流程 可如 下：

A01 、 构建全 局的事 件总 线， 提供基 础联 动能力 。 例 如， 通过前端框 架 VUE 提 供全 局的事 件总 线能 力。 在 应 用 程 序 启 动 时 默 认 启 动 全局 的事 件 总 线 ， 即 Var EventBus=new Vue（）。

A02 、 为元素 添加触 发组 件行 为的交 互操 作。 例 如， 可在 H5页面 编辑 器中 选择一 个元 素 （目标元素） 。 之 后， 选择新增行 为， 从下拉菜单 中具 体选 择单击 、 双击等 作为 触 发组件 行为 的交 互操 作 （目标交互操 作） ， 并具体选择路 由跳转 、 指 令执行 、请求 发送 、事件触 发等 预置 的组件 行为 （目标组 件行 为）。 例 如，组件 行为 具体 可以是 可以 是触 发重置 密码 （resetPassword） 的 事件 。 同 时， 还可填入组 件行 为对 应参数 。 例如， 当组件行为 是事 件触 发 时， 则可填 入对应 的事 件名和 事件 参数 等。 例 如， 以上重置密 码的事 件的 名称 可为 " user. resetPassword ” 。 之 后， 进行动态参 数绑 定， 将组件 绑定 到选 择的组 件行 为 (如与 组件 行为 的名 称绑定) ， 并进行 参数设 置。 其 中， 对于预置的 组件 行为 ， 其义参数 类型 和内容 值也 可以 是静 态 的不变 化的 预定值 ， 具体可 包括参 数的 数据类 型、 数量、 值等。 其 中， 参数也可 以是动 态的 ， 例如， 通过模 板表达 式定 义动 态参 数 ， 运行时使 用表达 式换 算出 上下 文中所 需的 变量 ， 从而得到 需要 的 动态 参数 。 例 如， H5页 面上 下文 对象是 页面 缓存对 象 ( pageContext) , 而需 要 传 递的 参 数 是用 户 标 识 ( userid ) , 则可以使 用 模 板表 达 式 ( {pageContext. userid} }作为该这个参数的定义。 由 此， 在实际运行 时， 可使用模板 字符 串模 板编译 这个 模板 表达 式 ：

Const userld=_.template(' ( (pageContext. userid} } pageContext)； 从 而， 使得实际 的 userid参数是动态 的， 会随着 pageContext上下 文 中的 内容一 起变化 。 其 中， 用户还可 自定义组 件行 为， 也就是添加 “扩展 行为” 。 例 如， 用户在选择 元素 后， 还可 以点击 添加 新的 行为 ， 并输入要 添加 的组 件行 为的 名称 ， 设置参数 配置 ， 同时输入 、 编辑相应 的行 为 代码 (以下 称代 码块) 。 其 中，代码 块可 动态存 储。例 如，小型 代码块 可 自动嵌入 全局 DSL 中 ， 而较大代 码块可 通过 文件方 式存 储在 服务器 端。 由 此，在 H5网页 运行 时，代码 块将 动态编 译并 混入 到对应 的组 件 中 ， 组件通过 onListener监听器 挂载 该代 码块对 应的 行为到 组件 的触 发上 ， 扩展行 为的挂 载完 成。 例 如， 扩展行 为是一 段 javascript代码逻辑， 前端编 程框 架具备 将 这 一段代 码逻 辑混 入到执 行函 数中 的能 力， 从而可 以实 现行为 的 自定 义 。 具 体的 ， 可以将需 要扩 展的 行为编 写成 一段 代码 ， 并记录到 文本 文件 中 ， 而在设计 时指定 目标 元素 ， 故后续可 选择 之前 编写 的这段 代 码, 实现逻 辑挂 载。 在 程序 运行时 ， 程序框 架将代 码文 件中 的代码 读取 出来 ， 进行字 符 串转义 ， 形成逻 辑代码 ， 混入到 目标 元素行 为处 理函 数中 ， 当对目 标 元素进 行 目标交互 操作 时就 可以执 行响 应扩展 的行 为。

A03 、 设置响 应组件 订阅 的事件 ， 并设置 响应组 件行 为。 例 如， 可设置响应 组件 默认监 听页 面数据 变化 ( $SetPageData) , 从而 当任 何页 面内数 据发 生变 化时 ， 响应组件进 行响 应并被 触发 。 例 如，可默认 数据 将使 用 vuex保 存到页 面缓 存对 象 ( pageContext) 中 ， 由此， 在页面 设置 时会预 置默 认数据 ， 通过监 听数据 变化 可以 完 成 各类响 应组 件行为 。 例 如，响应组 件行 为可为 显示 表达 式。例如为 { {isShowElement} } , 将按 照页 面内 缓存 的数据 ，编译计 算出 结果 来决定 组件 是否进 行显 示。 例 如， 值表达式可 形如 { {page. element. Count} } , 并可将计算出实 际数 据结 果显 示到对 应组 件中 。 例 如 ， 响应 组件 可 使用 EventBus.$on( ' user. resetPassword ' , (params)=>(//do something})方式完成事 件订 阅。 其 中， 响应组件也 可绑 定其 它的响 应组 件行 为， 如组件 实时 监听 状 态数据 ， 控制自 身的显 示行 为， 包括控制展 示数 据、 是否显示 、 显 示 样式等 。 其 中， 还可实现多 个不 同响 应组件 均进 行响 应， 因为页面缓 存对 象 ( pageContext) 对于整个 H5页面 的所有 组件 是共享 的。 其 中， H5页 面内 的多个 组件 可以 订阅相 同的 事件 ， 从而当事件 触 发 时， 订阅相 同事件 的多 个组 件将 同时响 应事件 。 例 如， H5页 面中 有两个 组件 ， 组件 1用于 显示 当前设 备的 状态为 开 机或关 机， 组件 2用于 显示 当前 设备 的名称 ， 而两个组 件绑 定的数 据 都是当 前设 备 ( currentDevice) 。 因 此，当 pageContext. currentDevice中的当前设备由 A 变成 B时， 则 两个组 件会 同时响 应数 据的变 化， 组件 1 的设备状 态会 变化 ， 组件 2 显示 的当前 设备 也会 变成 B, 即多个组件 都会 自动响 应数据 的变 化, 完 成自身 数据 绑定 的逻辑 。 其 中， 响应组件行 为也 可以 是用户 自定 义的 ， 如用户可 在组 件行 为 面板 中填入 事件 名， 并勾选 对应处 理行 为来 完成事 件响 应。 参 照图 6, 本公开实 施例 的方法 编辑 得到 的 H5 页面中 ， 时间总线 可 传输触 发的 时间 、 订阅的时 间、 取消的 订阅 等。 而 在数 据驱动 层面 可包 括逻 辑控制 数据 、 页面加 载数据 、 组件式 样 数据等 数据 ， 而目标组 件进 行 目标组 件行为 时可 更新 数据 ， 而响应 数 据的变 化可 传递给 各响 应组 件 (图 6中 多个响 应组 件的框 体表 示不 同 的响应 组件) 。

A04 、 H5 页面运 行过 程中 ， 若用户对 元素执 行单 击、 双击等被选 定 的交互 操作 ， 则可触发 相应 的组件 执行 对应 的组件 行为 。 例 如 ， 当用户 点 击 当 前 的元 素 时 ， 可执 行 重 置密 码 事 件 EventBus.Semit ( 'user. resetPassword' ,( 'pwd' : ' passsword' })的触 发 。 其中， 事件名 称可 与需要 触发 的事 件的名 称保 持一 致， 响应方法 的 第一个 参数 就是 事件参 数 ， 事件的处 理函数 决定 这个 组件接 下来 的 交 互行为 。

A05 、 响应组 件监听 事件 总线 中数据 的变 化， 从而在事件 触发后, 响应 事件 而作 出响应 行为 。 例 如， 响应组件可 以是 控制 显示 隐藏、 改变显示 的大小 样式 以及 展 示数据 等。 第 三方 面，参照图 7,本公开实 施例 提供一 种 H5页面交 互的 设备 ， 其 包括: 个或多 个处理器; 存储器 ， 其上存储有 --个或多个计算机 程序： 一个或 多个 I/O接口， 连接在处理器 与存储器 之间， 配置为实现 处理 器与存储器 的信息交 互； 当 …个或 多个计算 机程序被 一个或 多个处理 器执行时 ， 能实现本 公开 实施例的任 意 …种 H5页面交互的 方法 ° 第四方 面 ,参照图 8 ,本公开实施例提供一种 H5页面 编辑的设 备 , 其包 括： 一个或 多个处理器 ； 存储器 ， 其上存储有一个 或多个计 算机程序 : 一个或 多个 I/O接口， 连接在处理器 与存储器 之间， 配置为实现 处理器 与存储器 的信息交 互； 当一个 或多个计 算机程序 被一个 或多个处理 器执行 时， 能实现本 公开 实施例的任 意一种 H5页面编辑 的方法 。 第五方 面， 参照图 9, 本公开实施例提 供一种计 算机可读 介质， 其上 存储有计算 机程序 ， 计算机程序被处理 器执行时 实现： 本公开 实施例的 任意 …种 H5页面交互 的方法，或实现本 公开实施 例的 任意 …种 H5页面编辑 的方法 ° 本公开 实施例 中， 处理器为具有数 据处理 能力的器 件， 其包括但 不限 于中央处 理 B （CPU） 等； 存储器为具有数据存储能力 的器件 ， 其包 括但不限 于随机存取 存储器（RAM, 更具体 如 SDRAM 、DDR 等）、 只读 存储器 （ROM） 、 带电可擦可编程只读存 储器 （EEPROM） 、 闪 存 （FLASH ） ； I/O接口 （读写接口）连接在处理器与存储器 间， 能实 现存 储器与处 理器的信 息交互， 其包括但不限于事 件总线 （Bus） 等。 本领域 普通技术 人员可以 理解，上文中所 公开的全 部或某些 步骤、 系统 、 装置中的功能模块 /单元可以被实施为软件 、 固件、 硬件及其适 当的 组合。 在硬件 实施方式 中， 在以上描述中提 及的功能 模块/单元之 间的划 分不 一定对应 于物理组 件的划分 ； 例如， 一个物理组件可 以具有多个 功能 ， 或者一个功能或岁 骤可以 由若干物理 组件台作 执行。 某些物 理组件或 所有物理 组件可 以被实施 为由处理 器， 如中央处 理器 （CPU） 、 数字信号处理器或微处 理器执 行的软件 ， 或者被实施 为硬 件， 或者被实施为 集成电路 ， 如专用集成电路 。 这样的软件可 以 分布 在计算机 可读介质 上 , 计算机可读介质 可以包括 计算机可 读介质 （或非暂时性 介质） 和通信介质 （或暂时性介质 ） o 如本领域普通技 术人 员公知的 , 术语计算机可读介 质包括在 用于存储 信息 （诸如计算 机可 读指令、 数据结构、 程序模块或其它 数据） 的任何方法 或技术 中 实施 的易失性 和非易失 性、 可移除和不可 移除介质 。 计算机可读介质 包括 但不限于 随机存取存 储器 （RAM，更具体 如 SDRAM 、 DDR等 ）、 只读 存储器 （ROM） 、 带电可擦町编程只读存 储器 （EEPROM） 、 闪 存 （FLASH） 或其它磁盘存储 器； 只读光盘 （ CD-ROM） 、 数字多功 能盘 （DVD） 或其它光盘存 储器； 磁盒、 磁带、 磁盘存储或其它 磁存 储器 ； 可以用于存储期 望的信息 并且可 以被计算机 访问的任 何其它 的 介质 。 此外， 本领域普通技术人 员公知 的是， 通信介质通常 包含计算 机可 读指令、 数据结构、 程序模块或者诸 如载波或 其它传输 机制之类 的调制 数据信号 中的其它 数据， 并且可包括 任何信息 递送介质 o 本公开 已经公开 了示例 实施例， 并且虽然采用了具 体术语 ， 但它 们仅用 于并仅应 当被解释 为一般说 明性含义 ，并且不用于 限制的 目的。 在一 些实例中 ，对本领域技术人 员显而易 见的是 ，除非另外明确指 出 , 否则 可单独使用 与特定 实施例相结 合描述 的特征、 特性和/或元素， 或 可与其 它实施 例相结 合描述的 特征、 特性和 /或元件组合使用 。 因此, 本领域 技术人 员将理解 ， 在不脱离由所 附的权利要 求阐明 的本公开 的 范围 的情况下 ， 可进行各种形式和 细节上 的改变。

Claims

权利 要求

1、 一种第五代互 联网超文本 标记语 言 H5页面 交互的方法 ， 其包 括： 接收对 H5页面的 目标元素 的目标交 互操作； 与所述 目标交互 操作绑定 的目标组 件执行对 应的目标组 件行为 。

2、 根据权利要求 1所述的方法 ， 其中， 所述目标组件行为包括 以 下至 少一项： 路由跳 转、 指令执行、 请求发送、 事件触发 。

3、 根据权利要求 1所述的方法 ， 其中， 所述目标组件行为包括 事 件触 发； 在所述与所述 目标交互 操作绑定 的目标组 件执行对 应的 目标 组件 行为之后 ， 还包括： 所述 目标组 /件将触发的事件上报事件 总线。

4、 根据权利要求 3所述的方法 ， 其中， 还包括: 响应组 件监听所 述事件总 线， 当监听到订 阅的事件 时， 执行与订 阅的 事件对应 的响应组件 行为 o

5、 根据权利要求 4所述的方法 ， 其中， 所述响 应组件行 为包括显 示行为。

6、 根据权利要求 1所述的方法 ， 其中， 所述与所述目标交互操 作 绑定 的目标组件 执行对应 的目标组 件行为包 括： 将对应 所述目标 组件行为 的目标行 为代码挂 载到所述 目标组件 。

7、 一种 H5页面编 辑的方法 ， 其包括： 接收对 H5页面的 目标元素 的交互选 择指令和 行为选择指 令；所述 交互 选择指令 包括目标 交互操作 ， 所述行为选择指 令包括 目标组 /件行 为； 将与所 述目标组 件行为对 应的 目标组件与所 述目标 交互操作绑 定。

8、 根据权利要求 7所述的方法 ， 其中， 所述目标组件行为包括事 件触 发； 所述方法还包括 ： 构建事 件总线 ； 所述事件总线用于 接收触 发的事件 ， 组件用于监 听所述 总线。

9、 根据权利要求8 所 述的方法 ， 其中， 还包括: 接收对 响应组件 的事件响 应指令 ； 所述事件响应指令 包括事件 和 响应组 件行为 ； 使所述 响应组件 育为对应 的响应组 件订阅所 述事件 ； 所述响应组 件用于 在监听 到订阅的事 件时执行 所述响应 组件行为 。

10s 根据权利要求 7所述的方法， 其中， 所述接 收对 H5页面的目标 元素的行 为选择指 令包括：接收对应 目 标组件 行为的 目标行为代 码; 所述将 与所述 目标组件行 为对应 的目标组 件与所述 目标变互 操作 绑定 包括： 将所述目标行 为代码挂 载到所述 目标组件 。

11、根据权利 要求 7所述的方法， 其中， 所述接收对 H5页面 的目 标元 素的交互选 择指令和 行为选择 指令包括 ： 接收对 预置的所 述目标交 互操作和 所述目标组 件行为 的选择。

12、 根据权利要求 7所述的方法 ， 其中， 还包括: 通过模 板表达式 定义动态 参数。

13> - -种 H5页面交互的设备， 其包括：

… •个或多个处理器 ； 存储器 ， 其上存储有 …个或 多个计算机 程序： 一个或多 个 I/O接口， 连接在所述处 理器与存储 器之间 ， 配置为 实现 所述处理器 与存储器 的信息交 互； 当所述 一个或 多个计算机 程序被 所述一个或 多个处 理器执行 时， 能实 现权利要 求 1至 6中任意 一项所述 的 H5页面 交互的方法 。

14、 一种 H5页面编 辑的设备 ， 其包括：

_一个或多个处理 器； 存储器 ， 其上存储有一个 或多个计 算机程序 ；

- — 1、或多个 I/O接口， 连接在所述处理器与存储器 之间， 配置为 实现 所述处理器 与存储器 的信息交 互 ; 当所述 一个或 多个计算机 程序被所 述一个 或多个处 理器执行 时， 能实 现权利要求 7至 12中任意 一项所述 的 H5页面编 辑的方法 。

15、 …种计 算机可读 介质， 其上存储有 计算机程 序， 所述计算机 程序被 处理器执 行时实现 ； 权利要 求 1至 6中任意 -- -项所述的 H5页面交互的方法，或实现权 利要 求 7至 12中任意一项所述 的 H5页面编 辑的方法 。

19