文章目錄

• 前言
• 一、在scss樣式設置
• 二、將base64圖片作為參數使用
• 三、背景圖樣式的切換
• 總結

---

前言

首先要說明，使用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中就比較清爽了。步驟如下

在common文件下創建一個sass，如base64-pic-store.scss文件

內容類似這樣：

然后在根目錄下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';

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

三、背景圖樣式的切換

如果上述我們使用了base64圖片作為背景的話，就會出現一個問題，上述我也講過了，我沒有辦法通過vue上設置背景圖片，那么就沒有辦法通過改變變量去控制我們的背景圖，那么這個時候我們只能妥協使用樣式了，方法如下：
（注：我們這里是指在一個vue下，即一個頁面的生命周期下，切換多種頁面的情況）

在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; }

在vue上設置下

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

其中，skin是隨著業務的變化而設置不同的值，其所對應的就是自己的業務背景圖
另外需要注意的一點就是，如果我們切換的背景圖片只有兩種的話使用簡單的三元運算符就可以了，但是我們的背景切換是選擇多個的，所以我們就在三元運算上拓展了一下。

問題
但是如果我們使用的更多的背景圖片的話，使用上述三元運算的變體相對來說太過于復雜，但是我也試過使用函數返回的形式來做，但是在uniapp的框架下是不支持的點，所以我目前上述只是一個妥協的方法，并不是最優方案，不過我的一個vue的生命周期內只需要切換三個背景圖而已，對于我目前的需求來說還是比較合適的，我們在開發的過程中，并不是方法論也好就是對的，合適自己的方法，能夠最簡單的解決我們當前的問題才是最合適的。當然除考慮到擴展性之外。

---

總結

注意，創建的base64-pic-sore.scss的格式要和我們頁面用的style的文件格式要一致，要不然編譯的時候會報我們定義的參數名未定義。之前我使用splash.less作為樣式文件引入到vue中，但是我還是使用base64-pic-sore.scss保存我的參數，編譯的時候就報$survey_base64_code未定義，所以一定要保證他們的格式一致

總結

以上是生活随笔為你收集整理的uniapp之微信小程序背景图的显示问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。