微信小程序下载文件和转发文件给好友总结

简介: 微信小程序下载文件和转发文件给好友总结

这段时间公司让我负责小程序的一些功能开发,回想上次开发小程序还是在上一次,这次开发小程序主要实现的功能就是转发文件给好友和下载文件,总结一下这次遇到的各种问题和解决方法。


下载文件


首先正常下载

        wx.downloadFile({
              url: 'https://img.haihaina.cn/月度支出表.xls', 
              success(res) {
                console.log('downloadFile',res)
                const filePath = res.tempFilePath
                wx.openDocument({
                  filePath: filePath,
                  success: function(ress) {
                    console.log('打开文档成功',ress)
                  },
                  fail: function(err) {
                    console.log('保存失败:', err)
                  }
                })
              }
            })

   

通过这种下载打开的文件是这样的

2d9760b86d22465cb2af72670b037d31.png


没错,名字乱码


这里经过各种查阅解决名字乱码问题

cbb5ad9806b74eeb97f28eee91d8beda.png


       wx.downloadFile({
              url: 'https://img.haihaina.cn/月度支出表.xls', 
              filePath: wx.env.USER_DATA_PATH + '/'+ '自定义名字.xlsx',
              success(res) {
                console.log('downloadFile',res)
                const filePath = res.tempFilePath
                wx.openDocument({
                  filePath: filePath,
                  fileType: 'xlsx',
                  success: function(ress) {
                    console.log('打开文档成功',ress)
                  },
                  fail: function(err) {
                    console.log('保存失败:', err)
                  }
                })

   

b2ffd1f52600486095087a881570552d.png


这里打开可以看到就是我们自己定义的文件名


分享


分享文件给好友


这里分享文件给好友也是首先将文件下载下来然后在调用 wx.shareFileMessage

    wx.downloadFile({
      url: 'https://img.haihaina.cn/月度支出表.xls', // 下载url
      success (res) {
        console.log('ressss',res)
        if(res.statusCode == 200) {
          console.log('res.statusCode',res)
            // that.openFileEvs(res)
            wx.shareFileMessage({
              filePath: res.tempFilePath,
              success(data) {
                console.log('转发成功!!!',data)
              },
              fileName:'自定义文件名字',
              fail: console.error,
            })
        }
      },
      fileName:'导出病例',
      fail: console.error,
    })

注意:


这里 wx.shareFileMessage只能在真机上才能进行调试,否则报错。

然后通过真机调试分享

c9a70e11b2aa42dab864b077143973af.png


发现文件名没有后缀。也无法打开。


解决办法给文件名加上后缀

    wx.downloadFile({
      url: 'https://img.haihaina.cn/月度支出表.xls', // 下载url
      success (res) {
        console.log('ressss',res)
        if(res.statusCode == 200) {
          console.log('res.statusCode',res)
            // that.openFileEvs(res)
            wx.shareFileMessage({
              filePath: res.tempFilePath,
              success(data) {
                console.log('转发成功!!!',data)
              },
              fileName:'自定义文件名字.xlsx',
              fail: console.error,
            })
        }
      },
      fileName:'导出病例',
      fail: console.error,
    })


2b84c73836b847e9aa020b54d95d5c3c.png


这样即可解决文件名无后缀的情况

bb733aa6d3c541c3acd0bff9fee5f0b1.png


但是通过手机打开可以发现用户点开分享之后的名字还是会乱码

c090365e1850465eb5ff9da522607461.png


还需要改善

7cdda178d8a04fa6a9a703c00ab7b84b.png


    wx.downloadFile({
      url: url, // 下载url
      filePath: wx.env.USER_DATA_PATH+ '自定义文件名字.xlsx',
      success (res) {
        console.log('ressss',res)
        if(res.statusCode == 200) {
          console.log('res.statusCode',res)
            // that.openFileEvs(res)
            wx.shareFileMessage({
              filePath: res.tempFilePath,
                fileType: 'xlsx',
              success(data) {
                console.log('转发成功!!!',data)
              },
              fileName:'自定义文件名字.xlsx',
              fail: console.error,
            })
        }
      },
      fileName:'导出病例',
      fail: console.error,
    })

这次可以看到

509d3c8b7b5344b7bb0fe0f16aa259e1.png


转发用户的文件用户打开也是自定义的名字了


总结一下


首先小程序下载文件可以在wx.downloadFile内部新增一个


filePath: wx.env.USER_DATA_PATH + '/'+'文件名字+后缀'


然后openDocument需要加上fileType 对应你的文件后缀


分享文件需要在wx.shareFileMessagefileName 最后加一个文件后缀


这样分享出去用户打开之后名字还是会乱码 需要在我们自己下载分享之前在wx.downloadFile


同样加上 filePath: wx.env.USER_DATA_PATH + '/'+'文件名字+后缀'


然后openDocument需要加上fileType 对应你的文件后缀


关于微信小程序的下载 / 分享文件大概就这些了  


关于ios


如果你转发或者下载的时候发现ios不能正常打开文件,请更改文件的后缀名 。上文使用的xlsx在测试中发现不能正常打开,后经过修改变成xls就可以正常打开文件

相关文章
|
17天前
|
小程序 前端开发
|
23天前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
2月前
|
小程序 开发工具 开发者
入职必会-开发环境搭建31-微信开发者工具下载和安装
微信开发者工具是一款由微信官方推出的开发工具,旨在帮助开发者更高效地进行微信小程序和微信公众号的开发与调试。该工具集成了代码编辑、代码上传、实时预览、调试等功能,能够提供便捷的开发环境和调试工具,帮助开发者快速定位和解决问题。
|
2月前
|
移动开发 小程序 前端开发
uniap开发微信小程序如何在线预览pdf文件
这是一段关于在线预览和处理PDF的多方案说明,包括使用JavaScript库PDF.js(如`pdfh5.js`)实现H5页面预览,提供QQ群和技术博客链接以获取帮助和支持。还介绍了两个适用于Uni-app的插件,一个用于H5、小程序和App中的PDF预览和下载,另一个专门解决手机端PDF预览问题。此外,还详细描述了在Uni-app中使用微信小程序API`wx.openDocument`显示PDF的步骤,包括上传文件、配置权限和编写代码。
316 0
|
2月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
|
2月前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
|
2月前
|
小程序 JavaScript 安全
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
63 0
|
8天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
22 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
8天前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
22 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
25天前
|
存储 小程序 JavaScript
下一篇
DDNS