微信小程序之 如何添加背景图片 & 包大小超限解决方案

在PC端，给页面添加本地背景图片的写法为：

background-image: url("../images/local_image.png"); 

在微信小程序端则不能通过这种方式来操作，官方建议我们使用 base64 或 image 标签，或者网络图片来解决。

1.base64方式

首先需要将背景图片使用编码base64进行转换，网址如下：

http://tool.chinaz.com/tools/imgtobase/

转换完成后会生成对应的编码文本：

之后在对应的wxss文件中引用：

background-image: url("转换后的编码文本")

会发现这个文本超级长，而微信对包的大小是有限制的，多几个背景图片引用，包大小会容易超限。

2.image 标签方式

利用流布局，给z-index设置层级，将 image 标签置于底层：

wxml:

<view class='background'>
  <image class='background-image' src='../images/back.png'></image>
  <view class='background-content'>
    <view background-size="cover">
      这里是一段文本
    </view>
  </view>
</view>

wxss:

.background {
  display: flex;
  flex-direction: column;
}

.background-image {
  width: 100%;
  height: 500px;
}

.background-content {
  position: absolute;
  z-index: 1;
}

这种方式同样存在问题，如果图片较大，包大小同样会超限，所以，个人认为最好的方式就是通过网络图片来设置背景。

3.网络图片

使用的网络图片不用担心包大小的问题了，但是图片太大仍会导致加载慢，影响体验效果。

所以我们可以用PS工具缩小图片尺寸，同时还可以对图片进行压缩。

压缩图片的工具：

https://www.bejson.com/ui/compress_img/

选择图片压缩率，尽量让图片大小满足要求又不失真：

压缩完成后，将图片上传到服务器的指定路径下，就可以通过链接访问图片。

1. 基本方式

wxml：

<view class="sum-text" style="background-image: url('http://127.0.0.1/download?fileUrl=images/back.png')"></view>

生产环境，开发环境的路径配置有时是不一样的，所以这里我们也可以传变量。

2. 传变量方式

wxml:

<view class="sum-text" style="background-image: url({{sumImage}})"></view>

js:

// 导入公共全局变量，里面配置了base_url参数，指定了访问路径
import {
  config
} from "../../../config.js";

data: {
	sumImage: config.base_url + '/download?fileUrl=images/back.png'
}

小程序遇到包大小超出限制时，可以首先检查下是否有过大的图片，采用处理成网络图片的方式就可以快速解决这个问题。

欢迎关注我的公众号，用讲故事的方式学技术。

这里有脑洞大开的奇葩故事，也有温暖文艺的心灵感悟。

技术知识，也可以很有趣。