微信小程序webview中H5的window.location下載安卓失效問題（wx.env.USER_DATA_PATH報錯，wx.openDocument安卓轉發文件打不開）

一、背景

• 項目是使用微信小程序組件封裝的H5頁面
• 小程序環境下，安卓機無法使用打開鏈接下載
• webview不支持window.location下載文件
• 封裝的代碼不支持微信小程序的下載方法
• 所以迂迴方案在H5點擊鏈接的時候跳轉回小程序，使用小程序的方式下載打開鏈接

注意：H5使用小程序之前需要引入JSSDK

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

二、代碼展示

• wx.downloadFile的使用方式可參照

https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

• wx.saveFile的使用方式可參照

這裏是引用https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html

• wx.openDocument的使用方式可參照

這裏是引用https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

H5代碼

let arr = fileurl.split("?");
wx.miniProgram.navigateTo({
// 小程序路由參數裏面不能帶問號會被解析
url: "/pages/showFile/showFile?link=" + arr[0] + "&" + arr[1]
});

小程序代碼

//showFiles.js
Page({
    data: {
        waitWord: '請稍等正在打開文件'
    },
    onShow: function () {},
    onLoad: function (options) {
        let that = this;
        // console.log("222", options.name)
        wx.downloadFile({//微信下載文件方法
            url: options.link + '?name=' + options.name + '&path=' + options.path + '&review=' + options.review,
            dataType: "pdf",
            success(res) {
                wx.saveFile({//微信保存文件，這個存儲有點複雜
                    // 臨時存儲路徑，先有臨時存儲路徑方可使用wx官方的存儲本地路徑（ wx.env.USER_DATA_PATH ）
                    tempFilePath: res.tempFilePath,
                    //定義本地的存儲路徑及名稱
                    filePath: wx.env.USER_DATA_PATH + '/' + options.name,
                    success(res) {
                        const savedFilePath = res.savedFilePath;
                        wx.openDocument({//微信打開文件
                            filePath: savedFilePath,
                            showMenu: true,
                            success: function (res) {
                                that.setData({
                                    waitWord: '返回請點擊左上角',
                                });
                            },
                            fail: function (err) {
                                console.log(res)
                                wx.showToast({
                                    title: '文件預覽失敗,請稍後重試',
                                    icon: 'none',
                                    duration: 1500
                                })
                            }
                        });
                    }
                })
            },
            fail(err) {
                wx.showToast({
                    title: '文件下載失敗,請稍後重試',
                    icon: 'none',
                    duration: 1500
                })
                console.log(err)
            }
        })
    },

    //   },
})

三、踩坑指南

坑一：

H5跳轉 路由傳參 參數被解析
原因：路由帶的參數是字符串鏈接，鏈接裏面有?&這些字符，容易被微信解析使用
解決：將參數字符串截成幾段，再upload方法裏面取路由參數拼接

//H5代碼:
let arr = fileurl.split("?");
wx.miniProgram.navigateTo({
// 小程序路由參數裏面不能帶問號會被解析
// url: "/pages/showFile/showFile?link=" + fileurl
url: "/pages/showFile/showFile?link=" + arr[0] + "&" + arr[1]
});
 
//小程序代碼：
onLoad: function (options) {
//根據傳參鏈接特點再將參數進行拼接
url: options.link + '?name=' + options.name + '&path=' + options.path + '&review=' + options.review,
}
 

坑二：

使用wx.openDocument,安卓機的轉發，轉發文件打不開
原因：臨時文件名字太長，轉發的時候導致後綴名被忽略，故打不開文件
解決：從臨時文件名字入手，可以先使用 wx.saveFile 保存到本地（文件可自己命名），再打開文件

wx.saveFile({
//定義本地的存儲路徑及名稱
filePath: wx.env.USER_DATA_PATH + '/' + options.name,
success(res) {
const savedFilePath = res.savedFilePath;
wx.openDocument({
filePath: savedFilePath,
showMenu: true,
success: function (res) {
that.setData({
waitWord: '返回請點擊左上角',
});
},
fail: function (err) {
console.log(res)
wx.showToast({
title: '文件預覽失敗,請稍後重試',
icon: 'none',
duration: 1500
})
}
});
}
})

坑三：

使用wx.env.USER_DATA_PATH報錯（VM544:1 saveFile:fail parameter error: parameter.tempFilePath should be String instead of Undefined;）
原因：是因爲這個存儲本地找不到徑導致的
解決：先將臨時內容存儲起來再使用官方的保存方式wx.env.USER_DATA_PATH

wx.saveFile({
// 臨時存儲路徑，先有臨時存儲路徑方可使用wx官方的存儲本地路徑（ wx.env.USER_DATA_PATH ）
tempFilePath: res.tempFilePath,
//定義本地的存儲路徑及名稱
filePath: wx.env.USER_DATA_PATH + '/' + options.name,
success(res) {
const savedFilePath = res.savedFilePath;
wx.openDocument({
filePath: savedFilePath,
showMenu: true,
success: function (res) {
that.setData({
waitWord: '返回請點擊左上角',
});
},
fail: function (err) {
console.log(res)
wx.showToast({
title: '文件預覽失敗,請稍後重試',
icon: 'none',
duration: 1500
})
}
});
}
})