一、实验简介本案例基于微信小程序文件系统实现写文件、复制文件、读文件、获取文件信息四大文件操作并扩展实现删除文件。运行后可在textarea中录入文字点击按钮对本地用户文件进行增删改查信息显示区实时反馈操作结果。开发环境微信开发者工具渲染引擎skyline 核心 APIwx.getFileSystemManager()、writeFile、copyFile、readFile、getFileInfo、unlink二、项目目录结构文件操作 ├── app.js ├── app.json ├── app.wxss ├── components │ └── navigation-bar # 自定义导航栏 └── pages └── index ├── index.js ├── index.wxml └── index.wxss三、文件系统基础概念1. 获取文件管理器文件系统是小程序提供的一套以小程序和用户维度隔离的存储及管理接口。通过wx.getFileSystemManager()获取全局唯一的文件管理器所有文件操作都通过它调用const fs wx.getFileSystemManager()2. 文件的两大类表格类型说明代码包文件在项目目录中添加的文件随代码包一起发布本地文件通过接口本地产生或从网络下载后存储到本地的文件3. 本地文件的三种形式本地临时文件临时产生随时可能被回收本地缓存文件由临时文件缓存产生不能自定义目录和文件名本地用户文件由临时文件缓存产生允许自定义目录和文件名功能更完整推荐使用。4. 本地文件的沙箱隔离本地文件以用户维度隔离同一台手机不同微信用户不能互相访问文件同一用户不同 appId 之间也不能互相访问充分保障用户隐私安全。5. 用户文件路径wx.env.USER_DATA_PATHconst filePath ${wx.env.USER_DATA_PATH}/hello.txt使用模板字符串反引号 拼接路径不要用引号wx.env.USER_DATA_PATH表示文件系统中的用户目录本地路径路径格式为协议名://文件路径模拟器为http真机 iOS/Android 为wxfile开发者无需关心差异不要在代码中硬编码完整路径。四、代码index.wxml!--index.wxml-- navigation-bar title文件操作 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle{{title}}/view textarea placeholder请录入写入文件的内容 bind:inputinputText / view classbtn-layout button typeprimary sizemini bind:tapwrite写文件/button button typeprimary sizemini bind:tapcopy复制文件/button button typeprimary sizemini bind:tapread读文件/button button typeprimary sizemini bind:tapgetFileInfo文件信息/button /view !-- 作业扩展删除文件 -- view classextend-btn button typeprimary sizemini bind:tapdel删除文件/button /view view classmsg-area{{msg}}/view /view /scroll-viewindex.wxss/app.wxss/* index.wxss */ textarea { width: auto; margin-bottom: 40rpx; padding: 20rpx; font-size: 40rpx; background-color: lightgoldenrodyellow; /* 淡金黄色输入区 */ } .btn-layout { display: flex; } .extend-btn { margin-top: 20rpx; display: flex; justify-content: center; } .msg-area { width: auto; height: 360rpx; margin-top: 40rpx; padding: 20rpx; font-size: 40rpx; background-color: azure; /* 淡蓝色信息区 */ }/* app.wxss */ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }index.js1. 数据与输入监听Page({ data: { title: 文件操作, msg: , writedText: }, // 输入文字 inputText(e) { console.log(e); this.setData({ title: 正在输入文字..., writedText: e.detail.value }) },2. 写文件// 写文件 write() { const fs wx.getFileSystemManager() // 模拟器打印 http://usr真机打印 wxfile://usr console.log(wx.env.USER_DATA_PATH); // 注意使用反引号即模板字符串 const filePath ${wx.env.USER_DATA_PATH}/hello.txt console.log(filePath); fs.writeFile({ filePath, data: this.data.writedText, // 写入 textarea 中录入的文字 encoding: utf-8, // 指定字符编码 success: res { const msg 写入文件成功: filePath this.setData({ title: 写文件, msg }) }, fail: err { console.log(写入文件识别 err); } }) },3. 复制文件// 复制文件 copy() { const fs wx.getFileSystemManager() const srcPath ${wx.env.USER_DATA_PATH}/hello.txt console.log(srcPath); const destPath ${wx.env.USER_DATA_PATH}/hello_copy.txt console.log(destPath); fs.copyFile({ srcPath, // 源文件路径 destPath, // 目标文件路径 success: res { const msg 复制文件成功: destPath this.setData({ title: 复制文件, msg }) }, fail: err { console.log(复制文件失败... err); } }) },4. 读取文件// 读文件 read() { const fs wx.getFileSystemManager() const filePath ${wx.env.USER_DATA_PATH}/hello_copy.txt console.log(filePath); fs.readFile({ filePath, encoding: utf-8, success: res { // 读取到的内容在 res.data 中 const msg 读取文件成功: res.data this.setData({ title: 读文件, msg }) }, fail: err { console.log(读取文件失败 err); } }) },5. 获取文件信息// 获取文件信息 getFileInfo() { const fs wx.getFileSystemManager() const filePath ${wx.env.USER_DATA_PATH}/hello_copy.txt console.log(filePath); fs.getFileInfo({ filePath, success: res { // res.size 文件大小res.digest 文件摘要 const msg file size: ${res.size}, file digest: ${res.digest} this.setData({ title: 获取文件信息, msg }) }, fail: err { console.log(获取文件信息失败 err); } }) }, // 作业扩展删除文件删除复制的文件 del() { const fs wx.getFileSystemManager() const filePath ${wx.env.USER_DATA_PATH}/hello_copy.txt console.log(filePath); fs.unlink({ filePath, success: res { const msg 删除文件成功: filePath this.setData({ title: 删除文件, msg }) }, fail: err { console.log(删除文件失败 err); } }) } })五、运行效果初始界面淡黄色textarea 四个基础按钮 蓝色信息显示区输入文字标题变为 正在输入文字...写文件点击后把文字写入hello.txt显示 写入文件成功 及完整路径复制文件把hello.txt复制为hello_copy.txt读文件读取hello_copy.txt在信息区显示文件内容文件信息显示file size文件大小和file digest文件摘要删除文件扩展点击删除复制的hello_copy.txt。六、踩坑记录问题 1路径拼接用了引号导致路径错误原因误用单引号拼接如wx.env.USER_DATA_PATH /hello.txt或加了空格。解决统一使用模板字符串反引号\${wx.env.USER_DATA_PATH}/hello.txt。问题 2模拟器与真机路径不一致现象模拟器能读写真机报错。原因协议名不同模拟器为http://usr真机为wxfile://usr。解决始终用wx.env.USER_DATA_PATH不硬编码完整路径交给平台自动适配。问题 3读文件内容是乱码或空原因未指定encoding或写入 / 读取编码不一致。解决读写统一指定encoding: utf-8。问题 4读文件前没有先写 / 复制文件现象直接点 读文件 报错文件不存在。解决遵循操作顺序 —— 先写文件再复制文件然后读文件 / 文件信息才有数据。读 / 获取信息操作的是hello_copy.txt必须先复制。问题 5删除的是哪个文件注意作业要求删除 复制的文件所以del()操作hello_copy.txt而不是源文件hello.txt。七、知识点总结所有文件操作统一通过wx.getFileSystemManager()获取的文件管理器调用路径必须用模板字符串拼接wx.env.USER_DATA_PATH协议名差异由平台自动适配不要硬编码路径文件操作是异步回调success/fail结果通过回调函数获取不要在调用后同步读取本地文件以用户维度沙箱隔离不同用户、不同 appId 之间不可互访writeFile写入、copyFile复制、readFile读取内容在res.data、getFileInfo取信息res.size/res.digest、unlink删除。 
长河君 · 2026/11/6 3:42:11 · 阅读 1.2k 微信小程序实验：文件操作
一、实验简介本案例基于微信小程序文件系统实现写文件、复制文件、读文件、获取文件信息四大文件操作并扩展实现删除文件。运行后可在textarea中录入文字点击按钮对本地用户文件进行增删改查信息显示区实时反馈操作结果。开发环境微信开发者工具渲染引擎skyline 核心 APIwx.getFileSystemManager()、writeFile、copyFile、readFile、getFileInfo、unlink二、项目目录结构文件操作 ├── app.js ├── app.json ├── app.wxss ├── components │ └── navigation-bar # 自定义导航栏 └── pages └── index ├── index.js ├── index.wxml └── index.wxss三、文件系统基础概念1. 获取文件管理器文件系统是小程序提供的一套以小程序和用户维度隔离的存储及管理接口。通过wx.getFileSystemManager()获取全局唯一的文件管理器所有文件操作都通过它调用const fs wx.getFileSystemManager()2. 文件的两大类表格类型说明代码包文件在项目目录中添加的文件随代码包一起发布本地文件通过接口本地产生或从网络下载后存储到本地的文件3. 本地文件的三种形式本地临时文件临时产生随时可能被回收本地缓存文件由临时文件缓存产生不能自定义目录和文件名本地用户文件由临时文件缓存产生允许自定义目录和文件名功能更完整推荐使用。4. 本地文件的沙箱隔离本地文件以用户维度隔离同一台手机不同微信用户不能互相访问文件同一用户不同 appId 之间也不能互相访问充分保障用户隐私安全。5. 用户文件路径wx.env.USER_DATA_PATHconst filePath ${wx.env.USER_DATA_PATH}/hello.txt使用模板字符串反引号 拼接路径不要用引号wx.env.USER_DATA_PATH表示文件系统中的用户目录本地路径路径格式为协议名://文件路径模拟器为http真机 iOS/Android 为wxfile开发者无需关心差异不要在代码中硬编码完整路径。四、代码index.wxml!--index.wxml-- navigation-bar title文件操作 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle{{title}}/view textarea placeholder请录入写入文件的内容 bind:inputinputText / view classbtn-layout button typeprimary sizemini bind:tapwrite写文件/button button typeprimary sizemini bind:tapcopy复制文件/button button typeprimary sizemini bind:tapread读文件/button button typeprimary sizemini bind:tapgetFileInfo文件信息/button /view !-- 作业扩展删除文件 -- view classextend-btn button typeprimary sizemini bind:tapdel删除文件/button /view view classmsg-area{{msg}}/view /view /scroll-viewindex.wxss/app.wxss/* index.wxss */ textarea { width: auto; margin-bottom: 40rpx; padding: 20rpx; font-size: 40rpx; background-color: lightgoldenrodyellow; /* 淡金黄色输入区 */ } .btn-layout { display: flex; } .extend-btn { margin-top: 20rpx; display: flex; justify-content: center; } .msg-area { width: auto; height: 360rpx; margin-top: 40rpx; padding: 20rpx; font-size: 40rpx; background-color: azure; /* 淡蓝色信息区 */ }/* app.wxss */ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }index.js1. 数据与输入监听Page({ data: { title: 文件操作, msg: , writedText: }, // 输入文字 inputText(e) { console.log(e); this.setData({ title: 正在输入文字..., writedText: e.detail.value }) },2. 写文件// 写文件 write() { const fs wx.getFileSystemManager() // 模拟器打印 http://usr真机打印 wxfile://usr console.log(wx.env.USER_DATA_PATH); // 注意使用反引号即模板字符串 const filePath ${wx.env.USER_DATA_PATH}/hello.txt console.log(filePath); fs.writeFile({ filePath, data: this.data.writedText, // 写入 textarea 中录入的文字 encoding: utf-8, // 指定字符编码 success: res { const msg 写入文件成功: filePath this.setData({ title: 写文件, msg }) }, fail: err { console.log(写入文件识别 err); } }) },3. 复制文件// 复制文件 copy() { const fs wx.getFileSystemManager() const srcPath ${wx.env.USER_DATA_PATH}/hello.txt console.log(srcPath); const destPath ${wx.env.USER_DATA_PATH}/hello_copy.txt console.log(destPath); fs.copyFile({ srcPath, // 源文件路径 destPath, // 目标文件路径 success: res { const msg 复制文件成功: destPath this.setData({ title: 复制文件, msg }) }, fail: err { console.log(复制文件失败... err); } }) },4. 读取文件// 读文件 read() { const fs wx.getFileSystemManager() const filePath ${wx.env.USER_DATA_PATH}/hello_copy.txt console.log(filePath); fs.readFile({ filePath, encoding: utf-8, success: res { // 读取到的内容在 res.data 中 const msg 读取文件成功: res.data this.setData({ title: 读文件, msg }) }, fail: err { console.log(读取文件失败 err); } }) },5. 获取文件信息// 获取文件信息 getFileInfo() { const fs wx.getFileSystemManager() const filePath ${wx.env.USER_DATA_PATH}/hello_copy.txt console.log(filePath); fs.getFileInfo({ filePath, success: res { // res.size 文件大小res.digest 文件摘要 const msg file size: ${res.size}, file digest: ${res.digest} this.setData({ title: 获取文件信息, msg }) }, fail: err { console.log(获取文件信息失败 err); } }) }, // 作业扩展删除文件删除复制的文件 del() { const fs wx.getFileSystemManager() const filePath ${wx.env.USER_DATA_PATH}/hello_copy.txt console.log(filePath); fs.unlink({ filePath, success: res { const msg 删除文件成功: filePath this.setData({ title: 删除文件, msg }) }, fail: err { console.log(删除文件失败 err); } }) } })五、运行效果初始界面淡黄色textarea 四个基础按钮 蓝色信息显示区输入文字标题变为 正在输入文字...写文件点击后把文字写入hello.txt显示 写入文件成功 及完整路径复制文件把hello.txt复制为hello_copy.txt读文件读取hello_copy.txt在信息区显示文件内容文件信息显示file size文件大小和file digest文件摘要删除文件扩展点击删除复制的hello_copy.txt。六、踩坑记录问题 1路径拼接用了引号导致路径错误原因误用单引号拼接如wx.env.USER_DATA_PATH /hello.txt或加了空格。解决统一使用模板字符串反引号\${wx.env.USER_DATA_PATH}/hello.txt。问题 2模拟器与真机路径不一致现象模拟器能读写真机报错。原因协议名不同模拟器为http://usr真机为wxfile://usr。解决始终用wx.env.USER_DATA_PATH不硬编码完整路径交给平台自动适配。问题 3读文件内容是乱码或空原因未指定encoding或写入 / 读取编码不一致。解决读写统一指定encoding: utf-8。问题 4读文件前没有先写 / 复制文件现象直接点 读文件 报错文件不存在。解决遵循操作顺序 —— 先写文件再复制文件然后读文件 / 文件信息才有数据。读 / 获取信息操作的是hello_copy.txt必须先复制。问题 5删除的是哪个文件注意作业要求删除 复制的文件所以del()操作hello_copy.txt而不是源文件hello.txt。七、知识点总结所有文件操作统一通过wx.getFileSystemManager()获取的文件管理器调用路径必须用模板字符串拼接wx.env.USER_DATA_PATH协议名差异由平台自动适配不要硬编码路径文件操作是异步回调success/fail结果通过回调函数获取不要在调用后同步读取本地文件以用户维度沙箱隔离不同用户、不同 appId 之间不可互访writeFile写入、copyFile复制、readFile读取内容在res.data、getFileInfo取信息res.size/res.digest、unlink删除。