因 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)),