优化预览功能流程，增加优先尝试读取缓存文件

src/actions/app.js

@@ -8,12 +8,14 @@ async function saveSafeArea(dispatch) {
   const res = await Taro.getSystemInfo();
   console.log('system info:', res);
   if (res) {
+    const isAndroid =  res.platform === 'android';
+    storage.set('isAndroid', isAndroid, true);
     dispatch({
       type: 'app/update',
       payload: {
         statusBarHeight: res.statusBarHeight,
         safeArea: res.safeArea || {},
-        isAndroid: res.platform === 'android',
+        isAndroid,
       }
     })
   }

src/components/FileExplorer/index.jsx

@@ -6,10 +6,8 @@ import { AtIcon, AtList, AtListItem } from 'taro-ui';
 import styles from './fileExplorer.module.scss';
 import Taro, { hideLoading, showLoading } from '@tarojs/taro';
 import { useSelector } from 'react-redux';
-import { hint } from '@root/utils/tool';
+import { hint, previewFile } from '@root/utils/tool';
 
-const supportFilesType = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];
-const oneOfType = ext => supportFilesType.indexOf(ext) !== -1;
 
 function matchFileImage(extension) {
   switch (extension) {
@@ -63,44 +61,7 @@ export default function FileExplorer(props) {
                     }
                     ext={fileNode.data.extension}
                     onExtraThumbClick={() => {
-                      if (!isAndroid && !oneOfType(fileNode.data.extension)) {
-                        hint('小程序目前仅支持ppt, excel, word, pdf文件的预览');
-                        return;
-                      }
-                      showLoading({ mask: true });
-                      const task = downloadFile(fileNode.data.ipfsCid, {
-                        success: (param) => {
-                          console.log('success:', param);
-                          Taro.openDocument({
-                            filePath: param.tempFilePath,
-                            fileType: fileNode.data.extension,
-                            showMenu: true,
-                            fail: (...args) => {
-                              console.log('open document failed:', args);
-                              console.log(fileNode.data)
-                            }
-                          })
-                        },
-                        fail: (e) => {
-                          console.log('download fail:', e);
-                          if (e.errMsg.indexOf('file data is empty') !== -1) {
-                            hint('文件内容为空');
-                            return;
-                          }
-                          hint(e.errMsg);
-                        },
-                        complete() {
-                          hideLoading();
-                        }
-                      });
-                      // console.log('task:', task);
-                      const progressCb = task.progress || task.onProgressUpdate;
-                      if (progressCb) {
-                        progressCb(({ progress }) => {
-                          // console.log('loading:', args);
-                          showLoading({ title: `${progress}%`, mask: true });
-                        })
-                      }
+                      previewFile(fileNode.data.ipfsCid, fileNode.data.extension);
                     }}
                   />
                 )

src/utils/storage.js

@@ -1,11 +1,16 @@
 import Taro from '@tarojs/taro';
 
+const keepKeyHash = {};
+
 export function get(key) {
   return Taro.getStorageSync(key);
 }
 
-export function set(key, value) {
+export function set(key, value, keep = false) {
   Taro.setStorageSync(key, value);
+  if (keep) {
+    keepKeyHash[key] = true;
+  }
 }
 
 export function remove(key) {
@@ -13,5 +18,13 @@ export function remove(key) {
 }
 
 export function clear() {
+  const restoreList = [];
+  Object.keys(keepKeyHash).forEach((key) => {
+    const value = Taro.getStorageSync(key);
+    restoreList.push([key, value]);
+  });
   Taro.clearStorage();
+  restoreList.forEach(([key, value]) => {
+    Taro.setStorageSync(key, value);
+  })
 }

src/utils/tool.js

@@ -1,11 +1,13 @@
 
-import Taro from '@tarojs/taro';
+import Taro, { hideLoading, showLoading } from '@tarojs/taro';
+import { downloadFile } from './request';
+import { get } from './storage';
 
 export function firstCharToLowerCase(obj) {
   return Object.entries(obj).reduce((o, [key, value]) => {
     o[`${key[0].toLocaleLowerCase()}${key.slice(1)}`] = value;
     return o;
-  },{});
+  }, {});
 }
 
 export const hint = msg => Taro.showToast({ title: msg, icon: 'none', duration: 2000 });
@@ -15,7 +17,7 @@ export function firstCharToUpperCase(obj) {
   return Object.entries(obj).reduce((o, [key, value]) => {
     o[`${key[0].toLocaleUpperCase()}${key.slice(1)}`] = value;
     return o;
-  },{});
+  }, {});
 }
 
 export const isReqSuccess = res => res.code === 0 || res.Code === 0;
@@ -39,7 +41,7 @@ class RequestHandler {
   }
   httpError(f) { // 请求报错
     const res = this.response;
-    if(res.httpCode !== 200) {
+    if (res.httpCode !== 200) {
       f(res);
     }
     return this;
@@ -55,7 +57,7 @@ export class FileNode {
     Object.assign(this, { id, label, parentId, type, data });
   }
   append(childNodeId) {
-    if(!this.childrenIds) { this.childrenIds = []; }
+    if (!this.childrenIds) { this.childrenIds = []; }
     this.childrenIds.push(childNodeId);
   }
   // sortChildren(f = sortFunc) {
@@ -64,7 +66,7 @@ export class FileNode {
   //   return this;
   // }
   mapChildrenIds(f) {
-    if(!this.hasChildren) { return []; }
+    if (!this.hasChildren) { return []; }
     return this.childrenIds.map(f);
   }
   // everyChildren(f) {
@@ -77,4 +79,64 @@ export class FileNode {
   removeAllChildrenIds() {
     return this.childrenIds = [];
   }
+}
+
+
+const supportFilesType = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];
+const oneOfType = ext => supportFilesType.indexOf(ext) !== -1;
+const fileCacheMap = {};
+let tmpFileDir;
+
+function openFile(ipfsCid, filePath, extension, onFail) {
+  Taro.openDocument({
+    filePath: filePath,
+    fileType: extension,
+    showMenu: true,
+    fail: (...args) => {
+      console.log('open document failed:', args);
+      fileCacheMap[ipfsCid] = undefined;
+      onFail && onFail(...args);
+    }
+  })
+}
+
+export function previewFile(ipfsCid, extension) {
+  const isAndroid = get('isAndroid');
+  if (!isAndroid && !oneOfType(extension)) {
+    hint('小程序目前仅支持ppt, excel, word, pdf文件的预览');
+    return;
+  }
+  if (fileCacheMap[ipfsCid]) {
+    openFile(ipfsCid, fileCacheMap[ipfsCid], extension, () => {
+      previewFile(ipfsCid, extension);
+    });
+    return;
+  }
+  showLoading({ mask: true });
+  const task = downloadFile(ipfsCid, {
+    success: (param) => {
+      console.log('success:', param, ipfsCid);
+      fileCacheMap[ipfsCid] = param.tempFilePath;
+      openFile(ipfsCid, param.tempFilePath, extension);
+    },
+    fail: (e) => {
+      console.log('download fail:', e);
+      if (e.errMsg.indexOf('file data is empty') !== -1) {
+        hint('文件内容为空');
+        return;
+      }
+      hint(e.errMsg);
+    },
+    complete() {
+      hideLoading();
+    }
+  });
+  // console.log('task:', task);
+  const progressCb = task.progress || task.onProgressUpdate;
+  if (progressCb) {
+    progressCb(({ progress }) => {
+      // console.log('loading:', args);
+      showLoading({ title: `${progress}%`, mask: true });
+    })
+  }
 }