# (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 对应插件名的文件中查看。

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

样例代码的对照方式

打开样例目录文件 node_modules/@shijiu/jsview-vue-samples/DemoHomepage/router.js
以样例中文名找到路由片段，例如如下内容

  {
    name: '基础示例合集',
    path: '/feature/Basic',
    component: () => import('@shijiu/jsview-vue-samples/Basic/App.vue'),
  },

1
2
3
4
5

通过component的内容，拼接 node_modules/ 即可定位样例源码 , 例如 node_modules/@shijiu/jsview-vue-samples/Basic/App.vue

# 核心组件(JsViewEngineWidget)

JsvFocusBlock

功能:
按键接受节点控制

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

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

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

# 效果组件(JsViewVueWidget)

JsvActorMove(废弃组件)
JsvApic

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

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

功能:
绘制连接线组件

关联样例:
功能实例 => 连接线Demo
JsvFlexCell(JsvFlexDiv)

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

关联样例:
功能实例 => FlexDemo
功能实例 => 多行文字区域内对齐
JsvFreeMoveActor(内部测试组件)
JsvInput

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

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

功能:
连接线JsvConnectLine的基础

关联样例:
无
JsvMindMap

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

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

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

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

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

关联样例:
功能实例 => 二维码
JsvRipple(PC模拟环境上无效果)

功能:
3D水波效果组件

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

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

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

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

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

功能:
滚动图组件

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

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

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

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

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

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

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

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

关联样例:
无
JsvFilterView

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

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

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

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

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

关联样例:
无
JsvMarquee

功能:
文字跑马灯

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

功能:
拼图组件

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

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

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

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

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

功能:
饼图绘制组件

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

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

关联样例:
无
JsvPosterImage

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

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

功能:
进度条展示组件

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

功能:
雷达图展示组件

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

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

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

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

关联样例:
无
JsvSoundPool

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

关联样例:
游戏实例 => SoundPool
JsvTestDrag(还在开发中...)
JsvTextBox

功能:
用于Latex文字排版

关联样例:
功能实例 => latex示例
JsvVideo(废弃，被插件 JsvPlayer替代)

# 功能接口(JsViewVueTools)

DefaultKeyMap.js

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

关联样例:
无
JsvTextureStore

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

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

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

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

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

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

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

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

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

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

关联样例:
功能实例 => 预加载
JsvPerformance.ts JsvPerformance(Object类型)
功能:
性能相关开关

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

关联样例:
无
JsvRuntimeBridge.js jJsvRuntimeBridge(Object类型)
功能:
Java SDK提供的接口

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

关联样例:
所有样例(最常用的jJsvRuntimeBridge.notifyPageLoaded())
JsvTextTools.js TextTools(Object类型)
功能:
文字内容测量接口

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

关联样例:
无
其余js均为内部或者废弃的接口

# 插件(JsViewPlugin)

JsvAccount

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

关联样例:
无
JsvAudio

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

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

功能:
数学公式绘制插件

关联样例:
功能实例 => latex公式
JsvPlayer(已转为独立模块维护，此为古老版本)

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

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

← (Vue)JsvFlexDiv @vue/devtools →