钉钉内嵌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
})

标题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')
			})
		})
	}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
随着互联网的发展,移动互联网的普及,手机APP已成为人们使用最多的移动终端产品之一。随着越来越多的APP应用的涌现,越来越多的APP需要内H5页面WebView进行网页的展示和交互。WebView是一种可在应用程序中入Web页面的控件,可以用来显示来自互联网上的Web页面。它可以实现在应用中展示网页或在线功能,解决一些本地应用无法实现的功能。下面,我们分别从用户、开发者两个方面来探讨APP内H5页面WebView的优缺点。 一、用户方面: 优点: 1.节省时间:在APP中直接查看入的网页,省去了用户手动打开浏览器输入网址的步骤; 2.良好的用户体验:页面加载速度相对较快,而且对主应用对内存占用少,不影响其他应用的使用; 3.方便分享:在WebView中打开的网页可以长按复制网址链接,方便分享给其它用户; 4.强大的交互能力:在APP中入H5页面,拓展了应用的交互能力。 缺点: 1.便捷性带来的安全隐患:一些App会在内的H5页面中入第三方广告,导致用户隐私泄露; 2.缺乏统一标准:因为浏览器的内核和引擎都是不同的,所以在不同的WebView中,同一网页的显示效果和交互体验可能会有差异。 二、开发者方面: 优点: 1.拓展应用功能:借助WebView内H5页面,应用的功能可以得到极大的拓展; 2.代码复用:WebView可以实现HTML、CSS等内容的兼容,减轻了移动开发者负担; 3.节省开发成本:相对于开发单独的H5 APP,内方式更为灵活,可以适用于不同场景和需求。 缺点: 1.不支持多线程:WebView在JS调用本地方法的时候是在同一线程下执行的,如果WebView的内容较为复杂,可能会导致主线程卡顿; 2.性能问题:在内存管理、布局排版等方面还不如原生应用; 3.浏览器兼容性:WebView的内核并没有得到很好的统一,不同的WebView之间有兼容性问题,会导致页面显示和交互问题; 4.安全问题:WebView加载HTML页面时容易受到跨站脚本(XSS)和恶意代码注入等安全漏洞的攻击。为此,开发者应该加强前端页面安全防范,对浏览器缓存和Cookie进行管理并开启CSP(内容安全策略)。 综合来看,在APP内H5页面WebView上,开发者需要在开发时注意安全方面的问题,同时还需要加强对WebView性能和兼容性的了解和优化。用户便捷性和良好的用户体验,也需要开发者在开发时重视。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值