小程序前端开发经常遇见不知道怎么美工？我在这里给大家提供一个背景板功能，可放在个人中心等界面，效果如下图所示：
点击图标即可切换当前背景，也就是选择图片。
1、wxml中，展示列表中的图片以及相应的标题
<!--pages/skin/skin.wxml--> <view class="skin-list"> <block wx:for="{{skinList}}" wx:for-item="skinItem" wx:for-index="skinIndex" wx:key="skin"> <view class="skin-item {{nowSkin == skinItem.imgUrl ? 'skin-item-active' : ''}}" data-url="{{skinItem.imgUrl}}" bindtap="chooseSkin"> <image src="{{skinItem.imgUrl}}" class="skin-img"></image> <view class="skin-title">{{skinItem.title}}</view> </view> </block> </view>2、使用到的样式
.skin-list { overflow: hidden; } .skin-item, .skin-img { width: 710rpx; height: 360rpx; } .skin-item { box-sizing: border-box; position: relative; margin: 20rpx auto; border-radius: 20rpx; box-shadow: 0 20rpx 20rpx rgba(0, 0, 0, .2); overflow: hidden; } .skin-item-active { border: 6rpx solid #47a86c; } .skin-item-active::before { content: ''; display: block; position: absolute; top: -80rpx; right: -80rpx; z-index: 4; width: 160rpx; height: 160rpx; transform: rotate(45deg); background-color: #47a86c; } .skin-item-active::after { content: '在用'; display: block; position: absolute; top: 5px; right: 3px; z-index: 4; text-align: center; transform: rotate(45deg); color: #fff; } .skin-title { box-sizing: border-box; position: absolute; bottom: 0; left: 0; width: 100%; height: 80rpx; font-size: 32rpx; line-height: 80rpx; padding: 0 40rpx; background-color: rgba(0, 0, 0, .6); border-radius: 0 0 20rpx 20rpx; color: #fff; }3、我把图片的静态地址放到另一个config.js内了，方便其他地方进行调用。
var config = require('../../colorui/components/config') Page({ data:{ skinList: config.skinList, nowSkin: '' }, onLoad:function(options){ var that = this wx.getStorage({ key: 'skin', success: function(res){ if (res.data == "") { that.setData({ nowSkin: config.skinList[0].imgUrl }) } else { that.setData({ nowSkin: res.data }) } } }) }, chooseSkin: function(e) { var url = e.currentTarget.dataset.url wx.setStorage({ key: 'skin', data: url, success: function(res){ wx.navigateBack({ delta: 1, success: function(res){ console.log('success') } }) } }) } })config.js部分内容（skin调用即可）：
var staticUrl = 'https://static.sesine.com/wechat-weapp-movie' module.exports = { skinList: [ { title: '公路', imgUrl: staticUrl + '/images/user_bg_1.jpg' }, { title: '黑夜森林', imgUrl: staticUrl + '/images/user_bg_2.jpg' }, { title: '鱼与水', imgUrl: staticUrl + '/images/user_bg_3.jpg' }, { title: '山之剪影', imgUrl: staticUrl + '/images/user_bg_4.jpg' }, { title: '火山', imgUrl: staticUrl + '/images/user_bg_5.jpg' }, { title: '科技', imgUrl: staticUrl + '/images/user_bg_6.jpg' }, { title: '沙漠', imgUrl: staticUrl + '/images/user_bg_7.jpg' }, { title: '叶子', imgUrl: staticUrl + '/images/user_bg_8.jpg' }, { title: '早餐', imgUrl: staticUrl + '/images/user_bg_9.jpg' }, { title: '英伦骑车', imgUrl: staticUrl + '/images/user_bg_10.jpg' }, { title: '草原', imgUrl: staticUrl + '/images/user_bg_11.jpg' }, { title: '城市', imgUrl: staticUrl + '/images/user_bg_12.jpg' } ], }比如我要在个人中心使用背景板，只需要在添加一点wxml内容和修改下js中的onShow函数以及增加样式：
wxml
<view class="user-info" style="background-image: url({{skin}})"> <view class="user-skin" bindtap="viewSkin"></view> <image src="{{userInfo.avatarUrl}}" class="user-avatar"></image> </view> onShow: function() { var that = this wx.getStorage({ key: 'skin', success: function(res) { if (res.data == "") { that.setData({ skin: config.skinList[0].imgUrl }) } else { that.setData({ skin: res.data }) } } }) },wxss
.user-info { box-sizing: border-box; width: 750rpx; height: 400rpx; padding: 30rpx 0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: #999; background-position: center; background-repeat: no-repeat; background-size: cover; color: #666; } .user-skin { position: relative; top: 20rpx; left:300rpx; width: 60rpx; height: 100rpx; border: 4rpx solid #fff; border-radius: 60rpx; background-color: rgba(0, 0, 0, .3); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACHElEQVRoQ+2YfVXDMBTF71MADgAFMAdMAThgUwA42BwMB5sCQAE4YCgAHODgce5Idto0adJ26ygn+bMnee/+3lfTCga+ZOD6kQEOncGcgZyBjhHoVEKqegHgyGj4EpHPFD2qegrgpOk5n+1GAKp6DOAKwATApWNwLSKjRIA3AIQvricASxF5TrFh9yQDqOotgBkAQoTWWERe6wSoKsFfavasAdzH7CQDmKg/eiLu0/ANYBQqJVM6jH5dEKzdmYjMY9mozYCpcUYrxaH1RQg6fyg6T8ygq5dlNRUR2vSuIEBL8a4T29Rs2raLJcXS9EJ4AXYkvq1g37nggKgAmJpn2bhTYpeC2tjihJq6B30AbNjrNh56OMPptCj6KQGoKoUT4C8vTjn2xWZtAUzpfDScOIcA5WAgxKapiwBLADeHUNTC51xE+FL9BTAvGEZ/SOuML0wLwBcVrwDnAyF4582AZeT2wBAgtuJLPWBKKSUTNLCvTMVsl8RXABIgVrzyRm6TXapwbK7qvmFSEe8FqIFYicgk4TrcCYDXaFV1J6JXfBDAA7ERb57H7vOdAYwfCxEUXwtQgLizM7dPAOOLs37R6jodCmMfJdQkhcmflNZoBqgPb/Sb2j2eM9CkXhP25gxEg5SbODdxOQJ5CkWbptmGPIWi8foPU4hfbfv6a8dfiMEfub7oNm7iaIp63pABeg54xV3OQM5AxwgMvoR+AMyi8zFvBJhOAAAAAElFTkSuQmCC); background-position: center; background-repeat: no-repeat; background-size: 40rpx; }
在data里面直接初始化skin
skin: 'https://static.sesine.com/wechat-weapp-movie/images/user_bg_1.jpg'最终背景板呈现效果：
