小程序背景图片铺满全屏和小程序背景图失效等问题

在做小程序的时候遇到以下几个问题,这里总结下,希望能给大家排排坑~

1.图片如何铺满全屏

//wxml
<view class="body" style="background-image:url('图片链接')" ></view>
//wxss
.body{
  height: 100%;
  width: 100$;
  min-height: 100%;
  background-size: 100% 100%;
}

上面代码是我们平时经常写的,设background-image背景,height高度和width宽度都设了100%,100%是以父元素为标准,也就是小程序的屏幕的框框,都是你们真机测试的时候,它可能出现并没有铺满屏幕,这时候我们就需要用到小程序的vw,vh单位了.如下

.body{
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  background-size: 100vw 100vh;
}

width设为100vw单位,height设为100vh单位,
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
这样子就解决了背景图铺满全屏的问题了.

2. 小程序为什么背景图失效
   小程序背景是没办法用本地图片的,所以就会出现本地测试成功,真机上线测试失败的结果
   
   背景图在css中是没办法设置的,只能如图上设置,且需要是在网上的地址,本地图片不可以