在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'
}
小程序遇到包大小超出限制时,可以首先检查下是否有过大的图片,采用处理成网络图片的方式就可以快速解决这个问题。
欢迎关注我的公众号,用讲故事的方式学技术。
这里有脑洞大开的奇葩故事,也有温暖文艺的心灵感悟。
技术知识,也可以很有趣。