微信小程序 - 设置背景图

本来就是简简单单设置一个背景图，非常简单的功能，也就一行代码的事儿，但是没想到竟然另有蹊跷，故此记录一波 ~

正常设置：给整个页面设置背景图片

background-image: url ('本地图片地址')

当我们设置完毕之后，你会发现根本 展示不出来~

主要因为微信小程序通过background-image设置背景是有限制的，目前只支持以下俩种类型

• base64图片（图片转化之后会字符串非常长）
• 网络图片 (图片地址必须是https协议头)

Base64设置方式

实现步骤

1. 找到对应的背景图，通过base64转换成新的图片地址
   
2. 基于不是新手的原因，我们把base64的字符串放在.wxss文件下 （莫写行内，因为这个串太长，影响自己心情 ）

• .wxss ( 吐槽：这个字符串超出想象的长 )

注意：为了是背景图片自适应宽高，可以做如下设置

• 配置版

  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;

• 完整版

.parent-bg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-image: url(转换后的base64图片字符串)
  }

3. 最后在 .wxml内引用我们上面写好的class 属性（大功告成 ~)

<view class='parent-bg'> </view>

---

网络图片 - 设置方式

实现代码

• .wxss

.bg {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

• .wxml

  <image class='bg' src='../../images/home/bg.png' style='height:{{screenH}}px'></image> 

• app.js

  globalData: {
    screenHeight: 0,
  }

• .js

var h = getApp().globalData.screenHeight;

Page({

  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    that.setData({
      screenH: h
    })
  },
})