uniapp 开发规范（兼容性适配）

朝阳392024-01-17 16:26

因 uniapp 需同时兼容PC端，移动端，微信小程序端，app端等，建议按以下开发规范开发，可更加有效避开多端不兼容的情况：

vue 文件使用 div标签包裹

html 复制代码

<template>
	<div>
	  <!-- 页面代码 -->
	</div>
</template>

容器样式不要写在组件上

此处 class 不要写在 u--form，单独用 view 包裹 u--form 来添加样式

html 复制代码

<view class="formBox">
			<u--form>

改组件样式使用样式穿透 + !important

直接在组件上添加样式，会出现某些端不生效的情况，建议统一用样式穿透 + !important实现

复制代码

	::v-deep .u-button--square {
		border-radius: 0 !important;
	}

文件上传需做 name 兼容处理

微信小程序上上传文件，无法获取到文件名，需做 name 兼容处理

js 复制代码

uploadOK(e) {
	if (e.file.name) {
		// 避免文件名中有逗号,导致云存储无法删除
		e.file.name = e.file.name.replace(/,/g, '')
	}
	this.fileList = [e.file]
},

js 复制代码

cloudPath: 'blog/' + timeMark + (this.fileList[0].name || Math.floor(Math.random() * 100)),