**************************************************************************************************
本系列文章为自己学习微信小程序开发过程中的学习笔记,赶上研三的尾巴,想学习个新玩意,希望自己可以在去华为入职前能够熟练掌握这门技能,正所谓技多不压身。
对了多说一句,本人机械专业学渣一枚,以前接触过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遗留问题-白边