feat:【antd】【mp】mp 的代码评审(components)
This commit is contained in:
@@ -1,14 +1,3 @@
|
||||
<!--
|
||||
- Copyright (C) 2018-2019
|
||||
- All rights reserved, Designed By www.joolun.com
|
||||
【微信消息 - 语音】
|
||||
芋道源码:
|
||||
① bug 修复:
|
||||
1)joolun 的做法:使用 mediaId 从微信公众号,下载对应的 mp4 素材,从而播放内容;
|
||||
存在的问题:mediaId 有效期是 3 天,超过时间后无法播放
|
||||
2)重构后的做法:后端接收到微信公众号的视频消息后,将视频消息的 media_id 的文件内容保存到文件服务器中,这样前端可以直接使用 URL 播放。
|
||||
② 代码优化:将 props 中的 reply 调成为 data 中对应的属性,并补充相关注释
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
@@ -17,8 +6,10 @@ import { IconifyIcon } from '@vben/icons';
|
||||
// 因为微信语音是 amr 格式,所以需要用到 amr 解码器:https://www.npmjs.com/package/benz-amr-recorder
|
||||
import BenzAMRRecorder from 'benz-amr-recorder';
|
||||
|
||||
/** 微信消息 - 语音 */
|
||||
defineOptions({ name: 'VoicePlayer' });
|
||||
|
||||
// TODO @hw:antd 和 ele 代码风格一致;
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String, // 语音地址,例如说:https://www.iocoder.cn/xxx.amr
|
||||
@@ -92,6 +83,7 @@ const amrStop = () => {
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
/** TODO @dylan:看看有没适合 tindwind 的哈。 */
|
||||
.wx-voice-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user