uniapp请求网络接口获取 播放视频 播放音乐 显示图片 显示文字

后台接口django API：

请求地址：http://192.168.0.105:8000/testjson/

def testjson(request):
    data = {
    'yy': 'http://m10.music.126.net/20230508153727/e449fe6e85027f3acbdcf0be160a46b6/ymusic/0f52/5252/0e52/882b491a3ee8bcf233ce98b64dd1c6e8.mp3',
    'sp': 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
    'tp': 'https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg',
    'wz': '猛志逸四海，骞翮思远翥。 —— 陶渊明',
    }
    return HttpResponse(json.dumps(data))

app端index.vue:

参考官网教程：video | uni-app官网

注意音乐如果播放不出来 请更换后台api中json数据中的·音乐地址链接

<template>
		<view class="flex">
			<text>{
   
   {itemList.yy}}<br/></text>
			<audio style="text-align: left" :poster="img" :src="itemList.yy" name="红日" author="李克勤" action="pause" controls></audio>
			<text>{
   
   {itemList.sp}}<br/></text>
			<video id="myVideo" :src="itemList.sp"controls></video>
			<text>{
   
   {itemList.tp}}<br/></text>
			<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit" :src="itemList.tp"></image>
			<br/><text>{
   
   {itemList.wz}}<br/></text>
		</view>

</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
				img:'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png'
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			 getList() {
				uni.request({
			        url: 'http://192.168.0.105:8000/testjson/', 
					method:'GET',
			        success: (res) => {
			            console.log(res.data);
			             this.itemList =res.data;
						 
			        }
			    });
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>