前言

由于項(xiàng)目體積過(guò)大，以至于分包后也逐步超過(guò)了小程序的限制，所以將 h5 端的頁(yè)面以 web-view 的方式嵌入了小程序。這也產(chǎn)生了一些意料之外的問(wèn)題，這里記一個(gè)關(guān)于文件預(yù)覽下載的問(wèn)題。

在 h5 端中，針對(duì)圖片和視頻會(huì)使用 img、video 標(biāo)簽達(dá)到預(yù)覽的效果，其余的文件類(lèi)型會(huì)直接粗暴的調(diào)用 window.open 的方式打開(kāi)，如果瀏覽器能夠解析則預(yù)覽，不能解析瀏覽器會(huì)默認(rèn)下載。(這里有個(gè)問(wèn)題，ios 的手機(jī)對(duì)于不能識(shí)別的文件會(huì)顯示亂碼)

嵌入小程序并配置了附件存儲(chǔ)的業(yè)務(wù)域名之后發(fā)現(xiàn)使用 android 手機(jī)調(diào)用 window.open 會(huì)出現(xiàn)白屏，ios 手機(jī)則沒(méi)有問(wèn)題。

嘗試使用 iframe 標(biāo)簽達(dá)到類(lèi)似的效果，但是在小程序中也是沒(méi)有效果的。

解決的方法

后面同事給了個(gè)思路，對(duì)于需要 window.open 打開(kāi)的文件，直接跳轉(zhuǎn)到一個(gè)特定的小程序原生頁(yè)面，借助小程序的 api 預(yù)覽文件。如果小程序環(huán)境也無(wú)法預(yù)覽的文件，則使用小程序的 api 下載文件。

h5 頁(yè)面的處理

    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)}
            `,
        })
    }

這里有幾個(gè)點(diǎn)需要注意一下

1. 因?yàn)轫?xiàng)目是通過(guò) Taro 編譯出的，所以需要 process.env.TARO_ENV 判斷代碼類(lèi)型;

2.調(diào)用 wx sdk 的 wx.miniProgram.navigateTo api 可以直接調(diào)用。不需要在微信公眾平臺(tái)綁定域名權(quán)限驗(yàn)證等;

3. 跳轉(zhuǎn)路徑一定要寫(xiě)完整 （因?yàn)樯倭艘粋€(gè) / 一直無(wú)法跳轉(zhuǎn)，一度懷疑這個(gè)思路行不通）;

4.文件路徑一定要使用 encodeURIComponent 方法轉(zhuǎn)義。如果 filePath 路徑中包含一些參數(shù)，不轉(zhuǎn)義的情況下路由跳轉(zhuǎn)的過(guò)程中會(huì)丟失;

5.tokenId 用于權(quán)限鑒別（根據(jù)實(shí)際情況傳遞）;

小程序原生頁(yè)面的處理

    const { filePath, fileExt, tokenId, fileName } = this.queryParams
    const supports = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']

    // 支持預(yù)覽
    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 {
        // 該文件類(lèi)型不支持預(yù)覽，下載
        const filePath = wx.env.USER_DATA_PATH + `/${fileName}`
        const saveResponse = await toPromise(wx.getFileSystemManager().saveFile, {
            filePath,
            tempFilePath,
        })
    }

這里有幾個(gè)點(diǎn)需要注意一下

• 對(duì)于有權(quán)限鑒定的文件一般是通過(guò) cookie 實(shí)現(xiàn)的，小程序中需要手動(dòng)設(shè)置 wx.downloadFile 的 header 設(shè)置 cookie

• 小程序中 api 的回調(diào)方式很容易造成回調(diào)地獄，可以包裝一下 promise

• 將文件保存在本地這個(gè)功能 wx.getFileSystemManager().saveFile 非常的不人性化。下載后很難找到下載的文件的具體地址。暫時(shí)沒(méi)有找到好的解決方案。