介绍一个EPG前端框架


参考android应用层表现,使用application、page,来实现页面间的跳转

  • 1.单页面应用

  • 2.整合焦点逻辑

  • 3.循环列表

  • 4.弹窗

  • 5.滚动器

  • 6.图片懒加载

  • 7.文字跑马灯

  • 8.碎片布局

框架地址:github地址、gitee地址
案例地址:

  • 芒果app版在EPG上的复刻,github地址、gitee地址
    • 效果

已完成的功能及版本计划

当前版本0.2.0


version:0.2.0 date:2022-08-21

  • 新增RecycleView控件,
  • 修改findViewById的实现,脱离ViewManager,内嵌至View,View创建需要viewManager
  • 将图片分成两个文件夹,
    • images是在html代码中设置的图片
    • images-js是在js中动态设置的

0.1.0 基本功能

序号 功能 对应名 描述 完成状态 备注
1 应用 Application 整个应用的状态管理 完成
2 键盘 Keyboard 键盘交互 完成
3 页面 Page 单个页面的状态管理 完成
4 页面管理员 PageManager 管理多个页面的 基本功能
5 基础控件 View 和节点交互 完成 后续需要分离节点交互和无关节点的相关操作
6 控件管理员 ViewManager 管理View的 基本完成 内部的buildView方法耦合在这里,不易拓展
7 可上焦控件 ItemView 可以上焦的控件,基本的交互 完成 View子类,包含上焦效果、监听、点击
8 滚动控件 ScrollView 滚动控件 完成 内含滚动器,功能正常,但实现方式不佳,待优化
9 图片控件 ImageView 主要是懒加载 完成 主要在渲染后滚动后判断是否需要加载,一般是配合ScrollView
10 文本控件 TextView 主要是跑马灯 完成 横向和纵向跑马灯
11 组控件 GroupView 主要是给可上焦的控件分组 完成 在组内有对应的就近原则
12 弹窗控件 Dialog 浮在页面的弹窗 完成
13 帧控件 FrameView 主要是包含碎片Fragment 完成
14 碎片 Fragment 碎片,动态加载,有生命周期 完成 需要配合FrameView使用
15 播放器 VideoPlayer 播放器空实现 基本结构,需要调整 内部定义播放器需要什么操作,但无实际实现
16 iptv播放器 IptvPlayer iptv epg原生播放器 基本完成,但未测试 使用iptv规范实现的播放器,只能在iptv规范的设备上使用 ,适配时,可以继承这个
17 数据保存 LocalData 保存数据的工具 完成 使用json格式保存,json所需空间偏大,容易出现cookie长度不够问题
  • 在该版本中,基本功能已完成,对于实际开发基本满足要求,部分功能可以在简单变形之后实现
  • 缺少列表组件
  • 开始积累special_view,和业务结合较为紧密的控件,新的属性也需要支持标签
  • 虚拟节点优化,在后续版本中需要调研,得到对性能提升程度

使用方式可以参考README.md,也可以参考src实现的demo

0.1.1 findViewById改写,控件向内部迭代到有id对应的控件

  • 把控件绑定在viewManager的map中,不利于控件的特殊操作

0.2.0 拓展组件-可循环列表RecycleView

  • 节点可循环使用
  • 滚动效果循环
序号 功能 对应名 描述 完成状态 备注
1 循环列表 RecycleView 列表控件 完成 使用adapter来创建每一个元素

0.2.1 dialog组件布局分离,规范组件的自定义布局形式,并完善已知问题(缺陷)

  • 将布局文件等同于page
  • css和html文件可以使用文件夹区分,在loader中处理
  • 尝试将html和css写在一个文件中,更加清晰的关联布局和样式
  • RecycleView默认设置adapter,加载标签属性,默认上焦,focusable也需要加入
  • 新增气泡控件,是否可以看作自动消失的dialog
0.2.2 完善各个组件标签属性
  • 除了基础属性之外的属性还没有写
  • GroupView、RecycleView等

0.3.0 分离View,新增VElement对象

  • 虚拟节点可以在这个基础上尝试
  • 将节点相关操作及信息单独封装到VElement类中,节点方面的兼容性,可以在这里处理
  • 在View内部新增VElement对象,实现相关操作,另外还有控件级操作,包括appendChild

0.4.0 拓展组件-Toast组件

  • 任意地方可调用
  • 显示位置、时间可设定
  • 样式可调整(可使用template布局)

0.4.1 html loader优化

  • 解析tagName,将tagName解析到属性中的view-type
  • 解析id,将id解析到属性中view-id
  • 可以使用buildView方法和loader结合的方式

0.5.0 拓展组件-动态生成组件(组件名未定)

  • 继承GroupView,使用Adapter生成
  • 尝试relative方式布局,兼容性验证

0.6.0 拓展播放器-Android、Web播放器

不改动业务层的前提,实现播放器在不同环境的调用

  • 对接Android播放器,使用特定关键字调用相关播放方法,实现Android原生和H5交互
  • 对接Web播放器,暂定videojs实现,但videojs无法调用ts文件,待调研

0.7.0 优化工具-LocalData优化

这里的LocalData指,网页可以保存的数据,下次进入时可以使用,目前使用cookie来实现

  • 新增表单形式(使用"&"连接)保存
  • 尝试storage实现
  • 持续在ViewUtil中添加常用(非框架级的)方法

0.8.0 优化组件-使用transform实现滚动

使用top、left实现的滚动存在效率问题,容易出现卡顿,transform是css样式支持,对于效率优化较好,需要尝试及调研

  • 新增transform实现,可以支持选择滚动方式

0.9.0 支持鼠标事件、触摸事件

可以使用鼠标或触摸控制页面,在切换控制方式时,目前会有点问题,比如滚动之后,焦点在屏幕外,此时键盘控制,会滚动回原位置

  • 点击效果,点击之后当前焦点为被点击控件
  • 滚动效果,不改变当前焦点
  • 监听到触摸或鼠标事件时,去除上焦效果
  • 监听到键盘或遥控器事件时,给当前焦点上焦

1.0.0 支持组件扩展

相对于框架中的组件,扩展组件有高度的定制化,使用更直接的优点,需要支持扩展也是很重要的一点

高度的拓展性是一个框架成熟的重要指标

  • 图片跑马灯
  • 加载提示
  • 弹出框
  • 返回顶部
  • 进度条

开发插件,引入自定义的文件名(例如:.view后缀)

  • 形成该框架特定的开发模式

你可能感兴趣的:(EPG,IPTV,芒果复刻,前端框架,ui)