uview-ultra 4.5.75 → 4.5.77

package/components/up-audio/up-audio.vue

@@ -0,0 +1,315 @@
+<template>
+	<view class="up-audio">
+		<!-- 播放/暂停按钮 -->
+		<view
+			class="up-audio__btn"
+			:style="{ backgroundColor: activeColor }"
+			@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>
+	import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+	import { props as audioProps } from './props.js'
+	import { commonProps } from '../../libs/composable/useUltraUI.js'
+	import { audioInstancePool } from './audio-pool.js'
+	/**
+	 * up-audio 音频播放器
+	 * @description uni-app 在 Vue3 中已废弃 <audio> 组件，本组件基于 uni.createInnerAudioContext 实现播放，可单独使用，up-parse 的音频节点也由本组件渲染。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/audio.html
+	 * @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>
+	 */
+	defineOptions({
+		name: 'up-audio',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...audioProps.props
+	})
+	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)
+	const seeking = ref(false)
+	const errorMsg = ref('')
+	let ctx = null
+
+	const srcList = computed(() => {
+		if (Array.isArray(props.src)) return props.src.filter(Boolean)
+		return props.src ? [props.src] : []
+	})
+	const displayTitle = computed(() => props.title || '')
+	const hasTitle = computed(() => props.showTitle && displayTitle.value !== '')
+	const currentSrc = computed(() => srcList.value[srcIndex.value] || '')
+	const rateText = computed(() => {
+		const r = rate.value
+		return (Number.isInteger(r) ? r.toFixed(0) : String(r)) + 'x'
+	})
+
+	// src 变化时重建播放器
+	watch(() => props.src, () => {
+		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) return
+		const audioCtx = uni.createInnerAudioContext()
+		ctx = audioCtx
+		audioCtx.src = currentSrc.value
+		if (props.loop) audioCtx.loop = true
+		audioCtx.onPlay(() => {
+			playing.value = true
+			// 暂停实例池中的其它音频，保证多实例互斥
+			for (let i = audioInstancePool.length; i--;) {
+				if (audioInstancePool[i] !== audioCtx) {
+					try { audioInstancePool[i].pause() } catch (e) {}
+				}
+			}
+			emit('play', {
+				source: 'audio',
+				src: currentSrc.value
+			})
+		})
+		audioCtx.onPause(() => { playing.value = false })
+		audioCtx.onStop(() => { playing.value = false })
+		audioCtx.onEnded(() => {
+			playing.value = false
+			currentTime.value = 0
+			progress.value = 0
+		})
+		audioCtx.onTimeUpdate(() => {
+			if (seeking.value) return
+			currentTime.value = audioCtx.currentTime || 0
+			if (audioCtx.duration) duration.value = audioCtx.duration
+			progress.value = duration.value ? (currentTime.value / duration.value) * 100 : 0
+		})
+		audioCtx.onCanplay(() => {
+			if (audioCtx.duration) duration.value = audioCtx.duration
+		})
+		audioCtx.onError(err => handleError(err))
+		audioInstancePool.push(audioCtx)
+	}
+
+	function destroy() {
+		if (ctx) {
+			const idx = audioInstancePool.indexOf(ctx)
+			if (idx > -1) audioInstancePool.splice(idx, 1)
+			try { ctx.destroy() } catch (e) {}
+			ctx = null
+		}
+	}
+
+	function toggle() {
+		if (!ctx) return
+		if (playing.value) {
+			ctx.pause()
+		} else {
+			ctx.play()
+		}
+	}
+
+	// 拖动进度条中（只更新本地显示）
+	function onChanging(e) {
+		seeking.value = true
+		progress.value = e.detail.value
+		currentTime.value = duration.value ? (duration.value * e.detail.value) / 100 : 0
+	}
+
+	// 拖动结束，真正 seek
+	function onChange(e) {
+		seeking.value = false
+		progress.value = e.detail.value
+		if (ctx && duration.value) {
+			try { ctx.seek((duration.value * e.detail.value) / 100) } catch (err) {}
+		}
+	}
+
+	function changeRate() {
+		const list = (props.rateList && props.rateList.length) ? props.rateList : [0.5, 0.75, 1, 1.25, 1.5, 2]
+		let i = list.indexOf(rate.value)
+		if (i === -1) i = list.indexOf(1)
+		rate.value = list[(i + 1) % list.length]
+		if (ctx) {
+			try { ctx.playbackRate = rate.value } catch (e) {}
+		}
+	}
+
+	// 加载失败：尝试下一个源；全部失败则抛 error
+	function handleError(err) {
+		if (srcIndex.value < srcList.value.length - 1) {
+			srcIndex.value += 1
+			currentTime.value = 0
+			progress.value = 0
+			if (ctx) {
+				ctx.src = currentSrc.value
+				try { ctx.play() } catch (e) {}
+			}
+			return
+		}
+		playing.value = false
+		errorMsg.value = (err && err.errMsg) || '音频加载失败'
+		emit('error', {
+			source: 'audio',
+			errMsg: errorMsg.value
+		})
+	}
+
+	function formatTime(sec) {
+		sec = Math.floor(sec || 0)
+		const m = Math.floor(sec / 60)
+		const s = sec % 60
+		return m + ':' + (s < 10 ? '0' + s : s)
+	}
+
+	defineExpose({
+		toggle,
+		reset,
+		changeRate
+	})
+</script>
+
+<style
+	lang="scss"
+	scoped
+>
+	.up-audio {
+		display: flex;
+		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: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-right: 16rpx;
+		}
+
+		&__btn-icon {
+			color: #ffffff;
+			font-size: 22rpx;
+			line-height: 1;
+		}
+
+		&__main {
+			flex: 1;
+			min-width: 0;
+		}
+
+		&__row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 2rpx;
+		}
+
+		&__title {
+			flex: 1;
+			font-size: 26rpx;
+			color: #303133;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		&__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: 1px solid #dcdfe6;
+		}
+
+		&__rate-text {
+			font-size: 22rpx;
+			color: #606266;
+		}
+	}
+</style>

package/components/up-lottie/up-lottie.uvue

@@ -37,8 +37,11 @@ defineOptions({
 
 /**
  * lottie-miniprogram 的 setup() 需要一个小程序 canvas 节点：
- * 读 width / height、调 getContext('2d')。uni-app x 没有 canvas 节点对象，
- * 这里用一个桩把 up-canvas 暴露的原生 2D 上下文包装成它期望的形状。
+ * 读 width / height、调 getContext('2d')，并在初始化时接管 requestAnimationFrame /
+ * cancelAnimationFrame（内部会执行 `canvas.cancelAnimationFrame.bind(canvas)`，
+ * 缺这两个方法会抛 "Cannot read properties of undefined (reading 'bind')"）。
+ * uni-app x 没有 canvas 节点对象，这里用一个桩把 up-canvas 暴露的原生 2D 上下文
+ * 包装成它期望的形状。
  */
 class UpLottieCanvasStub {
 	width: number = 0
@@ -54,6 +57,17 @@ class UpLottieCanvasStub {
 	getContext(type: string): CanvasRenderingContext2D {
 		return this.context
 	}
+
+	// 用 setTimeout 模拟 16ms 一帧；uni-app x 没有 canvas 节点级的 rAF
+	requestAnimationFrame(callback: (time: number) => void): number {
+		return setTimeout(() => {
+			callback(Date.now())
+		}, 16)
+	}
+
+	cancelAnimationFrame(handle: number): void {
+		clearTimeout(handle)
+	}
 }
 
 const props = defineProps({

package/components/up-parse/node/node.vue

@@ -41,9 +41,9 @@
       <iframe v-else-if="n.name==='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
       <embed v-else-if="n.name==='embed'" :style="n.attrs.style" :src="n.attrs.src" />
       <!-- #endif -->
-      <!-- #ifndef MP-TOUTIAO || ((H5 || APP-PLUS) && VUE3) -->
-      <!-- 音频 -->
-      <audio v-else-if="n.name==='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #ifndef APP-PLUS-NVUE -->
+      <!-- 音频：uni-app Vue3 已废弃 <audio> 组件，统一改用 up-audio 播放（基于 uni.createInnerAudioContext） -->
+      <up-audio v-else-if="n.name==='audio'" :src="n.src" :title="n.attrs.title || n.attrs.name" :loop="!!n.attrs.loop" @play="onAudioPlay" @error="onAudioError" />
       <!-- #endif -->
       <view v-else-if="(n.name==='table'&&n.c)||n.name==='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
         <node v-if="n.name==='li'" :childs="n.children" :opts="opts" />
@@ -112,6 +112,10 @@ import { getCurrentInstance, nextTick, onBeforeUnmount, onMounted, reactive } fr
 import node from './node'
 // #endif
 
+// #ifndef APP-PLUS-NVUE
+import UpAudio from '../up-audio/up-audio.vue'
+// #endif
+
 defineOptions({
 	name: 'node',
 	options: {
@@ -233,6 +237,20 @@ function play(e) {
 	// #endif
 }
 
+/**
+ * @description 音频播放事件（up-audio 触发，转发给 up-parse）
+ */
+function onAudioPlay(payload) {
+	root?.$emit('play', payload)
+}
+
+/**
+ * @description 音频加载/播放错误事件（up-audio 触发，转发给 up-parse）
+ */
+function onAudioError(payload) {
+	root?.$emit('error', payload)
+}
+
 /**
  * @description 图片点击事件
  */

package/components/up-video/video.uts

@@ -74,5 +74,4 @@ export default {
         // 进度条与选中态颜色
         activeColor: '#2979ff'
     }
-}
- as UTSJSONObject
+} as UTSJSONObject

package/libs/config/props.js

@@ -8,6 +8,7 @@ import config from './config.js'
 import ActionSheet from '../../components/up-action-sheet/actionSheet.js'
 import Album from '../../components/up-album/album.js'
 import Alert from '../../components/up-alert/alert.js'
+import Audio from '../../components/up-audio/audio.js'
 import Avatar from '../../components/up-avatar/avatar.js'
 import AvatarGroup from '../../components/up-avatar-group/avatarGroup.js'
 import Backtop from '../../components/up-back-top/backtop.js'
@@ -106,6 +107,7 @@ const props = {
     ...ActionSheet,
     ...Album,
     ...Alert,
+    ...Audio,
     ...Avatar,
     ...AvatarGroup,
     ...Backtop,

package/package.json

@@ -1,8 +1,8 @@
 {
   "id": "uview-ultra",
   "name": "uview-ultra",
-  "displayName": "零云®UviewUltra v4重磅发布，大满贯全面兼容uniapp-x、uniapp鸿蒙组件库。",
-  "version": "4.5.75",
+  "displayName": "零云®UviewUltra v4重磅发布，大满贯全面兼容uniapp-x蒸汽模式、uniapp鸿蒙组件库。",
+  "version": "4.5.77",
   "description": "uview-ultra全面兼容uni-app/uni-app-x/鸿蒙/nvue，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
   "keywords": [
     "uview",
@@ -20,7 +20,7 @@
   "dcloudext": {
     "sale": {
       "regular": {
-        "price": "0.00"
+        "price": "9.90"
       },
       "sourcecode": {
         "price": "0.00"

package/types/comps/audio.d.ts

@@ -0,0 +1,57 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface AudioProps {
+  /**
+   * 音频地址，支持单个地址或地址数组（多源，加载失败自动切换）
+   * @default ""
+   */
+  src?: string | string[]
+  /**
+   * 标题，显示在音频条上
+   * @default ""
+   */
+  title?: string
+  /**
+   * 是否循环播放
+   * @default false
+   */
+  loop?: boolean
+  /**
+   * 是否显示倍速切换
+   * @default true
+   */
+  showRate?: boolean
+  /**
+   * 可切换的倍速档位
+   * @default [0.5, 0.75, 1, 1.25, 1.5, 2]
+   */
+  rateList?: number[]
+  /**
+   * 主题色（播放按钮、进度条选中色）
+   * @default "#2979ff"
+   */
+  activeColor?: string
+  /**
+   * 是否显示标题
+   * @default true
+   */
+  showTitle?: boolean
+  /**
+   * 开始播放时触发
+   */
+  onPlay?: (e: { source: string; src: string }) => any
+  /**
+   * 加载/播放出错时触发
+   */
+  onError?: (e: { source: string; errMsg: string }) => any
+}
+
+declare interface _Audio {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      AudioProps
+  }
+}
+
+export declare const Audio: _Audio