(Vue)高阶组件一览

概述

每个组件的说明在其vue文件头中，组件的vue文件可以去目录 node_modules/@shijiu/jsview-vue/utils/ 中查找。

• JsvFocusBlock: node_modules/@shijiu/jsview-vue/utils/JsViewEngineWidget/JsvFocus/JsvFocusBlock.vue
  

• FocusHub: node_modules/@shijiu/jsview-vue/utils/JsViewEngineWidget/JsvFocus/JsvFocusHub.ts
  

• MetroWidget: node_modules/@shijiu/jsview-vue/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue
  

• 其余组件:node_modules/@shijiu/jsview-vue/utils/JsViewVueWidget 对应组件名的文件中查看。
  

• 功能组件: node_modules/@shijiu/jsview-vue/utils/JsViewVueTools 对应组件名的文件中查看。
  

• 插件: node_modules/@shijiu/jsview-vue/utils/JsViewPlugin 对应插件名的文件中查看。
  

关联样例可访问示例(建议右键在新标签中打开链接)

核心组件(JsViewEngineWidget)

1. JsvFocusBlock

   功能:
   按键接受节点控制

   关联样例:
   功能实例 => 有命名空间的焦点切换

2. MetroWidget

   功能:
   item平铺布局，并接管上下左右导航处理进行item移动

   关联样例:
   整个"MetroWidget"的测试TAB

效果组件(JsViewVueWidget)

1. JsvActorMove(废弃组件)

2. JsvApic

   功能:
   动图组件支持webp/gif的高阶控制

   关联样例:
   首页/运营 => 动图

3. JsvConnectLine

   功能:
   绘制连接线组件

   关联样例:
   功能实例 => 连接线Demo

4. JsvFlexCell(JsvFlexDiv)

   功能:
   flex布局组件，目前主要是 JsvFlexDiv

   关联样例:
   功能实例 => FlexDemo
   功能实例 => 多行文字区域内对齐

5. JsvFreeMoveActor(内部测试组件)

6. JsvInput

   功能:
   拉起系统输入法，接受输入内容的组件

   关联样例:
   功能实例 => 文字输入

7. JsvLine

   功能:
   连接线JsvConnectLine的基础

   关联样例:
   无

8. JsvMindMap

   功能:
   树状脑图展示组件,可接收导航按键进行图内item切换

   关联样例:
   功能实例 => 思维导图示例

9. JsvPreload

   功能:
   图片预加载组件，可用来解决AB图切换时闪的情况

   关联样例:
   功能实例 => 预加载

10. JsvQrcode

    功能:
    二维码绘制组件，输入url输出二维码div

    关联样例:
    功能实例 => 二维码

11. JsvRipple(PC模拟环境上无效果)

    功能:
    3D水波效果组件

    关联样例:
    首页/运营 => 水波特效

12. JsvSpray

    功能:
    粒子效果组件，低端设备能支撑1500个点不卡顿

    关联样例:
    首页/运营 => 粒子效果

13. JsvSpriteAnim/JsvSpriteStatic

    功能:
    精灵图(雪碧图)展示组件，根据传入配置列表的个数决定是动图还是静图

    关联样例:
    游戏实例 => 精灵图

14. JsvSwiper

    功能:
    滚动图组件

    关联样例:
    首页/运营 => 滚动图

15. JsvSwiper3D

    功能:
    滚动图组件带透视版本

    关联样例:
    首页/运营 => Swiper3dTest

16. JsvTextureAnim

    功能:
    div内部图片运动效果

    关联样例:
    首页/运营 => TextureAnimation
    首页/运营 => 焦点框旋转光效果

17. JsvVisibleSensor

    功能:
    div是否可视的监控组件，通过回调通知可视变化，常用于Video窗的自动停止播放

    关联样例:
    功能实例 => 可视化变化通知

18. JsvEnableRenderBreak

    功能:
    单个div的骨架图效果, 暂无使用场景

    关联样例:
    无

19. JsvFilterView

    功能:
    div整体进行过滤器渲染组件，例如整体进行公祭日黑白效果

    关联样例:
    首页/运营 => 公祭日黑白效果

20. JsvGrid

    功能:
    适应于内容过多，而用MetroWidget的显隐控制性能不足的场景，无动画的单元格刷新

    关联样例:
    功能实例 => 快速刷新的表格布局组件

21. JsvHold

    功能:
    这个JsView给定区域透过，露出系统底层图层，不如JsvNativeSharedDiv，
    效果同样，但后者可以向native通知位置变化(父节点动画时),更适合做video画面的挖洞器

    关联样例:
    无

22. JsvMarquee

    功能:
    文字跑马灯

    关联样例:
    功能实例 => 文字滚动(标题跑马灯)

23. JsvMaskClipDiv

    功能:
    拼图组件

    关联样例:
    首页/运营 => 拼图demo

24. JsvNativeSharedDiv

    功能:
    图层透过露出video层, 位置信息变化(父节点移动)会实时通知native

    关联样例:
    功能实例 => NativeSharedView测试

25. JsvNinePatch

    功能:
    .9图绘制，用于绘制焦点框

    关联样例:
    首页/运营 => 焦点框旋转光效果
    首页/运营 => .9图焦点框漂移
    MetroWidget => .9焦点页面

26. JsvPieChart

    功能:
    饼图绘制组件

    关联样例:
    功能实例 => 饼图测试

27. JsvPosterDiv

    功能:
    海报展示组件, 当图片未加载出来时显示默认图

    关联样例:
    无

28. JsvPosterImage

    功能:
    JsvPosterDiv的进阶版，可用来进行图片格式定制，减少内存消耗

    关联样例:
    功能实例 => 设置颜色空间
    功能实例 => 指定Texture尺寸
    功能实例 => 图片缩小算法

29. JsvProgressBar

    功能:
    进度条展示组件

    关联样例:
    游戏实例 => 进度条

30. JsvRadarChart

    功能:
    雷达图展示组件

    关联样例:
    游戏实例 => 雷达图

31. JsvScaleTextBox

    功能:
    文字防止放大模糊组件

    关联样例:
    MetroWidget => 性能测试 (只是这个demo的一部分,这个组件和性能没有关系)

32. JsvSector

    功能:
    扇形组件，饼图组件的基础

    关联样例:
    无

33. JsvSoundPool

    功能:
    音效组件，可以播放mp3,ogg的短音，文件尺寸有限制

    关联样例:
    游戏实例 => SoundPool

34. JsvTestDrag(还在开发中...)

35. JsvTextBox

    功能:
    用于Latex文字排版

    关联样例:
    功能实例 => latex示例

36. JsvVideo(废弃，被插件 JsvPlayer替代)

功能接口(JsViewVueTools)

1. DefaultKeyMap.js

   DefaultKeyCodeMap
   功能:
   一个Map, 提供常用的导航按键、决定、返回、菜单的常数定义

   关联样例:
   无

2. JsvTextureStore

   JsvTextureStoreApi(Object类型)
   功能:
   通过代码直接创建图形素材

   子接口列表:
   canvasTexture: 创建矩形画布，通过Canvas2d绘制画布形成素材
   deleteTexture: 回收素材内存
   

   关联样例:
   功能实例 => TextureStore测试

3. JsvDynamicKeyFrames.js

   getKeyFramesGroup(Function类型获得操作对象)
   功能:
   动态制作和销毁全局的keyFrame动画

   子接口列表:
   insertRule(key_frame_string): 动态添加keyFrame
   removeRule(name): 动态删除keyFrame
   removeMultiRules(names_array): 批量动态删除keyFrame
   hasRule(name): 查询KeyFrame是否存在
   

   关联样例:
   游戏实例 => 春联测试
   首页/运营 => 焦点移动样式
   首页/运营 => TExtureAnimation
   

4. JsvHashHistory.js

   jsvCreateHashHistory(Function类型获得操作对象)
   功能:
   创建 vue-router 所需要的history操作对象

   关联样例:
   整个demo页面(DemoHomePage)的router.js
   功能实例 => Hash方式路由切换
   

5. JsvPreDownloader.ts

   JsvPreDownloader(Object类型)
   功能:
   对给定文件进行预下载(放入本地文件缓存)，和JsvPreload类似，只是不进行图片解码。

   子接口列表:
   buildDownloadItem: 创建下载对象的描述
   download: 对给定列表进行预下载
   

   关联样例:
   功能实例 => 预加载

6. JsvPerformance.ts JsvPerformance(Object类型)
   功能:
   性能相关开关

   子接口列表:
   setPosterSingleThreadDecode: 设置图片解码单线程，对于特别低端设备且cpu个数不足时，让UI更流畅一些
   getPosterSingleThreadDecode: 获取图片解码单线程的状态
   

   关联样例:
   无

7. JsvRuntimeBridge.js jJsvRuntimeBridge(Object类型)
   功能:
   Java SDK提供的接口

   子接口列表:
   点击查看 Js调用Java接口

   关联样例:
   所有样例(最常用的jJsvRuntimeBridge.notifyPageLoaded())

8. JsvTextTools.js TextTools(Object类型)
   功能:
   文字内容测量接口

   子接口列表:
   getTextWidth: 测量文字宽度
   getOneLineTextDrawWidth: 单行超长文字经过jsview处理后的总长度
   isRtl: 文字是否是Right To Left类型，例如阿拉伯语编码的文字
   

   关联样例:
   无

9. 其余js均为内部或者废弃的接口

插件(JsViewPlugin)

1. JsvAccount

   功能:
   部分厂家的账户系统

   关联样例:
   无

2. JsvAudio

   功能:
   适配性高的游戏背景音播放器，目前支持mp3格式

   关联样例:
   游戏实例 => SoundPool

3. JsvLatex

   功能:
   数学公式绘制插件

   关联样例:
   功能实例 => latex公式

4. JsvPlayer(已转为独立模块维护，此为古老版本)

   功能:
   高适配性的视频播放器，已转为独立功能块维护，模块获取和使用说明(查看方案3)

   关联样例:
   功能实例 => 视频