小程序获取动态背景图片

最近在做微信小程序的时候需要实现一个功能，开发实现一个用户的个人页面，页面中需要根据用户的星座属性来展示不同的星座背景图。如果在PC网页端实现这样一个功能还是相对比较简单的，但是由于小程序自身的一些限制，具体的实现和PC网页的实现会有一些不同。

小程序不支持设置本地图片为背景图片，但是可以通过URL加载网络图片或者把图片经过base64加密处理后加载。

当背景图片是不会变化的时候，我们可以简单的在wxss文件中实现我们的加载背景图片的代码：

// info.wxml
<view class="background-img"></view>

// info.wxss
.background-img {
    background-image: url('http://xxxxx.com/1.png');
    background-repeat:no-repeat; 
    background-size: 100% 100%;
}

但是当背景图片是变化的时候，就需要利用数据绑定来实现样式的动态变化。

// info.wxml
<view class="background-img" style="background-image: url('{{img_url}}')"></view>

// info.wxss
.background-img {
    background-repeat:no-repeat; 
    background-size: 100% 100%;
}

// info.js
Page({
    data:{
        img_url: ''
    }
    
    getInfo: function() {
        
        // 解析服务器返回的个人信息中的星座内容, 得到对应的星座图片的url
        var pic_url = XXX;
        // 设置更新img_url的内容
        this.setData({
            img_url: pic_url
        });
    }
})