首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >图片、接口封装

图片、接口封装

作者头像
程序媛夏天
发布于 2024-01-18 12:41:32
发布于 2024-01-18 12:41:32
15300
代码可运行
举报
运行总次数:0
代码可运行

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

图片封装

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

imgPath.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//静态全局图片路径处理
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`,
    ], // 合作伙伴
  },
  }

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

接口封装

看下一篇文章啦!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-01-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
QTX潮玩展 | 艺展美陈空间设计揭秘
前言 Foreword 在上篇QQ潮玩展的文章里给大家分享了有关「创意品牌设计系统」的构思过程,想必大家都意犹未尽。好的展会品牌系统也要有极具创意的美陈装置来烘托氛围(“美陈”是指为商业环境或空间进行美化装饰和陈列展示),它们相互衬托呼应让展览达到最佳效果。本篇文章将给大家分享QQ潮玩展中那些好玩有趣的创意装置从设计到落地的整个过程,干货满满。 In the previous article of QQ Art Toys exhibition,we shared the conception proc
腾讯ISUX
2020/10/22
1.3K0
Flutter实战 | 从 0 搭建「网易云音乐」APP(二、Splash Page、登录页、发现页)
本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来。
Flutter笔记
2019/10/16
2.1K0
【前端探索】告别烂代码第二期!用策略模式封装分享组件
为什么写本文?主要是通过对一个业务组件的代码重构,交流一下前端封装组件需要注意的问题。这中间也会穿插一些设计模式的小知识点,方便温故知新,如果有理解不准确和设计上不合理的地方,欢迎指正。
luciozhang
2023/04/22
2900
【前端探索】告别烂代码第二期!用策略模式封装分享组件
自研flutter3.x实战仿抖音app短视频直播FlutterLive
flutter3.x_douyin基于flutter3+dart3+getx+meidaKit等技术开发抖音版app视频直播项目。
andy2018
2024/03/25
1.2K0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
创建Application时机 : Application在启动的时候会调用Application无参的构造方法创建实例; 
韩曙亮
2023/03/27
7500
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----201
前端人人
2018/04/11
1.7K0
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
猿实战03——猿首战之手把手教你撸品牌
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是问题。想要一起实战吗?,关注公主号猿人工厂,获取基础代码,手把手带你开发一个完整的电商系统。
山旮旯的胖子
2020/08/24
6880
猿实战03——猿首战之手把手教你撸品牌
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
HelloWorldZ
2024/03/20
2040
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
【JavaScript期末大作业】基于html+css+javascript+jquery+bootstrap票务销售系统管理后台模板.md
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发
IT司马青衫
2022/08/10
1.3K0
【JavaScript期末大作业】基于html+css+javascript+jquery+bootstrap票务销售系统管理后台模板.md
基于微信小程序+SpringBoot的停车位共享管理系统的设计和实现
今天,汽车的数量每天都在增加。现有停车位虽然满足了部分停车场业主的需求,但停车场资源利用不足的现象依然存在,有必要提出公共停车位的设计理念。在共享经济的背景下,该设计意味着只要固定车位数量,就可以改善原有的停车电压状况。该设计措施最显著的特点是可以将私人停车位共享,体现停车位的最大价值,使私人停车位在闲置时可以直接转化为经济效益,使其他车主为停车设施。促进对停车资源的临时需求,促进停车资源的滥用。本文分析了我国现有车位存在的问题以及建立通用车位系统的必要性。在视觉设计和创新方面,我们将讨论共享车位的设计系统。作为停车系统的公共平台形式,我们提出了解决专用泊位共享使用的方法,设计了完整的公共停车系统框架。 针对停车难的问题,提出了一种基于UniApp的小型车位共享方案。最初,一个基于uniapp的洗脚程序是为了管理停车场所有者共享的停车位而开发的。接下来,通过分析车位共享平台的运营需求,确定系统中各个角色的用户以及他们之间的交互模型,创建以车位为中心的系统软件模型和功能框架。做的。通过Java Web和UniApp,为每个用户开发了移动应用软件,并成功建立了双方之间的沟通。停车场业主发布停车场共享信息,普通用户预留停车位,维修人员维修受损锁,这些都是非常重要的,有利于解决停车问题。
Designer 小郑
2023/08/01
2K1
基于微信小程序+SpringBoot的停车位共享管理系统的设计和实现
快应用初探--把个人博客封装成快应用
最近公司在做快应用的需求,经过2周的努力,淘粉吧快应用已经上线了,现在借此机会跟大家聊聊快应用。
kai666666
2020/10/17
7520
Web前端面试宝典(最新)
html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
半指温柔乐
2018/09/11
3.3K0
vue+vue-cropper实现上传剪裁图片以及上传时压缩图片
代码暂时都是从项目中抽出来的,只适合借鉴参考,等有时间再单独将这些功能单独写项目,欢迎大家提供更好用的方法或指出不足之处,一起进步。
conanma
2021/11/03
3.8K0
TypeScript + 微信小程序:构建高效可维护的项目
打开微信开发者工具,新建项目,模板选择【TS-基础模板】,当然你也可以选择带有Sass或是Less的基础版本,根据项目开发习惯和代码风格自行选择,这里仅是作为一个示例,目录结构如下所示,相关基础配置可参考微信官方文档,这里不再复述。
Nian糕
2024/11/30
1.1K0
TypeScript + 微信小程序:构建高效可维护的项目
实例演示Android异步加载图片
本文给大家演示异步加载图片的分析过程。让大家了解异步加载图片的好处,以及如何更新UI。 首先给出main.xml布局文件: 简单来说就是 LinearLayout 布局,其下放了2个TextView和
欢醉
2018/01/22
1.5K0
Flutter从静态界面到抽取封装
今天将用Flutter的组件来实际布局演练一下,在此之前你需要熟悉Flex布局 1、微信条目的静态布局 这个平时非常常见,而且相对简单,所以是个练手的不错人选 简单分析一下:一共三块,用Row布局,
张风捷特烈
2020/04/30
1.1K0
Flutter从静态界面到抽取封装
封装avalonia指定组件允许拖动的工具类
创建Avalonia的MVVM项目,命名DragDemo ,然后将项目的Nuget包更新到预览版
tokengo
2023/02/28
9990
个人总结(css3新特性)
css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻找一些讲得更深入的文章或者书籍了!如果大家有什么其他特性推荐的,欢迎补充!大家一起学习,进步!
守候i
2018/08/22
2.4K0
个人总结(css3新特性)
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
本文先介绍了搜索结果页开发,包括搜索类型的传递、占位符设置和搜索功能实现; 再介绍了帖子详情页的开发,包括页面配置和通信、公共列表组件优化、关注顶踩功能完善、帖子内容和图片展示、评论输入框组件开发和封装、评论列表组件和分享功能组件开发等。
cutercorley
2021/02/04
2.5K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
vue项目基础配置
bash 切换到桌面 运行 vue init webpack vue-demo 生成初始化vue项目
青梅煮码
2023/03/02
5900
推荐阅读
QTX潮玩展 | 艺展美陈空间设计揭秘
1.3K0
Flutter实战 | 从 0 搭建「网易云音乐」APP(二、Splash Page、登录页、发现页)
2.1K0
【前端探索】告别烂代码第二期!用策略模式封装分享组件
2900
自研flutter3.x实战仿抖音app短视频直播FlutterLive
1.2K0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
7500
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
1.7K0
猿实战03——猿首战之手把手教你撸品牌
6880
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
2040
【JavaScript期末大作业】基于html+css+javascript+jquery+bootstrap票务销售系统管理后台模板.md
1.3K0
基于微信小程序+SpringBoot的停车位共享管理系统的设计和实现
2K1
快应用初探--把个人博客封装成快应用
7520
Web前端面试宝典(最新)
3.3K0
vue+vue-cropper实现上传剪裁图片以及上传时压缩图片
3.8K0
TypeScript + 微信小程序:构建高效可维护的项目
1.1K0
实例演示Android异步加载图片
1.5K0
Flutter从静态界面到抽取封装
1.1K0
封装avalonia指定组件允许拖动的工具类
9990
个人总结(css3新特性)
2.4K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
2.5K0
vue项目基础配置
5900
相关推荐
QTX潮玩展 | 艺展美陈空间设计揭秘
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验