更新记录

1.0(2024-08-14) 下载此版本

1.0


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.18 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

cach-img 图片缓存

cach-img 图片缓存 (缓存到指定目录,查看缓存图片,管理缓存图片 ) 。

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

使用原生 plus.io 模块指定目录下载,需要在app加载时指定缓存目录;

基本用法

  • 页面结构
    <view class="content">
    <view style="position: absolute; top: 5rpx; width: 100vw;">
      <button @click="topage" size="default" type="default">查看缓存图片</button>
    </view>
    <view v-for="(item, index) in imgList" :key="index" class="image-box" @tap="viewImg([item])">
      <cach-img :image-src="item" :SaveDirectory="SaveDirectory" :cache="cache" class="image"></cach-img>
    </view>
    </view>
    </template>
  • JavaScript结构

    <script>
    export default {
    data() {
      return {
        imgList: [],
        cache: true,
        SaveDirectory: 'image/'
      }
    },
    mounted() {
      const packageName = plus.android.runtimeMainActivity().getPackageName();
      uni.getSystemInfo({
        success: res => {
          const localUrl =
            `file:///storage/emulated/0/Android/data/${packageName}/apps/${res.appId}/cachimg/`;
          //console.log(localUrl);
          uni.setStorageSync('localUrl', localUrl);
        }
      });// 可放在APP.vue中,初始化执行
    },
    onShow() {
      this.fetchImages(); // 调用新的方法来获取图片
    },
    methods: {
      fetchImages() {
        // 清空当前图片列表
        this.imgList = [];
        // 模拟从服务器获取图片列表的逻辑
        const images = [
          "https://www.w3schools.com/w3images/lights.jpg",
          "https://www.w3schools.com/w3images/nature.jpg",
          "https://www.w3schools.com/w3images/mountains.jpg"
        ];
        // 将图片列表设置到data中
        this.imgList = images;
      },
      viewImg(imgList) {
        uni.previewImage({
          urls: imgList
        });
      },
      topage() {
        uni.redirectTo({
          url: "/pages/index/ImageListPage"
        })
      }
    }
    }
    </script>
    
    <style>
    .content {
    height: 100vh;
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
    
    .image-box {
    height: 80vh;
    margin: 0 auto;
    width: 90%;
    height: 400rpx;
    margin-bottom: 30rpx;
    }
    
    .image {
    min-width: 100%;
    max-height: 100%;
    width: 100%;
    border-radius: 30rpx;
    }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问