uni-app(零):至今仍未解决的。。。

309 阅读2分钟

经历两个月的摸爬滚打,仍然有少量问题没有得到解决,基本都是因为需求比较特殊,加之框架限制。在开始 uni-app 分享前,先罗列一下作为专栏开篇。

欢迎 jym 集思广益,助我早日“祓除”。

文档预览(微信小程序)

项目中预览的实现,是后端接入了第三方的解析服务器,将上传的文件解析为 html 文档,通过调用后端接口,前端获取到解析后的 html 文档内容,并添加用户信息水印,进行展示。
大致效果如下:

E3352531-EE5F-4DBB-BBA8-828004776757.png

由于是标准的 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 开发体验全记录了。🎉🎉🎉