【微信小程序开发小白零基础入门】微信小程序文件API【建议收藏】
2024-05-04 13:21:04
微信小程序文件API
文章目录
- 微信小程序文件API
- 一、 保存文件
- 二、 获取文件信息
- 三、 获取本地文件列表
- 四、 获取本地文件信息
- 五、 删除本地文件
- 六、 打开文档
- 七、 推荐小程序（欢迎各位大佬指导）
一、 保存文件
小程序使用wx.saveFile(OBJECT)保存文件到本地。注意：saveFile会把临时文件移动，因此调用成功后传入的tempFilePath将不可用。其OBJECT参数说明如表所示。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| tempFilePath | String | 是 | 需要保存的文件的临时路径 |
| success | Function | 否 | 返回文件的保存路径,res = {savedFilePath: '文件的保存路径?} |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功与否都执行) |
例题
js文件
data: {src: '' //图片临时地址},//下载文件downloadFile: function () {var that = thiswx.downloadFile({url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center',success: function (res) {if (res.statusCode === 200) {that.setData({src: res.tempFilePath})}}})},//保存文件saveFile: function () {var that = thislet src = this.data.srcif (src == '') {wx.showToast({title: '请先下载文件！',icon: 'none'})} else {wx.saveFile({tempFilePath: src,success: function (res) {console.log('文件被保存到：' + res.savedFilePath)wx.showToast({title: '保存成功！'})}})}},
json文件
{"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"}
wxml文件
<view class='page-body'><view class='title'>1. 保存文件的简单应用</view><view class='demo-box'><view class='title'>(1)下载文件</view><button type="primary" bindtap="downloadFile">下载文件</button><image wx:if='{{src}}' src='{{src}}' mode='widthFix'></image></view><view class='demo-box'><view class='title'>(2)保存文件</view><button type="primary" bindtap="saveFile">保存文件</button></view></view>
wxss文件
button{margin: 15rpx;
}
二、 获取文件信息
小程序使用wx.getFileInfo(OBJECT)获取文件信息，该接口从基础库 1.4.0 开始支持，低版本需做兼容处理。OBJECT参数说明如表所示。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| filePath | String | 是 | 本地文件路径 |
| digestAlgorithm | String | 否 | 计算文件摘要的算法。默认值md5，有效值: md5, sha1 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接调用结束的回调函数〔调用成功与否都执行) |
例题
js文件
data: {tempFilePath: '' //临时文件路径},//下载文件downloadFile: function () {var that = thiswx.downloadFile({url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改success: function (res) {// 只要服务器有响应数据，就会进入 success 回调if (res.statusCode === 200) {console.log('文件被下载到：' + res.tempFilePath)that.setData({tip1: '提示：文件已下载。',tempFilePath: res.tempFilePath})}}})},//获取临时文件信息getFileInfo: function () {var that = thislet tempFilePath = this.data.tempFilePathif (tempFilePath == '') {//文件尚未保存到本地wx.showModal({title: '提示',content: '请先下载文件！',showCancel: false})} else {//获取保存的文件信息wx.getFileInfo({filePath: tempFilePath,success: function (res) {that.setData({tip2: '文件大小：' + res.size + '字节。'})}})}},
wxml文件
<view class='page-body'><view class='title'>2. 获取临时文件信息的简单应用</view><view class='demo-box'><view class='title'>(1)下载文件</view><button type="primary" bindtap="downloadFile">下载文件</button><view class='title'>{{tip1}}</view></view><view class='demo-box'><view class='title'>(2)获取临时文件信息</view><button type="primary" bindtap="getFileInfo">获取文件信息</button><view class='title'>{{tip2}}</view></view></view>
wxss文件
button{margin: 15rpx;
}
三、 获取本地文件列表
小程序使用wx.getSavedFileList(OBJECT)获取本地已保存的文件列表。 OBJECT参数说明如表所示。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| success | Function | 否 | 接口调用成功的回调函教 |
| fail | Function | 否 | 接口调用失败的回调函教 |
| complete | Function | 否 | 接口调用结束的回调函数〔调用成功与否都执行) |
例题
js文件
data: {savedFilePath: '' //本地文件路径},//下载和保存文件saveFile: function () {var that = thiswx.downloadFile({url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改success: function (res) {// 只要服务器有响应数据，就会进入 success 回调if (res.statusCode === 200) {//保存文件到本地wx.saveFile({tempFilePath: res.tempFilePath,success: function (res) {console.log('文件保存成功！')that.setData({tip1: '提示：文件已保存。',savedFilePath: res.savedFilePath})}})}}})},//获取本地文件列表getSavedFileList:function(){var that = thiswx.getSavedFileList({success: function (res) {console.log(res.fileList)that.setData({tip2: '提示：文件列表已获取。'})}})},
json文件
{"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"}
wxml文件
<view class='page-body'><view class='title'>3. 获取本地文件列表的简单应用</view><view class='demo-box'><view class='title'>(1)保存文件</view><button type="primary" bindtap="saveFile">保存文件</button><view class='title'>{{tip1}}</view></view><view class='demo-box'><view class='title'>(2)获取本地文件列表</view><button type="primary" bindtap="getSavedFileList">获取文件列表</button><view class='title'>{{tip2}}</view></view></view>
wxss文件
button{margin: 15rpx;
}
四、 获取本地文件信息
小程序使用wx.getSavedFileInfo(OBJECT)获取本地文件的文件信息。此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，请使用 wx.getFileInfo 接口。 OBJECT参数说明如表所示。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| filePath | String | 是 | 文件路径 |
| success | Function | 否 | 接口调用成功的回调函数。返回结果见success返回参教说明 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功与否都执行) |
例题
js文件
data: {tempFilePath: '', //临时文件路径savedFilePath: '' //本地文件路径},//下载文件downloadFile: function () {var that = thiswx.downloadFile({url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改success: function (res) {// 只要服务器有响应数据，就会进入 success 回调if (res.statusCode === 200) {console.log('文件被下载到：' + res.tempFilePath)that.setData({tip1: '提示：文件已下载。',tempFilePath: res.tempFilePath})}}})},//保存文件saveFile: function () {var that = thislet tempFilePath = this.data.tempFilePathif (tempFilePath == '') {//文件尚未下载wx.showModal({title: '提示',content: '请先下载文件！',showCancel: false})} else {//保存文件到本地wx.saveFile({tempFilePath: tempFilePath,success: function (res) {console.log('文件被保存到：' + res.savedFilePath)that.setData({tip2: '提示：文件已保存。',savedFilePath: res.savedFilePath})}})}},//获取文件信息getSavedFileInfo: function () {var that = thislet savedFilePath = this.data.savedFilePathif (savedFilePath == '') {//文件尚未保存到本地wx.showModal({title: '提示',content: '请先保存文件！',showCancel: false})} else {//获取保存的文件信息wx.getSavedFileInfo({filePath: savedFilePath,success: function (res) {that.setData({tip3: '文件大小：' + res.size + '字节。'})}})}},
json文件
{"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"}
wxml文件
<view class='container'><include src='../../common/head.wxml' /><view class='page-body'><view class='title'>4. 获取本地文件信息的简单应用</view><view class='demo-box'><view class='title'>(1)下载文件</view><button type="primary" bindtap="downloadFile">下载文件</button><view class='title'>{{tip1}}</view></view><view class='demo-box'><view class='title'>(2)保存文件</view><button type="primary" bindtap="saveFile">保存文件</button><view class='title'>{{tip2}}</view></view><view class='demo-box'><view class='title'>(3)获取本地文件信息</view><button type="primary" bindtap="getSavedFileInfo">获取文件信息</button><view class='title'>{{tip3}}</view></view></view>
wxss文件
button{margin: 15rpx;
}
五、 删除本地文件
小程序使用wx.removeSavedFile(OBJECT)删除本地已保存的文件。 OBJECT参数说明如表所示。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| filePath | String | 是 | 需要删除的文件路径 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函教 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功与否都执行) |
例题
js文件
data: {savedFilePath: '' //本地文件路径},//下载和保存文件saveFile: function () {var that = thiswx.downloadFile({url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改success: function (res) {// 只要服务器有响应数据，就会进入 success 回调if (res.statusCode === 200) {console.log('文件被下载到：' + res.tempFilePath)//保存文件到本地wx.saveFile({tempFilePath: res.tempFilePath,success: function (res) {console.log('文件被保存到：' + res.savedFilePath)that.setData({tip1: '提示：文件已保存。',savedFilePath: res.savedFilePath})}})}}})},//删除文件removeFile: function () {var that = thislet savedFilePath = this.data.savedFilePathif (savedFilePath == '') {//文件尚未保存wx.showModal({title: '提示',content: '请先下载和保存文件！',showCancel: false})} else {//删除本地文件wx.removeSavedFile({filePath: savedFilePath,success: function (res) {that.setData({tip2: '提示：文件已被删除。'})}})}},//获取文件信息getSavedFileInfo: function () {var that = thislet savedFilePath = this.data.savedFilePath//获取保存的文件信息wx.getSavedFileInfo({filePath: savedFilePath,success: function (res) {that.setData({tip3: '文件大小：' + res.size + '字节。'})},fail: function (res) {console.log(res)that.setData({tip3: '提示：文件不存在。'})}})},
json文件
{"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"}
wxml文件
<view class='page-body'><view class='title'>5. 删除已保存文件的简单应用</view><view class='demo-box'><view class='title'>(1)下载并保存文件</view><button type="primary" bindtap="saveFile">下载并保存文件</button><view class='title'>{{tip1}}</view></view><view class='demo-box'><view class='title'>(2)删除文件</view><button type="primary" bindtap="removeFile">删除文件</button><view class='title'>{{tip2}}</view></view><view class='demo-box'><view class='title'>(3)获取本地文件信息</view><button type="primary" bindtap="getSavedFileInfo">获取文件信息</button><view class='title'>{{tip3}}</view></view></view>
wxss文件
button{margin: 15rpx;
}
六、 打开文档
小程序使用wx.openDocument(OBJECT)新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。OBJECT参数说明如表所示。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| filePath | String | 是 | 文件路径，可通过downFile获得 |
| fileTyne | String | 否 | 文件类型，指定文件类型打开文件，有效值doc, xls, ppt, pdf, docx, xlsx, pptx (最低版本1.4.0) |
| success | Function | 否 | 接口调用成功的回调函教 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函教〔调用成功与否都执行) |
例题
js文件
data: {path: ''},//下载文件downloadFile: function () {var that = thiswx.downloadFile({url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改success: function (res) {// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {console.log(res)that.setData({tip: '提示：文件已下载',path: res.tempFilePath})}}})},//打开文件openDocument: function () {let path = this.data.path//文档尚未下载if (path == '') {wx.showModal({title: '提示',content: '请先下载文档！',showCancel: false})}//打开文档else {wx.openDocument({ filePath: path })}},
json文件
{"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"}
wxml文件
<view class='page-body'><view class='title'>6. 打开文档的简单应用</view><view class='demo-box'><view class='title'>(1)下载文件</view><button type="primary" bindtap="downloadFile">下载文件</button><view class='title'>{{tip}}</view></view><view class='demo-box'><view class='title'>(2)打开文件</view><button type="primary" bindtap="openDocument">打开文件</button></view></view>
wxss文件
button{margin: 15rpx;
}
七、 推荐小程序（欢迎各位大佬指导）
【微信小程序开发小白零基础入门】微信小程序文件API【建议收藏】相关推荐
- 【微信小程序开发小白零基础入门】微信小程序入门【建议收藏】
微信小程序入门 文章目录 微信小程序入门 前言 一.小程序的概述 1.小程序简介 2.小程序诞生 3.小程序功能 4.小程序创建步骤 二.小程序的准备工作 1.注册开发者账号 2.小程序信息完善 3. ...
- 【微信小程序开发小白零基础入门】第一个入门级小程序【建议收藏】
文章目录 一.第一个入门级小程序 1.新建项目 2.真机预览 3.代码上传 4.小程序版本 二.小程序目录结构 1.项目配置文件 2.主体文件 3.页面文件 4.其他文件 三.开发者工具功能介绍 1. ...
- 【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】
微信小程序框架 文章目录 微信小程序框架 一.逻辑层 1.注册程序 1.App()函数 2.onPageNotFound()函数 3.getApp()函数 2.注册页面 1.初始数据 2.生命周期回调 ...
- 思科wlc产品文档_思科认证EI CCIE和SP CCIE 怎么选？零基础入门或是网工深造都建议收藏...
学网络,就在IE-LAB 国内著名的高端网络工程师培养基地 作者:悦然 本文重点:思科认证.企业基础架构.服务提供商.大网设计.职业规划.软定义- 在旧版的CCIE认证体系中,很多人都会把RS和SP ...
- python windows桌面程序开发_Python 零基础入门
Photo by Chris Ried on Unsplash Python 是一种易于学习又功能强大的编程语言.它提供了高效的高级数据结构,还有简单有效的面向对象编程.Python 优雅的语法和动态 ...
- python和循环语句_Python 小白零基础入门 -- 条件语句和循环语句
Python 小白零基础入门 -- 条件语句和循环语句 点击上方 "Python 读数", 选择 "星标" 公众号 重磅干货, 第一时间送达 Python 零基 ...
- python中5种简单的数据类型,Python小白零基础入门 —— 变量及简单的数据类型
微信公众号:「Python读财」 若有问题或建议,请公众号留言 最近想着出一个Python小白零基础入门系列的文章,但愿能对入门的小伙伴有所帮助,内容会囊括简单的数据类型.列表.字典.循环以及函数的定 ...
- （第二版）零基础入门Python小甲鱼-笔记-第三章-p5
(第二版)零基础入门Python小甲鱼-笔记-第三章-p5 变量和字符串(下) 上节课讲了有些字符比如换行符.TAB制表符还有单引号.双引号等等...可以通过转义字符来实现,今天来谈谈原始字符串 1. ...
- 一、零基础入门微信小程序开发之创建项目工程同时完成引导页开发
前言 创建这个系列博客的原因是因为最近在加深微信小程序的学习,按照我之前的学习习惯是不喜欢记录的,加上自己有拖延症就更不太愿意做这件事情了,同时我要给学生上课,但总是缺少教材所以就开了这个系列的博客, ...
- 零基础入门微信小程序系列之——校园跑腿
前段时间在准备校招的事情,没有太多经历给大家分享博客和视频.最近校招已经尘埃落定,在策划一个零基础入门小程序的系列视频,在某站持续输出. 小程序的主要功能与微信目前线上的校园跑跑乐同步. 从0开始编写 ...
最新文章
- Verilog中testbench的设计，文件读取和写入操作
- 重启jboss出现问题：端口被占用
- memest函数用法说明（转自Lee.Kevin）
- 成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin
- OPA initialization
- linux系统优化思路
- mysql学习笔记(1-安装简介)
- 地方商城门户网页模板-商城模板
- window两个窗口上下摆放_window对象方法（open和close）
- 【5分钟 Paper】(TD3) Addressing Function Approximation Error in Actor-Critic Methods
- Light oj 1233 - Coin Change (III) (背包优化)
- Oracle中NB的中文处理
- 对比不同的JSON字符串或者对象转的字符串
- Linux 下ALSA音频工具amixer,aplay,arecord使用
- 联想Y7000的屏幕亮度不能调节
- Unreal 入门-EQS
- Google发布文本内容生成短视频工具：Imagen Video
- Mac Mojave10.14安装vmvare Fusion 11.0.0 win8 镜像
- PHP心脏装置,“人工心脏”不再科幻 中山医院完成国产心室辅助装置植入
- Java项目:快递取件管理系统(java+SSM+JSP+jQuery+Mysql)