uview-ultra 4.5.74 → 4.5.77

package/changelog.md

@@ -1,3 +1,87 @@
+## 4.5.77
+feat: 新增 up-audio 音频播放器组件，up-parse 音频节点改用 up-audio 渲染（对齐 uview-plus 3.8.138）
+
+uni-app 在 Vue3 中已废弃 <audio> 组件。本版新增基于 uni.createInnerAudioContext 的公共组件 up-audio，并替换 up-parse 内部已废弃的 <audio> 渲染，富文本里的音频在 H5 / App-Vue / 各小程序端可正常播放。
+
+新增 up-audio 组件：
+- props：src（支持单个地址或地址数组，多源加载失败自动切换下一个源）、title、loop（默认 false）、showRate（默认 true）、rateList（默认 [0.5, 0.75, 1, 1.25, 1.5, 2]）、activeColor（默认 '#2979ff'）、showTitle（默认 true）
+- 进度条拖动 seek、倍速切换、播放/暂停；事件 play（参数 { source, src }）、error（参数 { source, errMsg }，全部源失败才抛出）
+- 多实例互斥：播放其中一个自动暂停其它 up-audio 实例
+- 实例方法：toggle / reset / changeRate
+- .vue / .uvue 两套实现同步提供；uvue 侧基于 uni-app x 的 uni.createInnerAudioContext（App-Android 4.33+ / Web 4.0+）
+- 新增示例页 pages/componentsD/audio
+
+up-parse 修复：
+- 音频节点原用已废弃的原生 <audio> 标签，uni-app Vue3 下（H5 / App-Vue）该分支被编译条件直接排除，富文本里的音频节点静默不渲染；现统一改由 up-audio 渲染，play / error 事件经 node 转发给 up-parse
+- up-parse 的 .uvue 侧走 rich-text，本就不渲染音频节点，本次不变
+
+验证：Android 全项目编译通过（110 页面，0 error）；.uvue 侧已在 MuMu 模拟器（Android）完成真机运行验证：多源回退自动切换、播放/暂停切换、时长与进度更新正常，无 JS 异常。
+
+## 4.5.76
+fix: 修复 up-video 换行 as 断言导致 App 启动白屏（P0），并完成 up-lottie 真机验证
+
+这是一个 P0 回归，4.5.45 引入 up-video 起就存在，请尽快升级。
+
+问题：components/up-video/video.uts 的默认值对象结尾把类型断言写成了换行形式：
+
+    }
+     as UTSJSONObject
+
+UTS 编译器对跨行的 as 处理有误，把它拆成三条独立语句输出到 app-service.js：
+
+    });
+    as;
+    UTSJSONObject;
+
+as 是 TS 保留字、不是变量，App 启动求值 app-service 时直接抛
+ReferenceError: as is not defined，整个应用白屏——不是 up-video 单页失效，
+而是所有页面都起不来。
+
+长期未被发现的原因：此前校验一直用 launch app-android --compile true，
+那是只编译不运行，产物里多出来的 as; 语句在编译期完全合法。
+
+修复：把断言合并回同一行 } as UTSJSONObject。已确认修复后
+unpackage/dist/dev/app-android/app-service.js 中不再有孤立的 as; 语句，
+真机运行日志也不再出现该 ReferenceError。全库已扫描，仅此一处换行写法。
+
+up-lottie 的 .uvue 侧完成真机运行时验证（关闭 4.5.75 的遗留项）：
+- canvas 桩补 requestAnimationFrame / cancelAnimationFrame。lottie-miniprogram 的
+  setup() 会执行 canvas.cancelAnimationFrame.bind(canvas)，缺这两个方法时抛
+  Cannot read properties of undefined (reading 'bind')，画面空白
+- 示例页 stageStyle 由「传函数引用给 :style」改为 computed 返回样式对象。
+  uni-app x 的 :style 不解析函数引用，会触发框架内 normalizeSharedDataStyle 的
+  Cannot convert undefined or null to object
+- 验证结果：真机（HUAWEI ABR-AL80 / Android）上示例页正常渲染，
+  loading.json 循环播放且连续两帧画面位置不同，2D API 探测全过，
+  无 statechange error、无 JS 异常。up-lottie 在 uni-app x 端可用
+
+另：README / displayName 文案调整为「uniapp-x 蒸汽模式」「120+ 精选组件」。
+
+## 4.5.75
+feat: 新增 up-lottie 动画组件（对齐 uview-plus 3.8.135）
+
+加载 AE 导出的 Lottie JSON 并播放。API 与 uview-plus 3.x 的 u-lottie 完全一致，.vue / .uvue 两套实现同步提供。
+
+新增：
+- up-lottie 组件，props：filePath（http(s) 地址；H5 / App-Vue 额外支持本地静态路径）、animationData（直接传 JSON 对象，优先级高于 filePath）、contentModel（ScaleToFill / AspectFill / Center，默认 AspectFill）、loop（默认 false）、autoplay（默认 true）
+- 实例方法：reload / playAnimation / pauseAnimation / resumeAnimation / cancelAnimation
+- 事件 statechange：ready / play / pause / resume / stop / complete / error（error 附 message）；微信小程序从 event.detail 读取，统一按 event.detail || event 兼容
+- 新增示例页 pages/componentsD/lottie，含填充模式切换、播放控制与状态日志
+
+平台实现分两条轨：
+- .vue（uni-app Vue3）：H5 / App-Vue 走 lottie-web 5.13.0 的 SVG 渲染器，H5 端引擎按需 import() 拆成独立异步 chunk、不进共享入口包，加载失败会重置缓存以便重试；微信小程序 / 鸿蒙走 lottie-miniprogram 1.0.12 + up-canvas 的 canvas 渲染器，鸿蒙无 DOM canvas 节点，由 harmony-canvas-adapter 把旧版 CanvasContext 适配成标准 2D 上下文；nvue 与其他小程序统一通过 statechange 的 error 类型暴露，不发散报错
+- .uvue（uni-app x）：无 DOM，不走 SVG 渲染器，直接用 up-canvas 暴露的原生 CanvasRenderingContext2D 承载 lottie-miniprogram 的 canvas 渲染器。lottie-miniprogram 在模块加载期就会调用 wx.getSystemInfoSync()，而 uni-app x 没有 wx 全局，因此单独提供一份注入了 wx 桩的副本 libs/lottie-miniprogram.uvue.js（原文件保持不动，供 .vue 侧使用）
+- .uvue 侧初始化前会探测 2D API 覆盖度（save / restore / bezierCurveTo / setTransform / fillText 等 16 项），缺失时通过 error 事件报出具体缺哪个方法，不会静默白屏
+
+已知限制：
+- 同一页面仅支持一个并行的 canvas 轨实例（lottie-miniprogram 持有全局 canvas 引用，组件内已加互斥守卫）
+- 微信小程序 / 鸿蒙 / uni-app x 无法读取本地 JSON 文件，请改用 animationData 或 http(s) 地址
+- 图片类资源在 canvas 轨下受平台限制（小程序不支持动态创建 canvas），建议保持图片原始宽高与 JSON 描述一致
+- 远程 JSON 可包含可执行表达式（lottie 的 expressions 特性），请仅加载可信来源
+- .uvue 侧本次仅完成编译级验证（全项目 109 页面编译通过），未做真机运行时验证；.vue 侧与 3.x 实现一致
+
+体量：引擎资源约 451 KB（lottie_svg.min.js 242 KB、lottie-miniprogram.min.js 209 KB、lottie-miniprogram.uvue.js 210 KB 含 wx 桩）。H5 端 lottie-web 为异步 chunk 不影响首屏；仅使用 up-lottie 的项目才会引入对应引擎，不影响其他组件。
+
 ## 4.5.74
 fix: 对齐 uview-plus 3.8.129 ~ 3.8.137 的上游修复
 

package/components/up-audio/audio-pool.js

@@ -0,0 +1,2 @@
+// 全局实例池：播放某个音频时自动暂停其它 up-audio 实例，所有实例共享（模块级单例）
+export const audioInstancePool = []

package/components/up-audio/audio-pool.uts

@@ -0,0 +1,2 @@
+// 全局实例池：播放某个音频时自动暂停其它 up-audio 实例，所有实例共享（模块级单例）
+export const audioInstancePool: Array<InnerAudioContext> = []

package/components/up-audio/audio.js

@@ -0,0 +1,19 @@
+export default {
+    // audio 音频播放器
+    audio: {
+        // 音频地址，支持单个地址或地址数组（多源，加载失败自动切换）
+        src: '',
+        // 标题，显示在音频条上
+        title: '',
+        // 是否循环播放
+        loop: false,
+        // 是否显示倍速切换
+        showRate: true,
+        // 可切换的倍速档位
+        rateList: [0.5, 0.75, 1, 1.25, 1.5, 2],
+        // 主题色（播放按钮、进度条选中色）
+        activeColor: '#2979ff',
+        // 是否显示标题
+        showTitle: true
+    }
+}

package/components/up-audio/audio.uts

@@ -0,0 +1,19 @@
+export default {
+    // audio 音频播放器
+    audio: {
+        // 音频地址，支持单个地址或地址数组（多源，加载失败自动切换）
+        src: '',
+        // 标题，显示在音频条上
+        title: '',
+        // 是否循环播放
+        loop: false,
+        // 是否显示倍速切换
+        showRate: true,
+        // 可切换的倍速档位
+        rateList: [0.5, 0.75, 1, 1.25, 1.5, 2],
+        // 主题色（播放按钮、进度条选中色）
+        activeColor: '#2979ff',
+        // 是否显示标题
+        showTitle: true
+    }
+} as UTSJSONObject

package/components/up-audio/props.js

@@ -0,0 +1,43 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 音频地址，支持单个地址或地址数组（多源，加载失败自动切换）
+        src: {
+            type: [String, Array],
+            default: () => defProps.audio.src
+        },
+        // 标题，显示在音频条上
+        title: {
+            type: String,
+            default: () => defProps.audio.title
+        },
+        // 是否循环播放
+        loop: {
+            type: Boolean,
+            default: () => defProps.audio.loop
+        },
+        // 是否显示倍速切换
+        showRate: {
+            type: Boolean,
+            default: () => defProps.audio.showRate
+        },
+        // 可切换的倍速档位
+        rateList: {
+            type: Array,
+            default: () => defProps.audio.rateList
+        },
+        // 主题色（播放按钮、进度条选中色）
+        activeColor: {
+            type: String,
+            default: () => defProps.audio.activeColor
+        },
+        // 是否显示标题
+        showTitle: {
+            type: Boolean,
+            default: () => defProps.audio.showTitle
+        }
+    }
+})
+
+export default props

package/components/up-audio/up-audio.uvue

@@ -0,0 +1,418 @@
+<template>
+	<view class="up-audio">
+		<!-- 播放/暂停按钮 -->
+		<view
+			class="up-audio__btn"
+			:style="btnStyle"
+			@tap.stop="toggle"
+		>
+			<text class="up-audio__btn-icon">{{ playing ? '❚❚' : '▶' }}</text>
+		</view>
+		<!-- 主体：标题 + 时间 + 进度条 -->
+		<view class="up-audio__main">
+			<view class="up-audio__row">
+				<text
+					v-if="hasTitle"
+					class="up-audio__title"
+				>{{ displayTitle }}</text>
+				<text class="up-audio__time">{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</text>
+			</view>
+			<slider
+				class="up-audio__slider"
+				:value="progress"
+				:max="100"
+				:block-size="10"
+				:activeColor="activeColor"
+				backgroundColor="#e4e7ed"
+				@changing="onChanging"
+				@change="onChange"
+			/>
+		</view>
+		<!-- 倍速 -->
+		<view
+			v-if="showRate"
+			class="up-audio__rate"
+			@tap.stop="changeRate"
+		>
+			<text class="up-audio__rate-text">{{ rateText }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-audio'
+		// #ifdef MP-WEIXIN
+		,
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+	import defProps from './audio.uts'
+	import { audioInstancePool } from './audio-pool.uts'
+	/**
+	 * up-audio 音频播放器
+	 * @description uni-app x 端基于 uni.createInnerAudioContext 实现播放，可单独使用
+	 * @property {String | Array}	src			音频地址，支持数组多源，加载失败自动切换
+	 * @property {String}			title		标题，显示在音频条上
+	 * @property {Boolean}			loop		是否循环播放 （默认 false ）
+	 * @property {Boolean}			showRate	是否显示倍速切换 （默认 true ）
+	 * @property {Array}			rateList	可切换的倍速档位 （默认 [0.5, 0.75, 1, 1.25, 1.5, 2] ）
+	 * @property {String}			activeColor	主题色（播放按钮、进度条选中色） （默认 '#2979ff' ）
+	 * @property {Boolean}			showTitle	是否显示标题 （默认 true ）
+	 * @event {Function} play 开始播放时触发，参数 { source, src }
+	 * @event {Function} error 加载/播放出错时触发，参数 { source, errMsg }
+	 * @example <up-audio src="https://cdn.example.com/a.mp3" title="示例音频"></up-audio>
+	 */
+
+	// props
+	const props = defineProps({
+		// 音频地址，支持单个地址或地址数组（多源，加载失败自动切换）
+		src: {
+			type: [String, Array as PropType<Array<string>>],
+			default: ''
+		},
+		// 标题，显示在音频条上
+		title: {
+			type: String,
+			default: defProps.getString('audio.title')
+		},
+		// 是否循环播放
+		loop: {
+			type: Boolean,
+			default: defProps.getBoolean('audio.loop')
+		},
+		// 是否显示倍速切换
+		showRate: {
+			type: Boolean,
+			default: defProps.getBoolean('audio.showRate')
+		},
+		// 可切换的倍速档位
+		rateList: {
+			type: Array as PropType<Array<number>>,
+			default(): Array<number> {
+				return [0.5, 0.75, 1, 1.25, 1.5, 2] as Array<number>
+			}
+		},
+		// 主题色（播放按钮、进度条选中色）
+		activeColor: {
+			type: String,
+			default: defProps.getString('audio.activeColor')
+		},
+		// 是否显示标题
+		showTitle: {
+			type: Boolean,
+			default: defProps.getBoolean('audio.showTitle')
+		},
+		customStyle: {
+			type: [Object, String],
+			default(): UTSJSONObject {
+				return {} as UTSJSONObject
+			}
+		}
+	})
+
+	// 定义事件
+	const emit = defineEmits(['play', 'error'])
+
+	// 响应式数据
+	const playing = ref(false)
+	const currentTime = ref(0)
+	const duration = ref(0)
+	const progress = ref(0)
+	const srcIndex = ref(0)
+	const rate = ref(1.0)
+	const seeking = ref(false)
+	const errorMsg = ref('')
+	let ctx: InnerAudioContext | null = null
+
+	// 归一化源列表：string 或 Array<string> 统一为非空数组
+	const srcList = computed((): Array<string> => {
+		const list: Array<string> = []
+		const srcValue = props.src
+		if (srcValue == null) {
+			return list
+		}
+		if (typeof srcValue == 'string') {
+			const single = srcValue as string
+			if (single.length > 0) {
+				list.push(single)
+			}
+		} else {
+			const arr = srcValue as Array<string>
+			for (let i = 0; i < arr.length; i++) {
+				const item = arr[i]
+				if (item != null && item.length > 0) {
+					list.push(item)
+				}
+			}
+		}
+		return list
+	})
+
+	const displayTitle = computed((): string => props.title)
+	const hasTitle = computed((): boolean => props.showTitle && displayTitle.value.length > 0)
+	const currentSrc = computed((): string => {
+		const list = srcList.value
+		if (srcIndex.value >= 0 && srcIndex.value < list.length) {
+			return list[srcIndex.value]
+		}
+		return ''
+	})
+	const rateText = computed((): string => {
+		const r = rate.value
+		const isInt = r == Math.floor(r)
+		const base = isInt ? Math.floor(r).toString() : r.toString()
+		return base + 'x'
+	})
+	// 播放按钮底色
+	const btnStyle = computed((): string => {
+		return 'background-color: ' + props.activeColor
+	})
+
+	// src 变化时重建播放器
+	watch((): any => props.src, (_n: any | null) => {
+		reset()
+	}, { deep: true })
+
+	onMounted(() => {
+		init()
+	})
+
+	// 组件卸载前释放播放器资源
+	onBeforeUnmount(() => {
+		destroy()
+	})
+
+	// 源变化时重建
+	function reset() {
+		destroy()
+		srcIndex.value = 0
+		currentTime.value = 0
+		duration.value = 0
+		progress.value = 0
+		playing.value = false
+		init()
+	}
+
+	function init() {
+		if (currentSrc.value.length == 0) return
+		const audioCtx = uni.createInnerAudioContext()
+		ctx = audioCtx
+		audioCtx.src = currentSrc.value
+		if (props.loop) {
+			audioCtx.loop = true
+		}
+		audioCtx.onPlay((result: any | null) => {
+			playing.value = true
+			// 暂停实例池中的其它音频，保证多实例互斥
+			for (let i = audioInstancePool.length - 1; i >= 0; i--) {
+				const other = audioInstancePool[i]
+				if (other !== audioCtx) {
+					other.pause()
+				}
+			}
+			emit('play', { source: 'audio', src: currentSrc.value } as UTSJSONObject)
+		})
+		audioCtx.onPause((result: any | null) => {
+			playing.value = false
+		})
+		audioCtx.onStop((result: any | null) => {
+			playing.value = false
+		})
+		audioCtx.onEnded((result: any | null) => {
+			playing.value = false
+			currentTime.value = 0
+			progress.value = 0
+		})
+		audioCtx.onTimeUpdate((result: any | null) => {
+			if (seeking.value) return
+			currentTime.value = audioCtx.currentTime
+			const dur = audioCtx.duration
+			if (dur > 0) {
+				duration.value = dur
+			}
+			progress.value = duration.value > 0 ? currentTime.value / duration.value * 100 : 0
+		})
+		audioCtx.onCanplay((result: any | null) => {
+			const dur = audioCtx.duration
+			if (dur > 0) {
+				duration.value = dur
+			}
+		})
+		audioCtx.onError((err: ICreateInnerAudioContextFail) => {
+			handleError(err)
+		})
+		audioInstancePool.push(audioCtx)
+	}
+
+	function destroy() {
+		const audioCtx = ctx
+		if (audioCtx != null) {
+			const idx = audioInstancePool.indexOf(audioCtx)
+			if (idx != -1) {
+				audioInstancePool.splice(idx, 1)
+			}
+			audioCtx.destroy()
+			ctx = null
+		}
+	}
+
+	const toggle = () => {
+		const audioCtx = ctx
+		if (audioCtx == null) return
+		if (playing.value) {
+			audioCtx.pause()
+		} else {
+			audioCtx.play()
+		}
+	}
+
+	// 拖动进度条中（只更新本地显示）
+	const onChanging = (e: UniSliderChangeEvent) => {
+		seeking.value = true
+		progress.value = e.detail.value
+		currentTime.value = duration.value > 0 ? duration.value * e.detail.value / 100 : 0
+	}
+
+	// 拖动结束，真正 seek
+	const onChange = (e: UniSliderChangeEvent) => {
+		seeking.value = false
+		progress.value = e.detail.value
+		const audioCtx = ctx
+		if (audioCtx != null && duration.value > 0) {
+			audioCtx.seek(duration.value * e.detail.value / 100)
+		}
+	}
+
+	const changeRate = () => {
+		const list = props.rateList
+		let i = list.indexOf(rate.value)
+		if (i == -1) {
+			i = list.indexOf(1)
+		}
+		rate.value = list[(i + 1) % list.length]
+		const audioCtx = ctx
+		if (audioCtx != null) {
+			audioCtx.playbackRate = rate.value
+		}
+	}
+
+	// 加载失败：尝试下一个源；全部失败则抛 error
+	function handleError(err: ICreateInnerAudioContextFail) {
+		if (srcIndex.value < srcList.value.length - 1) {
+			srcIndex.value = srcIndex.value + 1
+			currentTime.value = 0
+			progress.value = 0
+			const audioCtx = ctx
+			if (audioCtx != null) {
+				audioCtx.src = currentSrc.value
+				audioCtx.play()
+			}
+			return
+		}
+		playing.value = false
+		const msg = err.errMsg
+		errorMsg.value = msg == null || msg.length == 0 ? '音频加载失败' : msg
+		emit('error', { source: 'audio', errMsg: errorMsg.value } as UTSJSONObject)
+	}
+
+	function formatTime(sec: number): string {
+		const total = Math.floor(sec)
+		const m = Math.floor(total / 60)
+		const s = total % 60
+		const sStr = s < 10 ? '0' + s.toString() : s.toString()
+		return m.toString() + ':' + sStr
+	}
+
+	// 导出供模板使用的方法
+	defineExpose({
+		toggle,
+		reset,
+		changeRate
+	})
+</script>
+
+<style
+	lang="scss"
+	scoped
+>
+	.up-audio {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 12rpx 16rpx;
+		margin: 8rpx 0;
+		border-radius: 8rpx;
+		background-color: #f5f7fa;
+
+		&__btn {
+			flex-shrink: 0;
+			width: 56rpx;
+			height: 56rpx;
+			border-radius: 28rpx;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			margin-right: 16rpx;
+		}
+
+		&__btn-icon {
+			color: #ffffff;
+			font-size: 22rpx;
+			line-height: 24rpx;
+		}
+
+		&__main {
+			flex: 1;
+		}
+
+		&__row {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 2rpx;
+		}
+
+		&__title {
+			flex: 1;
+			font-size: 26rpx;
+			color: #303133;
+			lines: 1;
+			text-overflow: ellipsis;
+		}
+
+		&__time {
+			flex-shrink: 0;
+			font-size: 22rpx;
+			color: #909399;
+			margin-left: 12rpx;
+		}
+
+		&__slider {
+			margin: 0;
+			padding: 0;
+		}
+
+		&__rate {
+			flex-shrink: 0;
+			margin-left: 16rpx;
+			padding: 4rpx 12rpx;
+			border-radius: 20rpx;
+			border-width: 1px;
+			border-style: solid;
+			border-color: #dcdfe6;
+		}
+
+		&__rate-text {
+			font-size: 22rpx;
+			color: #606266;
+		}
+	}
+</style>