微信小程序《案例 5.7 文件操作》

案例需求页面textarea文本框录入文字输入时页面标题变为 “正在输入文字…”。四个基础按钮写文件把 textarea 文字写入用户目录hello.txt复制文件把 hello.txt 复制为hello_copy.txt读文件读取复制后的文件内容并展示文件信息获取文件大小 size、md5 摘要 digest✨作业扩展增加【删除文件】按钮删除hello_copy.txt页面显示删除成功信息。完整代码1.app.jsonwebview 引擎去掉 skyline 配置2.pages/index/index.wxml3.pages/index/index.wxss4.pages/index/index.js包含作业扩展删除文件5.app.wxss 全局样式核心知识点1. 文件管理器对象const fs wx.getFileSystemManager()2. 沙箱用户目录wx.env.USER_DATA_PATH小程序隔离沙箱目录每个小程序、每个微信用户互相隔离保障隐私。模拟器路径协议是http://usr真机协议是wxfile://usr代码不要硬编码写死字符串用模板字符串拼接。3. 文件 API 一览表API作用fs.writeFile()写文件data 传入文本encoding 指定 utf‑8 编码fs.copyFile(src,dest)复制本地用户文件源路径、目标路径fs.readFile()读取本地文件encoding:utf‑8 拿到文本字符串fs.getFileInfo()获取文件信息size字节大小digestmd5 摘要哈希值fs.unlink()✨作业扩展删除本地文件4. 小程序文件分类代码包文件项目源码、images 图片只读运行时不能修改。本地用户文件通过 fs 接口生成存放在USER_DATA_PATH可读、写、复制、删除。沙箱隔离不同 AppID 小程序、不同微信用户文件互相不可访问。踩坑实录坑 1模板字符串用了单引号路径变成字面字符串错误const filePath ${wx.env.USER_DATA_PATH}/hello.txt✅正确const filePath ${wx.env.USER_DATA_PATH}/hello.txt必须反引号。坑 2直接读 / 复制 / 删除提示文件不存在操作顺序先写文件生成 hello.txt再复制之后才能读、取信息、删除跳过写文件直接执行后面接口直接 fail。坑 3真机和模拟器打印路径前缀不一样模拟器输出http://usr/xxx.txt真机输出wxfile://usr/xxx.txt代码不要写死协议前缀依靠wx.env.USER_DATA_PATH自动拼接。坑 4复制 PPT 代码出现unexpected character复制带入中文全角符号全部替换英文半角符号。坑 5删除之后还去读文件文件被unlink删除文件已经消失调用 readFile、getFileInfo 会触发 fail 回调是正常业务逻辑。