Skip to content
本文总阅读量

uniapp h5、小程序兼容坑

1、h5正常,微信小程序递归组件不生效

解决:将递归数据改造为数组,增加父子节点的id、层级标记,循环的形式来处理数据节点展开、收起的节点展示情况,已封装组件TreeNodes

2、h5正常,微信小程序 ::v-deep深度样式不生效

解决:在methods同级上增加options:{stylelsolation: 'shared'} 穿透配置

3、u-line横线direction方向为col竖向时不生效,横向有时候margin也不生效

解决:改为缩放手动画1rpx线

4、微信小程序主包调用分包组件(扩展第三方库也可以分包异步化引入)

解决:首先在mainfest.json的mp-weixin配置"optimization":{"subPackages": true},然后在主包pages对应页面的style中增加"componentPlaceholder": { "组件名称": "view" },还需要将对应的组件在subPackages注册成页面

5、录音问题

解决:uniapp自带的录音管理器不支持h5的,引入插件Recorder,根据文档说明可以单独引入对应格式的语音文件处理,H5环境生成的语音文件是blob URL还需要再转化文件来上传,已封装RecorderCore.vue。

6、微信直接打开链接图片保存到本地

解决:加个条件微信浏览器环境下使用图片预览长按保存的方式,其他浏览器还是用a标签下载的方式

7、保存资源到本地,图片或者文档,直接跳转预览,没有下载。

解决: 1、正常创建a标签赋值url使用download属性 2、用第三方file-save的saveAs插件先featch,再转blob,保存下载资源到本地

8、vue3项目引入Tinymce富文本

解决:结合初始化、图片上传云封装成Tinymce组件

9、dify返回的流数据处理

解决:h5使用featch请求处理,小程序不支持需要改用框架自带request 设置dataType为arraybuffer,设置enableChunked,resoponseType,后续监听 onChunkReceived处理数据,后续就是不同的事件进行回调处理,已将请求和处理逻辑合并在difyRequest.js文件

结合 mescroll + Markdown 实现:会话列表、会话消息、历史会话、停止响应、语音转文字、自定义标签显示不同模板消息等功能

10、markdownit数据格式展示

解决:引入第三方压缩后的文件markdown-it.min.js,数据还需要处理br、空格,中文引号等特殊数据处理 已封装好UaMarkdown.vue文件

11、长按录音问题

解决:uniapp自带的录音管理器不支持h5的,引入插件Recorder,根据文档说明可以单独引入对应格式的语音文件处理,H5环境生成的语音文件是blob URL还需要再转化文件来上传,已封装RecorderCore.vue。

12、mqtt通讯 + mqttx(客户端)

是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议

13、合并表格单元格、根据滚动计算当前页码数

解决:因为打印只能是当前页面的全部内容所以不能根据分页的逻辑来处理,参考虚拟列表逻辑,转为根据可视化算出高度,监听滚动条位置来计算当前内容处于总页码数的第几页数值