微信小程序文件操作

2026/11/6 6:37:02

前言

本次案例5.7学习小程序本地文件操作。小程序提供FileSystemManager文件管理器，支持读写、复制、获取文件信息，本次作业额外扩展实现删除文件功能。项目基于skyline渲染模式，体验小程序沙盒隔离的本地用户文件存储机制。

项目目录

├─ app.json ├─ app.wxss └─ pages └─ index ├─ index.wxml ├─ index.wxss └─ index.js

app.json关键配置

开启skyline渲染，适配新版组件能力。

{ "pages": ["pages/index/index"], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "skyline" }

页面布局wxml

界面由四部分组成：标题、textarea文本输入框、功能按钮组、消息展示区域。

<navigation-bar title="文件操作" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">{{title}}</view> <textarea placeholder="请录入写入文件的内容" bind:input="inputText" /> <view class="btn-layout"> <button type="primary" size="mini" bind:tap="write">写文件</button> <button type="primary" size="mini" bind:tap="copy">复制文件</button> <button type="primary" size="mini" bind:tap="read">读文件</button> <button type="primary" size="mini" bind:tap="getFileInfo">文件信息</button> </view> <!--作业扩展删除文件按钮--> <view class="btn-layout"> <button type="primary" size="mini" bind:tap="deleteFile">删除文件</button> </view> <view class="msg-area">{{msg}}</view> </view> </scroll-view>

wxss设置样式：输入框浅黄色，消息区浅蓝色，方便区分。

/*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.wxss*/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } textarea { width: auto; margin-bottom: 40rpx; padding: 20rpx; font-size: 40rpx; background-color: lightgoldenrodyellow; } .btn-layout { display: flex; margin-bottom:20rpx; } .msg-area { width: auto; height: 360rpx; margin-top: 40rpx; padding: 20rpx; font-size: 40rpx; background-color: azure; }

JS核心逻辑讲解

获取文件管理器

const fs = wx.getFileSystemManager()

wx.getFileSystemManager()获取全局唯一文件管理器，所有文件操作都由fs对象调用。

重要环境变量 wx.env.USER_DATA_PATH

const filePath = `${wx.env.USER_DATA_PATH}/hello.txt`

wx.env.USER_DATA_PATH代表小程序用户沙盒目录
模拟器路径前缀：http://usr，真机前缀：wxfile://usr，不要硬编码写死路径，用模板字符串拼接路径，注意是反引号 ``，不要用单引号双引号。

1、inputText监听文本输入

textarea输入时触发，修改页面标题，保存输入文本到data。

inputText(e) { this.setData({ title: '正在输入文字...', writedText: e.detail.value }) }

2、writeFile写文件

fs.writeFile()，把textarea的字符串写入沙盒内hello.txt。

write() { const fs = wx.getFileSystemManager() const filePath = `${wx.env.USER_DATA_PATH}/hello.txt` fs.writeFile({ filePath, data: this.data.writedText, encoding: 'utf-8', success: res => { const msg = '写入文件成功: ' + filePath this.setData({title:'写文件',msg}) }, fail:err=>console.log(err) }) }

###3、copyFile复制文件fs.copyFile(srcPath,destPath)，把hello.txt复制一份生成hello_copy.txt。

copy() { const fs = wx.getFileSystemManager() const srcPath = `${wx.env.USER_DATA_PATH}/hello.txt` const destPath = `${wx.env.USER_DATA_PATH}/hello_copy.txt` fs.copyFile({ srcPath, destPath, success: res => { const msg = '复制文件成功: ' + destPath this.setData({title:'复制文件',msg}) } }) }

###4、readFile读取文件读取复制后的hello_copy.txt，encoding:'utf‑8'把二进制转成字符串。

read() { const fs = wx.getFileSystemManager() const filePath = `${wx.env.USER_DATA_PATH}/hello_copy.txt` fs.readFile({ filePath, encoding: 'utf-8', success: res => { const msg = '读取文件成功: ' + res.data this.setData({title:'读文件',msg}) } }) }

###5、getFileInfo获取文件信息fs.getFileInfo()可以拿到文件size大小、digest md5摘要哈希值。

getFileInfo() { const fs = wx.getFileSystemManager() const filePath = `${wx.env.USER_DATA_PATH}/hello_copy.txt` fs.getFileInfo({ filePath, success: res => { const msg = `file size: ${res.size}, file digest: ${res.digest}` this.setData({title:'获取文件信息',msg}) } }) }

✨作业扩展：删除文件 fs.unlink

deleteFile() { const fs = wx.getFileSystemManager() const delPath = `${wx.env.USER_DATA_PATH}/hello_copy.txt` fs.unlink({ filePath: delPath, success: res => { const msg = '删除文件成功: ' + delPath this.setData({title:'删除文件',msg}) }, fail:err=>{ this.setData({msg:"删除文件失败，文件可能不存在"}) } }) }