小程序开发杂记

更新于 2025/08/21

保存的文件无法打开、关于自动滚动、console 不显示、滚动视图、流式传输、输入框上移

保存的文件无法打开

场景: 下载 pdf 文件，微信会返回一个 tempUrl，如果再次想打开文件可以直接用这个 tempUrl

代码实现：

wx.downloadFile 下载文件获取 tempUrl，然后使用 wx.openDocument 打开这个路径，并且保存这个路径到 storage，这样下次可以先从 storage 寻找路径是否存在，如果存在直接打开或者重新下载

bug：存在用户出现下载失败问题。

问题复现

通过手机清垃圾等相同手段，导致微信保存文件的父目录直接被删掉，下载的时候由于无法找到这个路径，会出现下载失败。

这里需要补充一下。关于 wx.downloadFile 这个 api，它提供了自定义保存路径的功能，但是我发现，本质上他是下载到 tempUrl 然后 move 到用户自定义的地址。而恰好这时候，因为用户把 tempUrl 父目录给删除了，下载的保存路径没了直接导致下载失败

解决方案

直接使用正常的 post 请求，获取文件的 arraybuffer（接口不需要改），然后用 wx.getFileSystemManager().writeFile 把文件写入咱们指定的路径，这个路径需要可以避开清缓存操作。

自动滚动问题

有一个需要注意的地方是，scrollview 标签，需要声明高度，否则自动滚动的操作无效

有一种方案是绑定 scrollview 的 scrolltop 属性，通过每次为这个属性增加一个极大值(例 10000)来实现滚动到页面最底部
另一种方案是使用框架对应的函数，例如 taro 的 pageScrollTo

console 不显示

检查项目代码中的配置，是否有关闭 console 功能

滚动视图内子视图的 padding-bottom

滚动视图只有在内容高度大于容器高度时才能滚动。当内容量较少时，添加 padding-bottom 可以确保内容总高度超过容器高度，从而启用滚动功能。

流式传输

在一些有流式传输场景中，需要使用微信的 wx.request 去请求接口，并且小程序的 network 不显示流式请求的响应，需要自行打印

示例代码如下

const data = wx.request({
    url: "xxx",
    timeout: 60000 * 2,
    header: {
    'Content-type': contentType || 'application/json',
    Authorization: `xxx`
    },
    method: 'POST',
    enableChunked: true,  //需要开启此处
    data: data
})

data.onChunkReceived((res) => {
    console.log(res)
})

唤起输入法，输入框上移

在输入框组件中，uni 或 taro 都有一个类似 adjustPosition 的属性，需要将这个属性设置为 false，否则唤起输入法会自动上推页面

同时需要监听键盘高度变化，把变化值响应式到键盘 padding-bottom 中。

组件不显示

在 uni 中出现一个情况，某个标签不显示，后续排查发现，对应的 src 内容加载失败，导致不显示此组件。

这是因为 popup 被 scrollview 包裹，所以他覆盖的范围只在这个 view 内，把 popup 移动到外部和 tabbar 同级即可。