图片、接口封装

不爱吃糖的程序媛

发布于 2024-01-18 20:41:32

1050

发布于 2024-01-18 20:41:32

最近在做小程序项目，首先会将整个项目的图片、接口做个封装，以及公共样式的提取。这样做的好处是图片接口前面的地址可能会发生改变，那么改动的时候只用改一个地方就好了。今日讲讲怎么做图片、接口的封装

图片封装

一张图片的完整地址如下： src=“http://10.1.200.99:32000/runyang/miniprogram/prod/animation/park/swiperAll.png” 那么服务器这个存放图片的文件夹很多图片一样的前缀地址，所以来封装了。

imgPath.js

//静态全局图片路径处理
const defaultUrl =
  "http://10.1.200.99:32000/runyang/miniprogram/prod/animation";

export default {
  // 首页
  home: {
    payCar: ``, // 停车缴费
  },
  // 发送邮件图片
  sendEmail: {
    successImg: `${defaultUrl}/mail//successIcon.png`,
    closeIcon: `${defaultUrl}/mail//icon_close.png`,
  },
  // 物业服务
  property: {},
  // 物业服务-信息
  propertyInfor: {
    basic: `${defaultUrl}/property/icon_property_basic.png`, // 基本信息
    handle: `${defaultUrl}/property/icon_property_handle.png`, // 办理流程
    apply: `${defaultUrl}/property/icon_property_apply.png`, // 申请材料
    offline: `${defaultUrl}/property/icon_property_offline.png`, // 线下办理
    toll: `${defaultUrl}/property/icon_property_toll.png`, // 收费标准
  },
  // 场地租用-封面
  venueCover: {
    publicArt: `${defaultUrl}/venue/venue_one.png`, // 公共艺术空间
  },
  // 场地租用-轮播图
  venueSwipper: {
    publicArt: [`${defaultUrl}/venue/venue_one.png`], // 公共艺术空间
  },
  // 场地租用-服务设施
  venueFacility: {
    projector: `${defaultUrl}/venue/icon_projector.png`, // 投影仪
    microphone: `${defaultUrl}/venue/icon_microphone.png`, // 麦克风
    audio: `${defaultUrl}/venue/icon_audio.png`, // 音响
    air: `${defaultUrl}/venue/icon_air.png`, // 空调
    parking: `${defaultUrl}/venue/icon_parking.png`, // 停车位
  },
  // 园区
  park: {
    map: `${defaultUrl}/park/map.png`, // 地图
    introduceOne: `${defaultUrl}/park/park_01.png`, // 园区介绍图1
    introduceTwo: `${defaultUrl}/park/park_02.png`, // 园区介绍图2
    introduceThree: `${defaultUrl}/park/park_03.png`, // 园区介绍图3
    partner: [
      `${defaultUrl}/park/partner_logo_01.png`,
      `${defaultUrl}/park/partner_logo_02.png`,
      `${defaultUrl}/park/partner_logo_03.png`,
      `${defaultUrl}/park/partner_logo_04.png`,
    ], // 合作伙伴
  },
  }

其他页面用该图片封装的用法：