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

首先第一个,真有被折磨到!

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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当面试官问到uniapp微信小程序相关的试题时,你可以参考以下问题答案: 1. 什么是uniapp? - uniapp是一个基于Vue.js开发跨平台应用框架,可以同时开发iOS、Android、H5和微信小程序等多个平台的应用。 2. 什么是微信小程序? - 微信小程序是一种在微信平台上运行的应用程序,用户可以在微信中直接使用,无需下载安装。 3. uniapp微信小程序有什么关系? - uniapp可以开发微信小程序,通过uniapp的跨平台特性,开发者只需要编写一套代码,就可以同时在多个平台上运行。 4. uniapp开发微信小程序的优势有哪些? - 跨平台开发:只需编写一套代码,即可在多个平台上运行。 - 开发效率高:使用Vue.js进行开发,具有简洁、灵活的语法,提高开发效率。 - 统一的UI组件:uniapp提供了一套统一的UI组件库,方便开发者快速构建界面。 - 支持原生能力:uniapp支持调用原生API,可以实现更多的功能。 5. uniapp开发微信小程序的限制有哪些? - 对于一些特定的微信小程序API,uniapp可能无法直接调用,需要通过插件或自定义组件来实现。 - 由于不同平台的差异,一些特定的样式和功能在不同平台上可能会有差异。 6. uniapp中如何实现微信小程序的页面跳? - 可以使用uniapp提供的`uni.navigateTo`、`uni.redirectTo`、`uni.switchTab`等方法来实现页面跳。 7. uniapp中如何调用微信小程序的原生API? - 可以使用uniapp提供的`uni.request`、`uni.showToast`等方法来调用微信小程序的原生API。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值