经历两个月的摸爬滚打,仍然有少量问题没有得到解决,基本都是因为需求比较特殊,加之框架限制。在开始 uni-app 分享前,先罗列一下作为专栏开篇。
欢迎 jym 集思广益,助我早日“祓除”。
文档预览(微信小程序)
项目中预览的实现,是后端接入了第三方的解析服务器,将上传的文件解析为 html 文档,通过调用后端接口,前端获取到解析后的 html 文档内容,并添加用户信息水印,进行展示。
大致效果如下:
由于是标准的 html 文档格式,所以在 h5 和 Android 平台,我都是通过 iframe 的方案去实现的。但是在微信小程序端,只找到了 web-view 的方式。
困境:
先不提 web-view 这个组件在个人类型的小程序暂不支持使用。
后端接口是进行了身份校验的,web-view 直接传入后端请求地址的话,会返回 401。
而且 web-view 是原生组件,层级很高,想要添加水印也是一筹莫展。
陷入僵局ing。。。
文件上传加密、下载解密(微信小程序)
这个需求其实挺 BT 的,吐槽的话俺就不多说了。
顾名思义,就是在文件上传的时候,先在前端进行切片加密,保证传输给后端的文件流是加密过的。
下载文件的时候,后端接口返回加密的文件流,前端获取到加密的文件流后先进行解密,再保存到本地。
困境:
同样,受限于微信小程序,我无法操作文件流(因为微信提供了很便捷的上传、下载 API 🐶),所以也无法实现加解密的功能。
在这里,不得不提一嘴一个很 hack 的方案,虽然最终因为实现方案不够优雅,在我和产品经理的据理力争下,微信小程序的上传、下载阉割了加解密功能。
上传加密
大致思路:
- 通过
FileSystemManager.readFile(Object object)实现文件的切片,并获取ArrayBuffer格式的数据 - 对
ArrayBuffer数据进行加密 - 将加密数据转为二进制数据流
- 调用后端接口,进行传输
下载解密
大致思路:
- 通过
uni.request+FileSystemManager.writeFile模拟下载 - 这样,在
uni.request获取到ArrayBuffer格式数据后,就可以进行解密了 - 但是有一个弊端,就是无法准确展示下载进度
结语
话不多说,接下来的文章,就是正式的 uni-app 开发体验全记录了。🎉🎉🎉