// 以下两种 微信、支付宝都正常使用

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

程序,支付宝,uniapp,微信 · 浏览次数 : 190

小编点评

**1. mode属性值错误** * 微信和支付宝小程序都正常使用 `image` 属性设置模式,但 `mode` 属性的默认值为 `""`,导致支付宝小程序使用 `image` 属性时无效。 * 当 `mode` 属性为空时,支付宝小程序将以默认的 `aspectFill` 模式显示图片,导致图片按图片1:1的像素显示。 **2. u-icon组件问题** * 在支付宝小程序中,即使设置了 `size` 属性,`u-icon` 组件的最终输出还是由 `image` 组件决定。 * 由于 `u-icon` 的本质上还是 `image`,因此在支付宝小程序中设置 `size` 属性无效。 **3. infinite update loop** * 在组件渲染函数中使用 `getCurrentPages()` 函数会导致无限更新循环。 * 由于 `getCurrentPages()` 在页面生命周期中使用,导致页面无法正常渲染。

正文

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

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

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

与uniapp微信小程序转支付宝小程序踩坑(持续更新)相似的内容:

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

首先第一个,真有被折磨到! // 微信正常使用,支付宝不行 // 以下两种 微信、支付宝都正常使用

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈

原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。 uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目,支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混

uniapp+thinkphp5实现微信登录

前言 之前做了微信登录,所以总结一下微信授权登录并获取用户信息这个功能的开发流程。 配置 1.首先得在微信公众平台申请一下微信小程序账号并获取到小程序的AppID和AppSecret https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2F

uniapp引入高德地图或腾讯地图以及map在真机中常见问题汇总

以下是必须肯定会用到的官方地址 腾讯地图API开发文档:微信小程序JavaScript SDK | 腾讯位置服务 (qq.com) 高德地图API开发文档:开发 | 高德地图API (amap.com) 高德地图小程序配置指南:入门指南-微信小程序插件|高德地图API (amap.com) 小程序后

QShop商城-快速开始-uni-app小程序

QShop商城-快速开始-uni-app小程序 工具准备 HBuilderX 此项目为UniApp开发,开发工具为HBuilderX,下载地址: https://hx.dcloud.net.cn/Tutorial/install/windows 微信开发者工具 下载最新版的微信开发者工具,用来查看编

微信小程序:接手项目,修bug

好家伙, 问题描述如下: 小程序主界面,选择快速上传会议记录 选择快速 其中,没有2022-2023第二学期,所以,新的会议记录无法上传 于是,我自愿修复这个bug 由于我们没有产品文档 我只能由已知,推未知 亲爱的学长告诉我,这是一个使用了uni-app开发的微信小程序 开搞, 1.首先我们把两个

uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统

原创vue3+uniapp+uni-ui跨端仿ios桌面后台OA管理模板Uni-Vue3-WeOS。 uniapp-vue3-os一款基于uni-app+vite5.x+pinia等技术开发的仿ios手机桌面OA管理系统。实现了自定义桌面栅格磁贴布局、多分屏滑动管理、自定义桌面小部件、辅助触控悬浮球

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件 uv3-table:一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。 如下图:

Uniapp 获取当前版本号

plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) { oldversion = wgtinfo.versionCode //通过该方法才可以获取到versionCode });

【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯

之前公司需要一个内部的通讯软件,就叫我做一个。通讯软件嘛,就离不开通讯了,然后我就想到了长连接。这里本人用的是GatewayWorker框架。