小程序网络资源统一管理,通过css变量使用网络资源

存在问题:

小程序开发时,为了减少小程序代码包的体积,一般会将 static 目录下的静态资源放在服务端,通过网络资源形式引入。

通过 image 标签的 src 属性引入使用

<image class="logo" src="https://test.png">image>

当使用的网络资源比较多,后期需要替换资源的路径,工作量就会比较大。

解决方案:

将网络资源通过css变量形式定义,放在一个文件中统一管理。需要使用时,通过背景图片形式引入。

示例:

小程序开发框架为uni-app,以oss服务器为例

1、静态资源存放到服务器

2、资源路径引入

static 目录下新建 oss.scss 文件

将资源的网络路径以 scss变量形式定义

以下地址仅为示例,并非真实存在

/* logo */
$oss-logo: 'https://test1.png';
$oss-logo-circle: 'https://test2.png';
$oss-logo-circle2: 'https://test3.png';

/* font */
$oss-font-barlow: 'https://Barlow-BoldItalic.ttf';

在 scss 中,可以使用 $ 符号定义变量,定义一个变量后,可以在样式代码的任何地方使用该变量。

在使用变量时,变量名称前必须要加上 $ 符号。

3、全局引入 oss.scss

在根目录 uni.scss 文件中引入 oss.scss

@import "@/static/oss.scss";

4、变量使用

当需要展示图片时:

创建 view 标签,css 中通过背景图片形式使用网络资源

<view class="logo">view>
.logo {
  width: 86rpx;
  height: 86rpx;
  background: url($oss-logo-circle2) no-repeat top left;
  background-size: 86rpx;
}

当需要设置字体样式时:

@font-face {
  font-family: Barlow-BoldItalic;
  src: url($oss-font-barlow);
}

你可能感兴趣的:(小程序,小程序,css,前端)