---

前言

首先要说明，使用HBuilder工具开发的时候，在微信开发者工具调试的时候，我们使用本地图片是OK的，但是一旦放到真机上调试的时候，图片就显示不出来。这个时候就需要将图片转换为base64才行

---

一、在scss样式设置

我在vue上如下设置的时候是不成功的，我目前还不知道什么原因，如果有同学知道的话还请告知
template

<view class="i-main" :style="backgroundImg">

scripte

data() {
     return {
		is_check: false,
		// imageUrl:'',
		backgroundImg: {
			backgroundImage: "url(data:image/png;base64,编码)",
			backgroundRepeat: "no-repeat",
			backgroundSize: "100% 100%",
		}
     };
   },

以上用于设置的 时候是不成功的
所以我只能在style的样式文件splash.scss中设置

.s-main-1{
	padding: 20rpx 40rpx 20rpx 40rpx;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	font-size: 26rpx;
	color: black;
	background-image: url(data:image/png;base64,编码);
	background-size: cover;
}

二、将base64图片作为参数使用

如果我们将base64的图片编码（编码好长好长呢）放到样式文件中，我们发现HBuilderX容易卡顿，非常的不方便，所以我们要把引用的base64编码作为参数放到style中就比较清爽了。步骤如下

1. 在common文件下创建一个sass，如base64-pic-store.scss文件
   

内容类似这样：

2. 然后在根目录下uni.scss下引入

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40upx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36upx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30upx;
@import '@/common/base64-pic-store.scss';

3. 最后在style的文件splash.scss下使用
   

三、背景图样式的切换

如果上述我们使用了base64图片作为背景的话，就会出现一个问题，上述我也讲过了，我没有办法通过vue上设置背景图片，那么就没有办法通过改变变量去控制我们的背景图，那么这个时候我们只能妥协使用样式了，方法如下：
（注：我们这里是指在一个vue下，即一个页面的生命周期下，切换多种页面的情况）

1. 在scss定义多个样式背景

.s-main-1{
	background-image: $survey_base64_code;
	background-size: cover;
}
.s-main-2{
	background-image: $zhongjian_base64_code;
	background-size: cover;
}
.s-main-3{
	background-image: $sikao_base64_code;
	background-size: cover;
}

2. 在vue上设置下

<view class="s-main-1" :class="[skin > 0 ? [ skin > 1 ? 's-main-3': 's-main-2']:'s-main-1']">

其中，skin是随着业务的变化而设置不同的值，其所对应的就是自己的业务背景图
另外需要注意的一点就是，如果我们切换的背景图片只有两种的话使用简单的三元运算符就可以了，但是我们的背景切换是选择多个的，所以我们就在三元运算上拓展了一下。

3. 问题
   但是如果我们使用的更多的背景图片的话，使用上述三元运算的变体相对来说太过于复杂，但是我也试过使用函数返回的形式来做，但是在uniapp的框架下是不支持的点，所以我目前上述只是一个妥协的方法，并不是最优方案，不过我的一个vue的生命周期内只需要切换三个背景图而已，对于我目前的需求来说还是比较合适的，我们在开发的过程中，并不是方法论也好就是对的，合适自己的方法，能够最简单的解决我们当前的问题才是最合适的。当然除考虑到扩展性之外。

---

总结

注意，创建的base64-pic-sore.scss的格式要和我们页面用的style的文件格式要一致，要不然编译的时候会报我们定义的参数名未定义。之前我使用splash.less作为样式文件引入到vue中，但是我还是使用base64-pic-sore.scss保存我的参数，编译的时候就报$survey_base64_code未定义，所以一定要保证他们的格式一致