0
#yyds干货盘点#【愚公系列】2022年12月 微信小程序-图片加载和全屏适配问题
source link: https://blog.51cto.com/u_15437432/5938436
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
#yyds干货盘点#【愚公系列】2022年12月 微信小程序-图片加载和全屏适配问题
精选 原创在使用图片问题中可能会遇到各种各样的问题，比如图片加载不出来，图片显示在不同机型效果不同，图片加载展示问题等等。
微信小程序image相关属性如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 图片资源地址 | 1.0.0 | |
| mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
| webp | boolean | false | 否 | 默认不解析 webP 格式，只支持网络资源 | 2.9.0 |
| lazy-load | boolean | false | 否 | 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 | 1.5.0 |
| show-menu-by-longpress | boolean | false | 否 | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 | 2.7.0 |
| binderror | eventhandle | 否 | 当错误发生时触发，event.detail = {errMsg} | 1.0.0 | |
| bindload | eventhandle | 否 | 当图片载入完毕时触发，event.detail = {height, width} | 1.0.0 |
mode明细属性：
| 合法值 | 说明 |
|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域 |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域 |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域 |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 |
一、图片加载
imsge加载图片本质是使用wx.downloadFile来加载图片的。
加载不出来图片主要有以下几种情况
- 图片格式不规范
- 线上SSL证书有问题
- 文件描述信息不完整
- 服务器发生302跳转
网络不好情况可以用binderror来处理图片加载，重新给src属性赋值。
服务器发生302跳转：目前小程序已经支持image加载短链接地址图片，但直接使用downloadFile会出现资源不可用
// 直接加载短链接网址，返回403
// 403代表资源不可用
wx.downloadFile({
url: 'http://t.cn/A622upBw',
complete(res){
console.log(res);
}
})
二、适配机型实现全屏背景图
这个问题都是使用css去实现全屏背景图的，代码如下：
<!-- 背景图 -->
<view class="container">
</view>
/* 背景图样式 */
.container {
position: fixed;
width: 100%;
height: 100%;
background-color:azure;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.container::after {
content: "";
background: url(https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg) no-repeat center center;
background-size: cover;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK