钉钉内嵌H5遇到的一些问题

基于钉钉内核开发的政务云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
})

1
2
3
4
5
6
7
8
9
10
11
12
13

标题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')
			})
		})
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24