微信小程序小游戏中下载文件后缀名为unknown的解决方法(Laya引擎)

引言

微信文档里面有关下载文件的API的说明：

貌似这个问题有很多玩家遇到，微信官方说法是根据服务器响应的header中的Content-Type来决定下载到本地的文件的后缀的，但是这个特性支持的特别不好，如果下载后，文件后缀名为.unknown就不好搞了。

怎么解决的呢？

思路：

第一步：

利用wx.downloadFile下载文件，下载成功后，可以获取到tempFilePath临时文件。这个临时文件路径不要改动。

第二步：

利用wx.getFileSystemManager获取到FileSystemManager对象，利用该对象的saveFile方法，把临时文件保存为本地文件，保存成功后，其success函数回调会返回savedFilePath本地路径。这个路径会把上面的临时文件移动到这个本地路径中，但是后缀名仍然为unknown。这一步的目的是把临时文件保存为本地文件。

第三步：

本地文件已经有了，我们就可以对本地文件进行任意的操作。利用FileSystemManager对象的copyFile，把上面的后缀为unknown的本地文件，复制到另外的本地文件。这个时候你可以任意定义复制到的文件的后缀。

有一点坑的是：上面第一步、第二步中的文件的路径（tempFilePath、savedFilePath）我们都是知道的，但是第三步中的复制到的目标路径需要开发者自己定义路径。

这个时候我们需要用到wx.env.USER_DATA_PATH常量。 这个常量是微信为每个小程序小游戏搞得目录地址，在这个路径下面你可以新建、删除等文件或者文件夹。有这个知识储备，你可以先调用FileSystemManager对象的mkdir方法，在wx.env.USER_DATA_PATH常量路径下新建一个文件夹，然后你再调用第三步的copyFile就可以了。

注意这里保存的文件路径，如果文件夹不存在，需要先调用mkdir创建文件目录，否则会失败。

注：
第二步和第三步可以合并。

wx.downloadFile下载文件可以利用filePath指定下载的目标路径，这样可以省略上面的第二步操作，直接利用这个filePath进行第三步的复制操作，把后缀为unknown的filePath文件，复制到指定的文件后缀的目标文件中，然后就可以使用该文件了。

有了以上分析过程，完美的文件下载过程应该是这样的：
 

1 访问文件夹是否可用

FileSystemManager.access({path: wx.env.USER_DATA_PATH + '/' + this.mFileDir,success: (res) => {console.log('check success:', res);checkSucHandler.run();},fail: (res) => {console.log('check fail.', res);checkFailHandler.run();}});

如果文件夹可用，进入第3步。如果文件夹不可用，进入第2步创建文件夹。
这里mFileDir表示开发者自定义的文件夹，检测这个文件夹是否可用
 

2 创建文件夹

this.mFileMgr.mkdir({dirPath: wx.env.USER_DATA_PATH + '/' + this.mFileDir,success: (res) => {console.log('mk dir success:', res);makeSucHandler.run();},fail: (res) => {console.log('mk dir fail:', res);makeFailHandler.run();}});

开发者自定义的mFileDir文件夹不可用，就调用mkdir方法创建该文件夹。
 

3 下载文件

wx.downloadFile({url: url,header: '',filePath: wx.env.USER_DATA_PATH + '/' + this.mFileDir + '/' + fileName,success: (res) => {console.log('down load file. suc:', res);downloadSucHandler.run();},fail: (res) => {console.log('down load file. fail:', res);downloadFailHandler.run();},});

这里把文件名为fileName的文件下载到开发者创建的mFileDir目录下面。

这里fileName文件名是完全自定义的，这里在下载指定的文件时，就指定文件名后缀，而不是通过微信来指定文件后缀。这样处理之后，就不会出现文件后缀名为unknown的情况啦。

以上，经过上面三步操作，就可以完美下载到文件啦。
 

4 删除文件

由于微信限制了微信小游戏小程序可用的空间大小50M。所以无用的文件需要尽早删除掉。

this.mFileMgr.removeSavedFile({filePath: filePath,success: (res) => {console.log('remove save file. suc:', res);if (removeFileSucHandler) {removeFileSucHandler.run();}},fail: (res) => {console.log('remove save file. fail:', res);if (removeFileFailHandler) {removeFileFailHandler.run();}}});public unlinkSavedFile(filePath: string, removeFileSucHandler?: Laya.Handler,removeFileFailHandler?: Laya.Handler): void {this.mFileMgr.unlink({filePath: filePath,success: (res) => {console.log('remove save file. suc:', res);if (removeFileSucHandler) {removeFileSucHandler.run();}},fail: (res) => {console.log('remove save file. fail:', res);if (removeFileFailHandler) {removeFileFailHandler.run();}}});}

微信文档里面提供了两种删除文件的方式。但是微信文档里面并没有说明这两种方法的区别，实际项目开发过程中发现，removeSavedFile方法在iOS上回出现删除文件不成功的现象，并且没有出错，方法也调用了，但是文件还在。而最后通过unlink方法删除文件则可以达到删除文件的目地。

所以，推荐使用unlink方法删除文件。

结束。
 

完整工具类如下：

export default class DownloadFileUtil {private mFileMgr: FileSystemManager;private mFileDir: string;constructor(fileDir: string) {this.mFileDir = fileDir;if (Laya.Browser.onWeiXin) {this.mFileMgr = wx.getFileSystemManager();}}public checkDir(checkSucHandler: Laya.Handler,checkFailHandler: Laya.Handler): void {if (!Laya.Browser.onWeiXin) {return;}//利用access方法判断文件是否可用this.mFileMgr.access({path: wx.env.USER_DATA_PATH + '/' + this.mFileDir,success: (res) => {console.log('check success:', res);checkSucHandler.run();},fail: (res) => {console.log('check fail.', res);checkFailHandler.run();}});}public mkDir(makeSucHandler: Laya.Handler,makeFailHandler: Laya.Handler): void {if (!Laya.Browser.onWeiXin) {return;}this.mFileMgr.mkdir({dirPath: wx.env.USER_DATA_PATH + '/' + this.mFileDir,success: (res) => {console.log('mk dir success:', res);makeSucHandler.run();},fail: (res) => {console.log('mk dir fail:', res);makeFailHandler.run();}});}public downloadFile(url: string, fileName: string,downloadSucHandler: Laya.Handler,downloadFailHandler: Laya.Handler): void {if (!Laya.Browser.onWeiXin) {return;}wx.downloadFile({url: url,header: '',filePath: wx.env.USER_DATA_PATH + '/' + this.mFileDir + '/' + fileName,success: (res) => {console.log('down load file. suc:', res);downloadSucHandler.run();},fail: (res) => {console.log('down load file. fail:', res);downloadFailHandler.run();},});}public removeSavedFiles(): void {this.mFileMgr.getSavedFileList({success: (savedFiles) => {console.log('saved files list:', savedFiles);var fileList = savedFiles.fileList as Array<any>;for(var i=0; i<fileList.length; i++) {this.mFileMgr.removeSavedFile({filePath: fileList[i].filePath,success: (r) => {console.log('remove save file. success:', r);},fail: (r) => {console.log('remove save file. fail:', r);}});}},fail: (res) => {console.log('get saved file list. fail:', res);}});}public removeSavedFile(filePath: string, removeFileSucHandler?: Laya.Handler,removeFileFailHandler?: Laya.Handler): void {this.mFileMgr.removeSavedFile({filePath: filePath,success: (res) => {console.log('remove save file. suc:', res);if (removeFileSucHandler) {removeFileSucHandler.run();}},fail: (res) => {console.log('remove save file. fail:', res);if (removeFileFailHandler) {removeFileFailHandler.run();}}});}public unlinkSavedFile(filePath: string, removeFileSucHandler?: Laya.Handler,removeFileFailHandler?: Laya.Handler): void {this.mFileMgr.unlink({filePath: filePath,success: (res) => {console.log('remove save file. suc:', res);if (removeFileSucHandler) {removeFileSucHandler.run();}},fail: (res) => {console.log('remove save file. fail:', res);if (removeFileFailHandler) {removeFileFailHandler.run();}}});}
}

欢迎关注公众号：技术印象