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

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引入高德地图或腾讯地图以及map在真机中常见问题汇总

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

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混

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

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

Uniapp 获取当前版本号

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

从 Wepy 到 UniApp 变形记

本文主要讲述了如何将 wepy 框架的小程序项目一键转换为 uni-app 框架代码,详细讲解了方案的实现思路和具体实现方法。

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

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

uni-app云开发入门

云函数 首先创建一个uniapp项目,创建项目时选择启用uniCloud云开发。 创建项目成功后,按照下面的步骤进行开发。 创建云函数 1.关联云服务器 2.创建云函数 一个云函数可以看成是一个后台接口 云函数实现 'use strict'; exports.main = async (event,

Blazor技术入门

曾写过点儿前后端分离的项目(Vue+.NET Core Web API)、WPF和WinForm。因为Blazor不支持小程序的原因(相对于uniapp),所以只是大概知道Blazor可以写Web、PC和移动端项目,最大的特点就是使用C#代替JS。本文算是通过几个默认例子入门Blazor技术吧。 一

基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍

在之前的SqlSugar系列随笔中,介绍了很多我们关于SqlSugar的开发框架的内容,SqlSugar的开发框架的目的是多前端应用场景,因此其中会包含各种不同的前端应用,前面介绍了基于DevExpress的Winform的前端应用,以及基于Vue3+TypeScript+ElementPlus的BS前端应用,本篇随笔继续介绍SqlSugar的开发框架的另一个前端应用,基于UniApp+Vue+T