利用HBuilderX 实现李白介绍页面 1、展示人物图片 2、展示诗句并朗诵 3、播放人物介绍视频 提交项目压缩包

利用HBuilderX创建一个李白介绍页面可以按照以下步骤进行：

1. **设计界面**:
- 首先，打开HBuilderX的UI设计工具，创建一个新的页面。在布局上添加一个ImageView用于展示人物图片，通常可以设置成圆角矩形样式，背景透明以便于显示网络加载的头像。

<image src="@bind(data.avatarUrl)" placeholder="默认头像" mode="cover" borderRadius="50%" />

2. **诗歌展示**:
- 创建一个TextView，动态绑定李白的诗句数据。你可以通过网络请求获取李白的代表性诗词，并使用`text`属性展示。

<view class="poem">
  <text text="{{data.poem}}" />
</view>

3. **朗诵功能**:
- 使用HBuilderX的音频播放组件（如TcPlayer），将李白诗词的朗诵音频文件绑定到一个Audio组件，点击或长按时触发播放。

<audio url="@bind(data朗诵Url)" @click="playPoemAudio" controls></audio>
<script>
export default {
  methods: {
    playPoemAudio() {
      this.$refs.audio.play();
    }
  },
  data() {
    return {
      poemAudioRef: null,
    };
  },
  mounted() {
    this.poemAudioRef = this.$refs.audio;
  },
};
</script>

4. **视频播放**:
- 如果有李白的人物介绍视频，同样可以添加一个Video组件，设置src属性指向视频地址。

<video src="@bind(data.videoUrl)" @error="handleVideoError" controls></video>
<script>
export default {
  methods: {
    handleVideoError(e) {
      console.error('视频加载失败', e);
    }
  },
};
</script>

5. **获取数据**:
- 你需要从服务器或本地资源获取李白的图片URL、诗句、朗诵音频和视频链接，并在对应的data字段中存储。

完成后，记得保存并导出HTML、CSS和JavaScript文件，然后将整个项目打包成压缩包提供下载。