前言
由于項目體積過大，以至于分包后也逐步超過了小程序的限制，所以將 h5 端的頁面以 web-view 的方式嵌入了小程序。這也產(chǎn)生了一些意料之外的問題，這里記一個關(guān)于文件預覽下載的問題。
在 h5 端中，針對圖片和視頻會使用 img、video 標簽達到預覽的效果，其余的文件類型會直接粗暴的調(diào)用 window.open 的方式打開，如果瀏覽器能夠解析則預覽，不能解析瀏覽器會默認下載。(這里有個問題，ios 的手機對于不能識別的文件會顯示亂碼)
嵌入小程序并配置了附件存儲的業(yè)務域名之后發(fā)現(xiàn)使用 android 手機調(diào)用 window.open 會出現(xiàn)白屏，ios 手機則沒有問題。
嘗試使用 iframe 標簽達到類似的效果，但是在小程序中也是沒有效果的。
解決的方法
后面同事給了個思路，對于需要 window.open 打開的文件，直接跳轉(zhuǎn)到一個特定的小程序原生頁面，借助小程序的 api 預覽文件。如果小程序環(huán)境也無法預覽的文件，則使用小程序的 api 下載文件。
h5 頁面的處理
import wx from 'weixin-js-sdk'
if (
process.env.TARO_ENV === 'h5' &&
window.__wxjs_environment &&
window.__wxjs_environment === 'miniprogram'
) {
wx.miniProgram.navigateTo({
url: `/pages/file/index?
fileExt=${fileExt}
&tokenId=${tokenId}
&fileName=${fileName}
&filePath=${encodeURIComponent(filePath)}
`,
})
}
這里有幾個點需要注意一下
- 因為項目是通過 Taro 編譯出的，所以需要 process.env.TARO_ENV 判斷代碼類型;
2.調(diào)用 wx sdk 的 wx.miniProgram.navigateTo api 可以直接調(diào)用。不需要在微信公眾平臺綁定域名權(quán)限驗證等;
- 跳轉(zhuǎn)路徑一定要寫完整 （因為少了一個 / 一直無法跳轉(zhuǎn)，一度懷疑這個思路行不通）;
4.文件路徑一定要使用 encodeURIComponent 方法轉(zhuǎn)義。如果 filePath 路徑中包含一些參數(shù)，不轉(zhuǎn)義的情況下路由跳轉(zhuǎn)的過程中會丟失;
5.tokenId 用于權(quán)限鑒別（根據(jù)實際情況傳遞）;
小程序原生頁面的處理
const { filePath, fileExt, tokenId, fileName } = this.queryParams
const supports = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']
// 支持預覽
if (supports.includes(fileExt)) {
const downloadResponse: any = await toPromise(wx.downloadFile, {
url: filePath,
header: {
'cookie': `tokenId=${tokenId};`,
}
})
const { tempFilePath } = downloadResponse
const openResponse = await toPromise(wx.openDocument, {
filePath: tempFilePath,
fileType: fileExt
})
} else {
// 該文件類型不支持預覽，下載
const filePath = wx.env.USER_DATA_PATH + `/${fileName}`
const saveResponse = await toPromise(wx.getFileSystemManager().saveFile, {
filePath,
tempFilePath,
})
}
這里有幾個點需要注意一下
對于有權(quán)限鑒定的文件一般是通過 cookie 實現(xiàn)的，小程序中需要手動設(shè)置 wx.downloadFile 的 header 設(shè)置 cookie
小程序中 api 的回調(diào)方式很容易造成回調(diào)地獄，可以包裝一下 promise
將文件保存在本地這個功能 wx.getFileSystemManager().saveFile 非常的不人性化。下載后很難找到下載的文件的具體地址。暫時沒有找到好的解決方案。
