微信小程序 文件操作

前言本次案例5.7学习小程序本地文件操作。小程序提供FileSystemManager文件管理器支持读写、复制、获取文件信息本次作业额外扩展实现删除文件功能。项目基于skyline渲染模式体验小程序沙盒隔离的本地用户文件存储机制。项目目录├─ app.json ├─ app.wxss └─ pages └─ index ├─ index.wxml ├─ index.wxss └─ index.jsapp.json关键配置开启skyline渲染适配新版组件能力。{ pages: [pages/index/index], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: skyline }页面布局wxml界面由四部分组成标题、textarea文本输入框、功能按钮组、消息展示区域。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 classbtn-layout button typeprimary sizemini bind:tapdeleteFile删除文件/button /view view classmsg-area{{msg}}/view /view /scroll-viewwxss设置样式输入框浅黄色消息区浅蓝色方便区分。/*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_PATHconst filePath ${wx.env.USER_DATA_PATH}/hello.txtwx.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:errconsole.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.txtencoding: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.unlinkdeleteFile() { 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:删除文件失败文件可能不存在}) } }) }小程序文件分类总结代码包文件项目目录打包上传的静态资源。本地临时文件用完即弃小程序重启会被回收。本地缓存文件不能自定义文件名。本地用户文件本案例使用USER_DATA_PATH目录自由读写、自定义文件名有存储上限沙盒隔离适合保存业务生成文件。总结通过这个案例学会了小程序文件管理器的增、删、改、查基础用法。文件系统可以用来保存用户生成的文本、下载保存图片做离线缓存功能。需要注意异步回调、沙盒路径、文件操作执行顺序。完整代码可以直接复制运行适合课程作业练习。