// 以下两种 微信、支付宝都正常使用
首先第一个,真有被折磨到!
// 微信正常使用,支付宝不行 <image src="https://static.dabapiao.com/images/coupon-index.png" mode=""/> // 以下两种 微信、支付宝都正常使用 <image src="https://static.dabapiao.com/images/coupon-index.png" mode="aspectFill"/> <image src="https://static.dabapiao.com/images/coupon-index.png" /> 问题就出在mode的属性值上,你可以没有mode但是就是不能为空!为空的话,image在支付宝上就是按图片1:1的像素显示而不是按你设定的像素! 以下是mode 的合法值,可以参考 /** 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 */ scaleToFill /** 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 */ aspectFit /** 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 */ aspectFill /** 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 */ widthFix /** 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 */ heightFix /** 裁剪模式,不缩放图片,只显示图片的顶部区域 */ top /** 裁剪模式,不缩放图片,只显示图片的底部区域 */ bottom /** 裁剪模式,不缩放图片,只显示图片的中间区域 */ center /** 裁剪模式,不缩放图片,只显示图片的左边区域 */ left /** 裁剪模式,不缩放图片,只显示图片的右边区域 */ right /** 裁剪模式,不缩放图片,只显示图片的左上边区域 */ 'top left' /** 裁剪模式,不缩放图片,只显示图片的右上边区域 */ 'top right' /** 裁剪模式,不缩放图片,只显示图片的左下边区域 */ 'bottom left' /** 裁剪模式,不缩放图片,只显示图片的右下边区域 */ 'bottom right'
第二、使用UView组件库,部分组件库在支付宝小程序中出现的问题
1、Textarea文本域组件
这个问题主要出现在支付宝和H5上,微信小程序并没有提示爆红,通过UView官方文档可以知道confirmType是有默认值的,但是在支付宝小程序跟h5中就是有小问题
解决办法就是在Textarea组件多加上confirmType属性,值的话可以自己定义,类型一定要字符串就好。
2、u-icon组件,在支付宝小程序中,即便设置了size,但是归根到底,本质上他还是image在起作用,底层有个mode=“”所以会出现跟image标签一样的问题
我的解决办法目前要么做样式穿透,要么把u-icon改成image使用。
小注:要使样式穿透在支付宝也起作用,需要在穿透目标元素前家上其父元素的class名否则可能穿透不到。如/deep/ .u-form-item>.u-form-item__body>.u-form-item__body__left
第三、You may have an infinite update loop in a component render function
这个问题我一直也以为是组件循环渲染导致的卡死问题,但实际上,我发现了另外一个引发此异常,导致页面卡死无法正常展示的问题
在支付宝小程序中,getCurrentPages()函数在组件内使用或者页面内生命周期函数中,不论是onShow或者Mounted等生命周期中使用都会导致卡死的问题。
可以在方法内使用,但是不能在页面生命周期中使用。