uniapp微信小程序转支付宝小程序踩坑（持续更新）

合集 - uniapp(6)

1.uniapp微信小程序转支付宝小程序踩坑（持续更新）2023-06-26

2.uniapp引入高德地图或腾讯地图以及map在真机中常见问题汇总2023-07-073.关于Vue3中调试APP触发异常：exception:white screen cause create instanceContext failed,check js stack -> at useStore (app-service.js:2309:15)解决方案2023-12-014.关于uniapp打包APP自定义基座调试，遇到首页同意网络权限后白屏问题2023-12-075.h5、app、小程序跳转外部链接的几种方式2023-12-066.uniapp滑动页面时警告Unable to preventDefault inside passive event listener due to target being treated as passive.2023-12-08

收起

首先第一个，真有被折磨到！

// 微信正常使用，支付宝不行
<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等生命周期中使用都会导致卡死的问题。

可以在方法内使用，但是不能在页面生命周期中使用。