H5项目在微信浏览器运行实录

技术点：

一.解决H5页面在微信浏览器中不能下载附件问题

解决办法：

1.在H5系统内的相关页面，点击某个按钮，如【附件下载】时，先生成一个随机码，随机码在后台存储，有一定的生存期，超过生存期随机码会被系统清理。

2.步骤一完成后用户携带此随机码打开附件查看与下载页面，此页面为系统外页面，不检查用户是否登录等信息，而仅仅通过随机码在后台进行是否存在判断，若随机码还存在，则输出附件列表及下载功能；若不存在，则给于用户提示：页面已失效。

3.下载页面加载完成后，对浏览器进行判断，若为微信浏览器，则给出【点击右上角...,用系统浏览器打开即可下载附件】等相关提示，引导用户使用手机默认浏览器打开，若为非微信浏览器，则不予提示。

4.若用户复制了下载页面地址，过一段时间后想通过地址打开页面获取附件，则由于地址携带的随机码已在后台被清理，因此页面不会输出附件信息，保证了系统的安全可控。

二.附件上传

1.开始采用bootstrap fileinput插件，但客户反映这个插件太占页面，而且不美观。因此直接采用ajax进行上传，并在后台进行严格的文件类型校验，确保用户上传的为合法附件。

2.用户上传附件成功后，系统加载附件名称到页面，并对图片类型附件用layer mobile等进行预览展示。

3.用户上传的附件需进行长度展示考虑，超过一定长度的附件需进行格式化处理。

三.与后台管理系统共享附件

由于后台管理系统采用另一个平台建造，因此其附件存储在其内部，不过好处在于获取其附件时，无需权限验证。针对此情况，有几种做法：

方案	优点	缺点
拷贝附件到本地	前端不改动	增大存储占用
采用代理组件进行代理转发	前端不改动	需配置
获取后直接输出二进制	不占用存储	增加代码输出量，浏览器不会缓存，性能略受影响
直接暴露真实地址	不占用存储	安全性不好，跨域，另外外网无法访问

经过咨询DeepSeek，最后决定用YARP代理形式。