基于钉钉内核开发的政务云APP,在里面开发H5应用时会遇到一些莫名其妙的BUG
标题1、React打包H5时,安卓手机白屏的问题。
1、钉钉安卓使用 UC3.0 内核,版本比较低
2、React + Vite + TS 打包的H5应用的安卓端无法正常使用
3、添加 build 配置项
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
react(),
],
// ... other
build: {
target: ['chrome52'],
cssTarget: ["chrome52"]
},
// ... other
})
标题2、ios上传文件上传失败的问题。
1、首先我们需要一个 FormData 对象
2、向 FormData 对象 append 我们需要的数据
3、打印 FormData 对象,比较安卓、H5、ios 之间的差异
4、比较出差异,改造 ios 的 FormData 对象
tips:首先保证谷歌浏览器下 H5 能够正常上传。
const handleUpload = (file: File) => {
const formData = new FormData()
formData.append('file', file) // 放入 file 文件,第三个参数选传文件名。”file“ 键名因接口而已
console.log('formData', formData)
console.log('entries', formData.entries)
console.log('realFormData', formData.realFormData)
const realFormData = formData.realFormData;
// 如果存在 realFormData,将传 realFormData 对象,此时需要放入 file 文件
// realFormData 是钉钉内核应用在 ios H5中特有的对象,此时需要改造此对象。
if(realFormData) {
realFormData.append('file', file)
}
// 返回 Promise 对象
return new Promise<ImageUploadItem>((r,j) => {
fileUploadApi(
realFormData || formData // 传入的 FormData 对象,传入形式因接口而异
).then(res => {
r({url: res.data.url})
}).catch(err => {
j('err')
throw new Error('Fail to upload')
})
})
}