miue

ali miniProgram UI components for vehicle. 最后修订于：2023/11/24

• 0.3.1: 修复播放器模块在单曲模式下上一首/下一首可点击的逻辑问题。
• 0.4.2: 修订lister默认值为不可见。
• 0.4.3: 调整列表组件的点击变更on冒泡事件。
• 0.4.4: 播放器的默认图片为 ./logo.png 或是 由 app.js 配置 config.logo
• 0.4.5: 修订panel模块的背影色hsla变为 hsl写法，提高兼容性。
• 0.4.6: 优化app.js 中没有 getAPP().config 提兼容性。
• 1.0.1: 正式发布版本；
• 1.0.2: 修订lister组件的 data.listAnimation 默认值为 '';
• 1.0.3: 修订player组件的 里对于APP.config 对象的容错;
• 1.1.0: 添加新的一种页面布局（bannock)
• 1.1.1: 优化pannel.js 的兼容性，BGM.js 添加长duration/currentTime 返值异常得处理；
• 1.1.2: 提高配置项getAPP().config与以及 my.MIUE_CONFIG
• 1.1.3: 优化播放按扭圆形进度条在进度为0时的渲染效果（调整为不可见，规避部份尺寸下的毛边问题）
• 1.1.4: 优化播放器的的标题，增加一个默认的title为solgan，调整播放器的默认封面图标（去除）
• 1.1.5: page：sandwich的历史记录仅对有可以成功加载频道后才生效。
• 1.1.6: page:bannock,修复toast的提示问题。
• 1.1.7: 优化在sandwich页内容加载调用容器加载状态接口，优化播放进条拖动情况的跟随渲染逻辑（时间/进度等）
• 1.1.8: 优化sandwich页首次加载专辑时网络错误提示，优化统一涉及网络问题的文案提示.
• 1.1.9: 播放器添加播放错误的事件；播放器添加播放出错的提醒。
• 1.2.0: 优化播放错误的情况下，进度条和播控按扭的状态。
• 1.2.1: page:bannock,优化错误情况下列表前置icon的播放状态动画。
• 1.2.2: panel设置色相为0时，不实时生效的问题。
• 1.2.3: panel设置色相为0时，添加CSS部份兼容。
• 1.2.4: 优化处理进度条在快速拖动时，部份车机性能不足出现闪动的问题;
• 1.3.0: 添加副驾模式；
• 1.3.1: 竖屏情况下不启动主副驾模式；
• 1.3.2: 添加播放器的封面的碟片的模式；
• 1.3.3: 添加主副架模式的开关配置;
• 1.3.4: tile列表添加序号展示；
• 1.3.5: 添加频道菜单/支持语音功能，浮层窗口标题调整为为不可触发事件；
• 1.3.6: 优化loading动画效果，修复大尺寸小字号情况下的列表最大高度问题；
• 1.3.7: 修复优化在图文列表下loading动画效果；
• 1.3.8: 优化冷启动封面logo和播放碟片的差异化视觉效果，添加封面logo的的动画效果；
• 1.3.9: 添加图片列表横向22模式，以及 44 模式；
• 1.3.10: 添加panel显示版本号的功能;
• 1.3.11: 优化config部份细节问题,调整历史记录为99个;
• 1.3.12: 调整sandwich的页面的字体变化细节以及将字号默认为从28到32;
• 1.3.13: 将request.js的datetype和timeout参数化；
• 1.3.14: 添加lister事件属性style（列表样式）,对 sandwich 页面添加翻页style不变更处理；
• 1.3.15: 添加player的针对diskmodeState的默认值；
• 1.3.16: 添加6种新的loading样式;
• 1.3.17: 新加样式的添加可配置;
• 1.3.18: 优化圆型进度条99%-100%的效果,添加2种新的loading样式;
• 1.4.0: 添加systeminfo模块对系统参数进行全局控制，统一所有调用写法；添加对偏好设置最大字号的可设范围；
• 1.4.1: 优化player封面图片的axml结构；
• 1.4.2: 添加性能不足降级方案（systeminfo模块，sandwich页面）, 对lister的样式做兼容性移除,统一不支持昼夜模式的CSS的mediaquery写法；
• 1.4.3: 修正systeminfo在模拟器情况下的windowsHeight的问题; 移除:hover的CSS，兼容低版本渲染问题;
• 1.4.4: 添加第10个loading样式；
• 1.4.5: 修复竖屏播放器内字号跟随变大的缺陷;
• 1.4.6: 优化播放器进度的样式变化的颜色精度以及进度条元素和文字跟随变化；
• 1.4.7: 优化列表的样式表达，让边距的尺寸更精准；
• 1.4.8: 细节数据请求失败的文案提示（404，500，307，超时等），添加提示文本的前置文案；优化专辑加载失败的文案；
• 1.4.9: 调高缓存数据时长至30天（原7天）,精简断网的错误文案提示；
• 1.4.10: 修复文本列表情况下，长文标题折行情况下，折行的文字仍会渲染显细节文字顶部的问题;
• 1.4.11: 移除时长/进度的文字的自定义字体;
• 1.4.12: 列表节目总长字的字体细节;
• 1.4.13: 列表节目总长字元素的边距与居中细节;
• 1.4.14: 处置列表文本下方可能被裁减问题，优化专辑封碟片边框可随字号调整;
• 1.4.15: 调整列表显示总数的字号至 0.3em;
• 1.5.0: 增加账号登录功能，细分播放器对不同资源内容的识别能力；添加播放器的组件的onTap事件;增加panel账号部份功能，优化sandwich页的部份细节；
• 1.5.1: 添加panel里容错能力，优化systeminfo里的信息内容;
• 1.5.2: 优化进度条前置当前时间的因拖动过程时导致长度变化（数字宽度问题），添加tile列表的flag标记；
• 1.5.3: 细节账号登录之后的信息展示；
• 1.5.4: 修复 panel.js 的错误；
• 1.5.5: 修复 systeminfo的一个异常值；优化panel的账号样式；兼容窗口低 390-450 高度情况的二维码展示的问题；
• 1.5.6: 优化二码展示的的配置参数；以及部份canvas的样式;
• 1.5.7: 优化播放器进度条在拖动时的优化细节;
• 1.5.8: 对列表播放动画做降级处置（性能不足情况下不显示动画），列新bannock页面部份相应功能;
• 1.5.9: 优化部份代码不在aliauto情况的代码健壮性；添加request三个加密常用的方法;添加账号更新逻辑;
• 1.5.10: 修复 panel.js 的错误;
• 1.5.11: 优化 panel.js 的走行相关代码;
• 1.5.12: 兼容当二维码模块异常的错误;
• 1.5.13: 细节panel.axml 的细节
• 1.5.14: test 依赖模式;
• 1.5.15: 添加 我的订阅 模块,调整字体图标应用;
• 1.5.16: 增加登出事件，以及处置登出之后订阅内容处置;
• 1.5.17: 优化iconfont的字体的引用;
• 1.5.18: 优化获取更新用户信息的逻辑（减少请求次数）;
• 1.5.19: 调整播放器的时间展示的字号;对font-display:block;优化列表模块部份代码的逻辑，处置不同频道分类初始始加载异常，为空情况下可以额外提示文案；
• 1.5.20: 修复默认为空提示的文案一种错误,添加组件版本和时间戳展示;
• 1.5.21: 更新version的引用位置;
• 1.5.22: 修订一处异常;
• 1.5.23: 强化panel对于登录用户的代码兼容（没有登录的情况下）;
• 1.5.24: 重新对iconfont的字体编码,将共用部份引入到iconfont.acss 中;
• 1.5.25: 对播放器按扭调整细节，视觉层面更居中。
• 1.5.26: 修复自定义字体对时长是 '直播' 字间距的处置;
• 1.5.27: 添加‘电台’的图标;
• 1.5.28: request 添加arraytoJSON 方法 ;
• 1.5.29: 对竖屏页面频道菜单高度做了调整(调高),优化底部播放器和进度条的间距;
• 1.5.30: 优化频道前置图标的CSS资源，添加喜欢/收藏 图标;sandwich添加我的收藏功能;
• 1.5.31: 优化iconfont菜单前置命名;
• 1.5.32: 优优request模块请求异常错误提示;
• 1.5.33: 优化默认频道设置方式;
• 1.5.34: 添加iconfont其它形式的资源引用，增强兼容性。
• 1.5.35: 当前播放项的样式细节优化;
• 1.5.36: 对设置面板的switch组个样式进行细化;
• 1.6.0: 对列表组件添加当前点击和当前播放态的分区；添加本地字体资源引用；
• 1.6.1: 优化lister.js 的 设置播放状态方法；
• 1.6.2: 修复当前播放列表和展示列表不断切换时，变量之间覆盖的问题;
• 1.6.3: 优化获取<播放记录>数据的容错性，优化第一个可见菜单非<播放记录>时，专辑列表圆角样式细节；
• 1.6.4: 优级bannock页面的代码量;panel添加备案号展示位置;
• 1.6.5: 优化systeminfo.js 走行部份代码质量和提示；
• 1.6.6: 修化VIP会员内容以及非会员之间切时间的播放时的逻辑；
• 1.6.7: 优化bannock页面的逻辑，当前置加载出错之后，二次展示页面会重新加载；
• 1.6.8: 优化播放器圆形进度条的细节，round变为ceil，兼容长度不足 100 秒时的计算逻辑；
• 1.6.9: 优化列表加载正常但数据为空的情况;
• 1.6.10: bannock页的重载逻辑添加网络侦听;
• 1.6.11: 修复因渲染缺陷的问题，列表滚动之后重置的loading不生效的问题（显示为end）;
• 1.6.12: 优化播放列表展示数量的情况，优化长度控制加载分页的计算方式；
• 1.6.13: 修复末知播放长度时自动加载分页的逻辑;
• 1.6.14: 添加sanwich页的网站侦听逻辑（当前置加载出错之后，二次展示页面会重新加载）;
• 1.6.15: 优化panel.xml 对于appx2.0 兼容性; 优化手机竖屏的适配度,强代sandwich页的容错性;添加list的menu的容错性；
• 1.7.0: 版本分界;
• 1.7.1: 修复一处错别字；
• 1.7.2: bannock 调整单页为20;
• 1.7.3: bannock 添加备案信息展示;
• 1.7.4: bannock 布局细节调整；
• 1.7.5: bannock 播控按扭变更为可配置;
• 1.7.6: 修复播放列表不可操作（上一首/下一首），因方控强制切换时的错误提示；
• 1.7.7: 细化列表列表非正常操作情况的 上一首（错误提示）下一首（列表结束），超范围选择（错误提示）;
• 1.7.8: 添加上一首的提示文案；
• 1.7.9: 移除一处备注验证;
• 1.8.0: 添加VoiceGUI功能;
• 1.8.1: 增加VoiceGUI配置激活开关，优化select指令的指向数字表达；优化列表/播放列表之间逻辑切换；添加lister的onShow事件；
• 1.8.2: 统一文案表述，简化优化player的列表按扭的VGUI，将sandwicth的文案“清单”统一为“列表”;
• 1.8.3: 优化语音识别条目选择超出范围之的错误提示;优化无列表的文案提示;
• 1.8.4: 优化图片列表被选中时,在特殊尺寸图标的的变型的问题;
• 1.8.5: 添加播放器模块的切换模式能力，变更sandwich页的倒序模式支持，切换模式变成可配置;
• 1.8.6: 重新设计正序/倒序的图标，增强差异性;
• 1.8.7: 增加备案号点击展示备案系统网址；
• 1.8.8: 添加bannock部份列表和播放状态的逻辑；添player组件输出状态事件;
• 1.8.9: 修复播放至当前内容尾并再次再次加载的列表数据合并的问题，优化顺序播放/并自动播放至最后的提示问题；
• 1.9.0: 增加读取系统字号大小的功能；
• 1.9.1: 添加播放器末能识别的错误代码;
• 1.9.2: 添加因播放错误的错误code输出，方便定位问题；
• 1.9.3: 修复lister的数据设置的时序/兼容内容为空的自定义错误。
• 1.9.4: Player 当播放资源是无效时，对于进度条/播控按扭的状态进行初始化；
• 1.9.5: 优化播放列表为空时的文案，添加专辑成功加载且为空的文案提示；
• 1.9.6: 播控列表按扭初始化为不可点击；
• 1.9.7: 优化字号的文案细节,优字历史记录的时间个位补0；
• 1.9.8: 统一历史记录时间展示一致性，引用localString格式；
• 2.0.0: 重构网络加载机制，添加abort中断功能，增加同类请求中断前序请求的能力。
• 2.0.1: 修复本地local和和历史记录之间可能的问题；
• 2.0.2: 添加get请求的本地缓存的key值支持data入参;
• 2.0.3: 专辑详情弹出层的标题可配置;
• 2.0.4: 调整菜单正文字不受图标字体影响；
• 2.0.5: 支持直播当前前进度时间用效的情况；
• 2.0.6: 注释直播当前时间的支持/大部份车机这个值并不准确；
• 2.0.7: 添加对于播放资源过期的提醒机制;20006错误码;对组件的 transition 动画进行降级处理;优化列表setData性能为spliceData方法;添加bannnock的过期内容的能力;
• 2.0.8: 添加list.claerMenuData;优化专辑详情的的标题内容重置时机;
• 2.0.9: 优化详情列表/播放列表切换的性能；
• 2.0.10: 修复系统字号为0的情况；
• 2.0.11: 添加新音频模块的输出的错误变量的情况；
• 2.0.12: 修复列表播页二次长为0的情况异常;
• 2.0.13: 修复列表数据设置的可能抛错的异常；

使用

• 小程序工程引入当前组件，可以IDE的NPM管理添加 miue-ui
• 页面的配置 .json 添加引用。

{
  "usingComponents": {
    "player":"/node_modules/miue-ui/es/player/player",
    "lister":"/node_modules/miue-ui/es/lister/lister"
  }
}

• 在AXML文件添加组件引入。

<player class='my_player' />
<lister class='my_lister' />

• 工程功能目录需要配置文件，mini.project.json ，配置项如下：

{
  "component2": false,
  "enableNodeModuleBabelTransform": true,
  "node_modules_es6_whitelist":["miue-ui"]
}

组件使用说明

基于不同屏幕大小的适配，组件定义最外节点的盒模型（box-sizing: border-box;），支持CSS变量控制宽度，用内部元素基本按em原则设置。通过调整 font-size 的方式控制组件元素可见内容的大小。

组件说明

标签上定义属性：

class：等同view的class设定，可以根据当前的 class设定CSS变量。
id:唯一标示位，根据会向页面注册组件自身。可以在页面的js中能源过 this.MIUE.get('ID号') 获取对象。
activeColor:拖动条的颜色。
handleColor:拖动块的颜色。
buttons:可以定义组件展示的按扭。 例如：buttons={{'list+|prev|PLAY+|next|mode'}} 
modes:播放模式可支持模式列表。例如：modes="{{'normal|single|loop|random'}}"

标签上定义事件：

onPress:点击被回调事件。
onPlaying:播放的回调事件。

组件方法，（通过 this.player.get('ID号')，获取调用）

setListData(ls);
    ls = [item ... ]
setTotal(n);
    设置列表总量，会在事件中抛出。
play(idx)
   idx 为播放列表的第几个。

支持CSS属性定义：（定义在className下）

--player-width:100vw;
--player-height:25vh;
--player-font-size:25px;
--player-title-visible:flex|none;
--player-singer-visible:flex|none;
--player-picture-visible:flex|none;
--player-progress-visible:flex|none;
--player-control-visible:flex|none;

说明：

标签上定义属性：

class：等同view的class设定，可以根据当前的 class设定CSS变量。
id:唯一标示位，根据会向页面注册组件自身。可以在页面的js中能源过 this.MIUE.get('ID号') 获取对象。
menu:定义列表的菜单。菜单和列表内容会据根据（orientation: portrait｜landscape）变更布局方式，左右以及上下。

标签上定义事件：

onPress:点击被回调事件。
onScrollLoad:列表被滚动后。
onPlaying:列表某个激活

支持CSS属性定义：（定义在className下）

--lister-width:calc( 100vw - 215vh) ; 宽度设置
--lister-height:90vh; 高度设置
--lister-font-size:25px; 设置基准字体大小
--lister-menu-width:6em; 设置菜单宽度，建议用EM单位。

贡献

版权

Copyright (c) dansion. All rights reserved. Licensed under the MIT license.