分享、交流、傳播
- 首頁
- 網(wǎng)站建設(shè)
輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計服務(wù)
- 小程序開發(fā)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務(wù)、全程售后服務(wù)、無憂備案
- 產(chǎn)品與服務(wù)
- 資訊
- 關(guān)于我們
輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計服務(wù)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務(wù)、全程售后服務(wù)、無憂備案
在微信小程序當(dāng)我們使用本地圖片作為背景圖片的時候我們會遇到以下問題
先看代碼：
wxml:
<view class="login-box">
</view>
wxss:
.login-box{
width: 650rpx;
height: 700rpx;
background-image: url(../../image/auth-default.png);
}
開發(fā)HTML前端的UI的時候，這種是最常用的設(shè)計方法，但是在微信小程序里卻會報錯：
[渲染層網(wǎng)絡(luò)層錯誤]中的本地資源圖片無法通過 WXSS 獲取，可以使用網(wǎng)絡(luò)圖片，或者 base64，或者使用<image/>標(biāo)簽。
如下圖：
解決方案
小程序背景圖片無法直接使用本地圖片。有幾種解決方案：
使用image組件，在布局中使用多層定位。缺點：布局結(jié)構(gòu)可讀性不高。
將圖片通過在線轉(zhuǎn)化網(wǎng)站，轉(zhuǎn)化成base64格式。缺點：base64內(nèi)容太長了，影響樣式代碼閱讀。
直接通過把樣式直接寫入WXML文件里。缺點：代碼看上去不夠優(yōu)雅。（最簡單）
直接使用網(wǎng)絡(luò)圖片。缺點：需要放到服務(wù)器上。（最靈活）
建議使用第4種方法解決，雖然首次操作會有點麻煩，但是這樣可以增加靈活度后續(xù)可以不發(fā)版本直接替換遠程圖片。
但使用網(wǎng)絡(luò)圖片的也存在問題，如項目批量運營的，在wxss是不能指定動態(tài)域名的，如把圖片資源統(tǒng)一放在一臺服務(wù)器，這樣非常靈活但是唯一不足就是會這臺服務(wù)器的運行壓力。
當(dāng)然也可以放在云托管，這樣也和放在服務(wù)器一樣靈活。
云托管是在微信開發(fā)工具進入的，如下圖：
把樣式直接寫進WXML里實現(xiàn)方法
當(dāng)然如果實際業(yè)務(wù)需求沒有替換圖片的需求也可以使用第3個方案，這個是最省事的方案。
wxml代碼：
<view class="login-box" style="background-image: url(../../image/auth-default.png);background-size: 100% 100%;">
</view>
wxss代碼：
.login-box{
width: 650rpx;
height: 700rpx;
margin: 0 auto;
}
效果圖：
像這種不是通用性多的樣式，這樣寫法其實也沒什么，也不會造成什么代碼冗余，只是看起來不太美觀。
Base64編碼格式
Base64編碼格式，先將圖片轉(zhuǎn)化成base64編碼。點擊傳送到base64圖片在線轉(zhuǎn)換工具
background-image:url('base64編碼');
這種占用代碼量非常大，小程序本身有文檔大小限制，所以盡量不采用這種方法了。
用多層定位，圖片通過z-index放在最底層
第1個方案，用內(nèi)容覆蓋圖片
wxml代碼：
<view class="container">
<image src='../image/auth-default.png' class="bgimages"></image>
<view class='content'>
點擊按鈕
</view>
</view>
wxss代碼：
.container{
width: 100%;
height: 600rpx;
margin: 0;
padding: 0;
position: relative;
}
.bgimages{
position: absolute;
width: 100%;
height: 600rpx;
}
.content{
position: absolute;
z-index: 1;
}
好了，關(guān)于微信小程序背景圖片的分析就寫到這了。
