持续更新｜UNIAPP适配APP遇到的问题以及解决方案

原创已于 2025-05-28 15:15:36 修改 · 置顶 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

于 2024-04-29 12:38:44 首次发布

前端技术笔记专栏收录该内容

31 篇文章

订阅专栏

本文记录了在使用UNIAPP开发过程中遇到的组件样式在APP环境中高度异常的问题，以及如何通过`uni.getSystemInfoSync()`方法判断设备是否为PC端的技巧。解决方法是增加view标签包裹组件。

在使用UNIAPP开发APP的时候遇到的一些奇奇怪怪问题记录

组件样式丢失

问题：组件引入界面中，在小程序和H5环境下样式正常，而在APP中却出现高度异常问题
解决：增加view标签将组件包裹起来即可正常显示

解决方案

解决前：
在这里插入图片描述

解决后：

判断是不是PC端

在uniapp中，可以通过uni.getSystemInfoSync()方法获取系统信息，然后通过platform属性来判断当前设备是否为PC端。

const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
    console.log('当前是PC端');
} else {
    console.log('当前非PC端');
}

UNIAPP使用uni.uploadFile在H5环境上传文件时，后端提示错误 : “No multipart boundary param in Content-Type”

去掉 uploadFile中的"content-type": “multipart/form-data”，H5使用浏览器自己自动生成boundary即可

uni.uploadFile({
			url,
			filePath,
			name,
			formData: {
				moduleCode,
			},
			// #ifndef H5
			header: {
				'content-type': 'multipart/form-data',
			},
			// #endif
			success: (res) => {
				console.log(res)
			}
		})

UNIAPP编译到微信小程序时，会多一层以组件命名的标签

在这里插入图片描述

解决方案

可以配置virtualHost来配置

export default {
  options: {
    virtualHost: true
  }
}

H5短信验证码自动填充时总是被复制两遍

IOS以及部分安卓系统短信存在自动填充验证码会复制2次

解决方案

方法一

type为text或password时，限制input最大输入maxlength=4

方法一：type为text或password时

type为number时，<input type="number" v-model="value" @input="if(value.length>4) value=value.slice(0,4)">