5、用Hbuilderx编写【案例】6、相册选择代码，并且实现其筛选相片功能。

在HBuilderX（DCloud的IDE）中创建一个简单的相册选择并筛选照片的示例，我们需要使用VUE.js的框架配合Echarts库来展示图片以及提供筛选功能。以下是一个基本步骤：

1. 首先，在HBuilderX新建一个Vue项目，设置好组件结构。

<template>
  <div>
    <div id="photoGallery" ref="photoGallery"></div>
    <el-input v-model="filterText" placeholder="输入关键词进行筛选"></el-input>
  </div>
</template>

<script>
import ECharts from 'echarts';

export default {
  data() {
    return {
      photoList: [],
      filterText: '',
    };
  },
  mounted() {
    this.loadPhotos();
  },
  methods: {
    loadPhotos() { ... }, // 在这里加载相册数据
    filterPhotos() { ... } // 过滤函数，基于filterText
  }
};
</script>

2. 加载相册数据通常需要使用设备的原生API，如`wx.getSetting`（针对微信小程序）、`navigator.mediaDevices.enumerateDevices`（针对浏览器），获取到相册路径列表后，读取图片。

3. `loadPhotos`方法可以这样实现，假设我们已经从本地存储或网络获取到了照片数组：

methods: {
  async loadPhotos() {
    let photos = await getAlbumPhotos(); // 假设getAlbumPhotos是获取照片的方法
    this.photoList = photos.map(photo => ({
      src: photo.url,
      title: photo.name,
    }));
  },
}

4. 筛选照片函数 `filterPhotos` 可以利用ECharts提供的搜索框事件监听器，当用户输入关键字时动态过滤图片：

methods: {
  ...,
  filterPhotos() {
    this.photoList = this.photoList.filter(photo => {
      return photo.title.includes(this.filterText);
    });
  },
  handleSearchInput(e) {
    this.filterText = e.target.value;
    this.filterPhotos();
  },
},
mounted() {
  this.handleSearchInput({ target: { value: '' } }); // 初始化时清空输入
  // 绑定搜索框输入事件
  this.$refs.searchInput.addEventListener('input', this.handleSearchInput);
}
</script>

5. 最后，在模板里渲染ECharts图表作为容器，实际场景下你可以用它来显示缩略图，并给每个缩略图添加点击事件，打开大图预览。

注意，这个例子简化的了部分细节，例如错误处理、兼容性和用户体验优化等。在实际应用中，你需要根据目标环境和需求进行调整。