Download to read offline
Uploaded byiflytek
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
文档讨论了生成 H5 页面工具的背景、目标、架构及实现，并分析了当前的效果与局限性。提供了一种可提高交互开发效率的方法，以减少开发周期和错误。然而，该工具在功能和易用性方面仍存在不足，未来的发展方向包括扩展功能和改善用户体验。
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
- 1. web 端交互 抽象践——逻辑 实 运营 H5 面自 生成工具页 动 互动娱乐 - 广告彩 ：崔铃组 凯
- 2. ＋ ＋Part1 Part2Part3 背景和目标 原理和架实现 构 当前效果和未来 大纲
- 3. 01 件 目常软项 见问题 Part1 背景和目标
- 4. 遇到 下面你 过 些情况？这 吗 • 工程 大，且不断增大中庞 • 每次需要提交代 、 建、码 构 、 布，周期测试 发 较长 • 容易出错 • 一旦用 需求有任何 化都户 变 要重来一次 工程问题 • 冗余的重 性代 多复 码较 • 交互 代 占逻辑 码 95% • 代 可 用程度降低，可码 复 读 性下降 代 患码隐
- 5. 是否有 的过这样 “ 血泪史” xx哥 ~ ，不好意思， 有个重要客 ，要做临时 户 一个活 ，能不能 个忙～， 把需求 件动 帮 刚 邮 发 了，多 多 ！你 谢 谢 ~ 哦，今 加班 ～什 候要上晚 搞 么时 线 ？ D1 D3 月 底 越快越好 ~ 个月的用 数考核就靠 了哥～这 户 你 在 ～前天和 的活 ， 没 完 ？吗 你说 动 还 开发 吧 刚 客 版面太丑～要改，我 上 ！户领导说 马 发你啊 ( 槽老子都快做完了。。卧 ) 好的， 再改了， 上就 版本别 晚 发 了～ er…... 个月重点任 又没完成～这 务 D4 ～之前的活 不是 今天上 ？需求和上亲 动 说 线吗 次 xx 活 差不多 ，就改了一点点 ～能快点动 吧 啊 不 (u can u up…) 已 在 了， 上差不多可测试 经 测 晚 以～
- 6.
- 7.
- 8. 分析活 需求的动 化特点变 1 2 3 90% 60%10% 活 的文案、素材是 化最动 变 繁的，几乎必改频 面交互方式页 ( 滑 、 出动 弹 … ) ，也是 化 多的变 较 活 核心功能其 是 定的动 实 稳 ，比如 、抽 …订购 奖 素材与文案 交互方式 核心功能 易变 不变
- 9. 只有出现新玩法才需要研发介入！！ 只有出现新玩法才需要研发介入！！ 框架能否自动完成这部分任务的上线？ 框架能否自动完成这部分任务的上线？ “ 隔 化”离变 “一 ”单 职责 “ 注点分 ”关 离 研发 / 测试品产 / 运营 UI 注新功能关 / 能力的提供注用 交互步关 户 骤 注素材和布局、文案。关 90% 10%
- 10. 理想很美好 很骨感现实 • 只支持文案展示和 画播放动 •只能从 有模板中 取，而现 选 不能根据 品 精 定制产 设计 确 • 不支持定制化的 功能业务 有“ 子” 研现 轮 调
- 11. 03 定目设 标 Part1背景和目标
- 12. 制作自己的 H5 生成工具 • 支持全程无需部署，即开发 可上线 • 面、交互 在 可 化页 逻辑 线 视 配置 • 熟 工半天即可完成活 配练 动 置上线 目 功能标
- 13. 当前 方式开发 提需求提需求 交互设计交互设计功能开发功能开发 功能测试功能测试 功能上线功能上线 D1 D2 D? D?? D??? +
- 14. 期望方式 提需求提需求 交互设计交互设计 活动配置活动配置功能上线功能上线 D1 D2 D3 D3 +
- 15.
- 16. Web 的交互模式 • 用户对界面元素行进 操作 • 界面得到“事件”，并 理处 • 界面和后台 行交互进 • 界面返回 果结 用给 户 抽象 后的过 web 触 操作发 看到 果结 求数据请 返回数据 易 的交互部分变 定的稳 逻辑实现 收到事件 理事件处 收到事件 理事件处
- 17. 我 的抽象方案们 • Control及其子类： • 描述 面可交互元素页 • Event,Param,Action: • 描述用 行 、系户 为 统 行 和事件为 • 通 展过扩 Control 和 Action 来提供更多可能性， 足满 变 化的需求 核心抽象概念class 关键类图 Action自定义 ，扩展各种行为模式 自定义控件，实现各种业务相关的特殊逻辑 Control - id: int - type: string - events: List<Event> - actions: Dictionary<string,Action> - eventHandlers: List<Action> + init() + registAction(string, string, function): void + createAction(string, object, object, List<Action>): Action Action - context: Event - name: string - holder: Control - options: Dictionary<string,Param> - events: List<Event> - eventHandlers: List<Action> - returnValue: object + execute(): object UIControl - tagType: string - isTextNode: bool - text: string - imgSrc: string - backgroundImgUrl: string + init() Page - pageName: string - showType: string - showSeq: int + init() Event - sender: object - name: string - desc: string - params: List<Param> Param - name: string - type: string - desc: string - value: object - defaultValue: object CheckBoxControl - checkMode: int - checkBoxCtl: Control - checkStyles: List<string> + init() InitCheckBoxControl + execute(): object GetCheckStatus + execute(): object N 1 N 1 11 N 1 N1 1 1 N 1
- 18. 02 与 目程 合项 过 结 Part2 原理和架实现 构
- 19. 最大化利用 已有 源资 • 模板： •表示可供反 使用的复 一 面、 式 源组页 样 资 • 例：实 • 在模板基 上，增加础 了交互 配置的一逻辑 个可供 的 体访问 实 工程服 的概念为 务act V1整体业务流程 :UED人员 :开发人员 :最终用户 :运营人员 运营需求提出， 交互逻辑定义 «datastore» 模板、实例数据 存储 «datastore» 静态文件服务 切图，制作 HTML html上传 配置交互流 程 预览得到访 问地址 实 例 模 板
- 20. 03 系 整体架统构 Part2 原理和架实现 构
- 21. 广告彩铃运营 H5 生成工具架构 cmp逻辑架构 数据管理层 逻辑处理层 UI层 模板元数据管理 通用脚本、样式 管理 开发人员交互界 面 UED人员交互界 面 运营人员交互界 面 模板结构分析器 页面实例生成器 页面定制数据管 理
- 22. 流程关键 act 模板上传详细流程 数据库服务静态文件服务管理后台管理页面 :运营人员 选择要上传 html zip的压 缩包 进入模板管 理页面 上传到临时 目录 解压缩并且 分析每个文 件 html是否 文件 连同目录结 构拷贝到静 态文件服务 html将 的 body取出， 1拼成 个 html分析 中 css有哪些 js和 引用 分析页面中 DOM哪些 需 要作为 control处理 将裸的 textNode用 span包裹 将模板信息 写入数据库 否 是 act 模板实例编辑流程 数据库服务静态文件服务管理系统 :运营人员 点击创建实 例 新增实例， 写入数据库 进入实例编 辑界面 修改控件文 本 修改控件图 片 上传图片文 件到模板文 / ID件夹 实例 目录下 添加控件事 件和处理 action 保存设置 存储配置 JSON到数 据库 «flow» act 活动页面运行流程 数据服务(ssp-emebd-web)业务系统页面 :最终用户 访问页面 查询实例 xxx的配置 信息 初始化页面 初始化所有 page 初始化 slidePage里 UIControl的 初始化自定 义控件，执 行对应的 action 触发对应 event 执行配置的 Action http://www.adsring.cn/h5/instance/xxxx 界 面 交 互 操 作 act 新控件开发流程 web (ssp-embed-web)业务系统 工程管理系统 :开发人员 设计控件：具有 哪些事件，每个 事件抛出哪些参 数 设计控件：具有 (Action),哪些行为 /每个行为的输入 输出，以及事件 编写元数据 信息到 meta.js meta.js共享 给业务系统 编写控件的 实现逻辑 impl.js 测试控件 测试管理系 统中控件的 选项、参数 是否正确 和业务系统 联合测试功 能是否正常 实现
- 23.
- 24. 元数据结构设计 • 定 类型的属性和接口束义 约 • “配置端”管理系 提供元数给 统 据， 可 化 提供支为 视 编辑 撑 meta.js 的职责
- 25. 内建常用的行为 和控件系统 • 由于 js是弱类型 言，所以语 接口的定 和 ，是基于义 实现 定的约 • 于对 CloseWindow 行 ，为 由于 代 器安全性要求现 浏览 高，真正 行的 候可能较 运 时 无效 元数据和 的一致性实现 全局 Action 内置 Control 自定义 Control ScrollPageScrollPage CloseWindowCloseWindow WindowRedirectWindowRedirect CallControlCallControl PagePage UIControlUIControl CheckBoxCheckBox OrderOrder PlayerPlayer
- 26. 元数据决定了 程序的行为 • 加 所有的载Page （以及内 部的 Control ） • 加 所有的自定 控件载 义 • 触 当 前 第 一 个发 Page 的 load 事件 • ….( 依 元数据信息配置赖 ) 面 行 程（ 化）页 运 过 简 page1page1 page2page2 eventHandlerseventHandlers context:{name:”afterLoad”}context:{name:”afterLoad”} action:{name:”ScrollPage”,…}action:{name:”ScrollPage”,…} eventHandlerseventHandlers eventHandlerseventHandlers contextcontext actionaction Control ， Action 都可以有自己的事件和 理函数处 , 最 形成终 整个程序的控制流程
- 27.
- 28. 效果演示 • 1. 面滑页动 • 2. 面跳页 转 • 3. 修改文案、 片等图 • 4 、音 播放、 示播放状频 显 态 • 5 、倒 的 出框计时关闭 弹 效果演示
- 29. 02 局限性和缺陷 & 未来 化路优线 Part3 当前效果和未来
- 30. 局限性和缺陷 • 功能 面：层 •支持 用仅 单页应 ( 元数据一次加载 ) • 面切 目前只支持滑 方式页 换 动 • 可用的 Action 和 Control 不 多还 够 ( 形 …图 验证码 ) • 易用性 面：层 • 配置 面是从 角度 的，无法 使用页 开发 设计 给运营 • 区域的 式兼容性预览 样 问题 • 。。。
- 31. 未来的想法 • 功能 面：层 •完善 Action 和 Control • 提供 画支持动 • 控件的“ 合”是否可行尝试 组 • 事件上下文嵌套 参数 取的支持时 获 • 考 支持在 生成 面元素虑 线编辑 页 ( 而不是用静 入方式态页导 ) • 易用性 面：层 • 从用 角度，重新 配置 面户 设计 页 • 重新 控件的 ，暴露更 的配置方式审视 设计 简单 • 架 面：构层 • 从广告彩 中独立出来，以服 形式提供第三方系 接入铃 务 统 • 支持第三方 系 的后台 接入（ 点）业务 统 逻辑 难
- 32.
Editor's Notes
- #8 可以看到，对于活动页面来说，展示形式和交互方式是多种多样的。 但是至少到目前为止，活动无非是最终提供用户一个参与活动的入口，其核心玩法并没有太多变化
- #9 经过对活动需求的思考和分析，我们可以得出以下结论： 1、不同的活动，在界面展现、布局、交互方式上面，变化是比较大的 2、但是活动在核心功能上，无非是音频播放、登录、手机号验证、订购活动等逻辑 经过分析，我们应该发现了一些规律，从而更进一步做一些设想
- #11 为了避免重复发明轮子，对市面上的h5生成工具/服务进行了广泛的试用、调研： 很遗憾，市面上的工具要解决的并不是具体产品的业务开发问题： 1、工具主要面向小白用户，这些用户来平台上“选取”比较满意的模板，然后简单修改一些文案或图片 2、这些h5主要用于企业宣传、文案展示，不包含复杂的业务逻辑，比如（订购活动、开通彩铃） 3、已经有一些厂商开始提供一些具有普遍适用范围的简单功能组件，比如“投票”，但是，要接入第三方厂商的后台逻辑，还任重道远
- #18 在市面上有很多常用的软件，比如Axure、包括Visual Studio系列、Blend、flashBuilder等，其实早就对软件界面这个领域做出过抽象。 我们只需要选取在web中需要表达的部分，简单定义即可
- #20 工程上的很多事情，需要根据组内的实际情况来进行平衡。 如何更快的实施起来，用起来这套系统，需要根据现在的工作流程方式，来进行可接受的改变。只有这样，新的方法才可能推行的比较顺利。
- #21 之前都是介绍的设计思路，和概念。 下面就是真正的实现方式了
- #25 在实际开发过程中，耗费时间最长的，除了整体的设计，就是“配置端”的功能开发。 因为需要用代码来描述上述我们归纳的所有概念，包括事件、行为、参数、上下文、控件等等。
- #26 一个好用的框架，除了要提供扩展性，一开始肯定需要内建一些常用的组件和功能。 一方面，可以使用这些功能满足一些简单的需求。另一方面，开发者也可以参考这部分内建组件的实现方式，来实现自己的新组件
- #29 下面可以用现网系统来演示一些效果： 1.页面滑动 2.页面跳转 3.修改文案、图片等 4、音频播放、显示播放状态 5、倒计时关闭的弹出框