前言

由于項目體(tǐ)積過大(dà)，以至于分(fēn)包後也(yě)逐步$ε超過了(le)小(xiǎo)程序的(de)限制(zhì)，所$Ω✘以将 h5 端的(de)頁面以 web-view 的(de)方式嵌入了(le)小(xiǎ¶$o)程序。這(zhè)也(yě)産生(shēng)了(le)一(yī)些(±'₹xiē)意料之外(wài)的(de)問(wèn)題，這(z ÷÷hè)裡(lǐ)記一(yī)個(gè)關于文(wén)件(jià₽↑λ n)預覽下(xià)載的(de)問(wèn)題。

在 h5 端中，針對(duì)圖片和(hé)視(shì)頻(pín)會(huì)使用(yε×βòng) img、video 标簽達到(dào)預覽的(de)效果，其<σ♣餘的(de)文(wén)件(jiàn)類型會(huì)直接粗暴的(de★α​')調用(yòng) window.open 的(de)方式打開(kāi)，如(rú)果浏覽器(qì)能(néng)夠解析則預覽，不•€♠(bù)能(néng)解析浏覽器(qì)會(huì)默認下(xi♠λ>✔à)載。(這(zhè)裡(lǐ)有(yǒu)個(gè)問(wèn)題，ios 的(de)≥↔✘♥手機(jī)對(duì)于不(bù)能(néng)識别的(de)文(wén)件(jiàn)會(✔ε©huì)顯示亂碼)

嵌入小(xiǎo)程序并配置了(le)附件(jiàn) •£存儲的(de)業(yè)務域名之後發現(xiàn)使用(yòng) andro&σ®>id 手機(jī)調用(yòng) window.open 會(huì)出現(xiàn)白(bái)屏，ios 手機(jī)則沒有(yǒu)問(wèn₩≈≤)題。 

嘗試使用(yòng) iframe 标簽達到(dào)類似的(de)效果，但(d¶>'àn)是(shì)在小(xiǎo)程序中也(yě)是(shì)沒有(yǒu)效果的(de)。<γ

解決的(de)方法

後面同事(shì)給了(le)個(gè)思路(lù)，對(duì)于需要(yào) window.open 打開(kāi)的(de)文(wén)件(jiàn)，直接跳(tiào)轉到(dào)一(yī≤™λ)個(gè)特定的(de)小(xiǎo)程序原生(shēng)頁面，借助小(xiǎo)程∑₩序的(de) api 預覽文(wén)件(jiàn)>↕。如(rú)果小(xiǎo)程序環境也(yě)無法預覽的(de)文(wén)件(jiàn)，π"≥則使用(yòng)小(xiǎo)程序的(de) api 下(xià)載文(¥♥≠​wén)件(jiàn)。

1. h5 頁面的(de)處理(lǐ)

    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?
            fi≈®£leExt=${fileExt}
            &tokenId=${tokenId}
            &fileName=${fileName}
            &filePath=${encodeURIComponent(filePath)}
            `,
        })
    }
複制(zhì)代碼

這(zhè)裡(lǐ)有(yǒu)幾個(gè)點需要(yào)注意一(yī)下(x₽✔&₩ià)

• 因為(wèi)項目是(shì)通(tōng)過 Ta®÷£ro 編譯出的(de)，所以需要(yào) process.env.TARO_ENV 判斷代碼≠₩∏✘類型
• 調用(yòng) wx sdk 的(de) wx.miniProgram.navigate✔♥To api 可(kě)以直接調用(yòng)。不(bù)需要(yào)在微(wēi)φπ€信公衆平台綁定域名權限驗證等。
• 跳(tiào)轉路(lù)徑一(yī)定要(yào)寫完整 （因為(©÷wèi)少(shǎo)了(le)一(yī)個(gè) / 一(yī)直↑≥無法跳(tiào)轉，一(yī)度懷疑這(zhè)個(gè)思路(lù)行(® ¥xíng)不(bù)通(tōng)）
• 文(wén)件(jiàn)路(lù)徑一(yī)定要(yào)←$&$使用(yòng) encodeURIComponent 方法轉義。如(rú)果 filePath 路(lù)徑中包含一(±™εyī)些(xiē)參數(shù)，不(bù)轉義的(de)情況下(xià)路(lù)由跳€¶∏∑(tiào)轉的(de)過程中會(huì)丢失
• tokenId 用(yòng)于權限鑒别（根據實際情況傳遞）

2. 小(xiǎo)程序原生(shēng)頁面的(de)處理(lǐ)

    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 {
        // 該文(wén)件(jiàn)類型不(bù)支持預覽，下(xià)載
        const filePath = wx.env.USER_DATA_PATH + `/${fileName}`
        const saveResponse = await toPromise(wx.getFileSystemManagβ↑er().saveFile, {
            filePath✘♥,
            tempFilePath,
        })
 ♠ε   }
複制(zhì)代碼

這(zhè)裡(lǐ)有(yǒu)幾個(gè)點需要(yào)注意一(yī)下(xià)

• 對(duì)于有(yǒu)權限鑒定的(de)文(wén)件(jiàn)一(yī)般是(s"×"¥hì)通(tōng)過 cookie 實現(xiàn)的(de)，小(xiǎo)程序中需∞∞≠π要(yào)手動設置 wx.downloadFile 的(de) header 設置 cookie

• 小(xiǎo)程序中 api 的(de)回調方式很(hěn)容易造成回調地(dì)獄，可(k×↑↔ě)以包裝一(yī)下(xià) promise

• 将文(wén)件(jiàn)保存在本地(dì)這(zhè)個(gè)功能(néng) wx.getFileSystemManager().sav₹€eFile 非常的(de)不(bù)人(rén)性化(huà)。$σ &下(xià)載後很(hěn)難找到(dào)下(xià)₹☆載的(de)文(wén)件(jiàn)的(de)具體(tǐ)地(dì)"±₩¶址。暫時(shí)沒有(yǒu)找到(dào)好(hǎ‌←o)的(de)解決方案。