微信小程序开发学习——生活杂事宝

**************************************************************************************************

本系列文章为自己学习微信小程序开发过程中的学习笔记，赶上研三的尾巴，想学习个新玩意，希望自己可以在去华为入职前能够熟练掌握这门技能，正所谓技多不压身。

对了多说一句，本人机械专业学渣一枚，以前接触过web前端的东东，所以选择了微信小程序练手。欢迎大神们批评指正。

**************************************************************************************************

一、小技能

（1）小程序背景图片设置及全屏问题？

       最为本学渣第一个练手的小程序（生活杂事宝），别的不说，得有个炫酷的首页吧，为此就毫不犹豫跳入设置

背景图片的大坑之中。经过三番两次查找，发现设置背景图片还是个麻烦事，目前小程序里面背景图片设置有两种

方式：1）background-image: url()，这种方式要求base64或者网络图片，且只有在内联样式才能起作用。不过

在手机上无法显示，原因很简单url的方式是动态加载，用的时候才加载，这样手机不可能拿到本地图片；

2）image组件，可以使用本地的图片。

本人就是使用的image，不过在使用image的过程中涉及到一个问题，就是全屏的问题。找了一圈，最后成功

解决了。首先你要找到合适你手机屏幕大小的图片，注意是page区域大小的图片，如下图1-1，去除导航栏和虚拟

按键区域（我是用手机截图，手动设定截图区域为page，然后根据截图图片获得屏幕page区域的像素大小）。然后

image的mode属性设置为widthFix、width值设为100%，这样就可以实现背景图片全屏了，如下图1-2。

不过这里还遗留有一个小问题，就是本人在真机测试的时候，发现下方始终有一条白边，如下图1-3，一直无法

去除。希望有知道的大神能指导下。

      
         图1-1 屏幕区域                                      图1-2最终效果                             图1-3遗留问题-白边