因?yàn)樾枨笤同F(xiàn)在需要在微信小程序上web-view訪問(wèn)一個(gè)h5頁(yè)面，由于小程序這邊的限制，想要實(shí)現(xiàn)需要通過(guò)兩邊的交互來(lái)達(dá)到效果，具體看以下操作：

一、h5頁(yè)面準(zhǔn)備工作

? ? ? 1.我這邊的h5頁(yè)面是使用vant開(kāi)發(fā)的，所以在引入小程序jssdk方式上是使用import導(dǎo)入的；代碼如下

? ? ? ? import wx from "weixin-js-sdk";//引入小程序jssdk

? ? ? ? Vue.prototype.$wx = wx;//掛載在prototype上，方便直接this.$wx可以使用

? ? ? ?最后不要忘記npm 一下依賴(lài)包

? ? ?2.在具體需要實(shí)現(xiàn)下載的頁(yè)面方法上判斷是否處于小程序環(huán)境，并進(jìn)行路由跳轉(zhuǎn)傳參；其中在路由url上拼接上我們所需要的參數(shù)

下載方法

二、微信小程序準(zhǔn)備工作

? ? 1.pages目錄下新建一個(gè)用于下載文件的文件夾，例如file-download文件夾新建相關(guān)頁(yè)面文件，配置好app.json中的路由導(dǎo)航地址；

? ? 2.在ile-download文件下操作file-download.js,我這邊偷懶直接在onLoad方法上實(shí)現(xiàn)，話(huà)不多說(shuō)上代碼

獲h5頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)

具體下載方法

wx.downloadFile這個(gè)api中，url是要請(qǐng)求文件資源的請(qǐng)求地址，filePath是自定義存儲(chǔ)的文件路徑，這個(gè)配置很重要，只有設(shè)置了filePath才能實(shí)現(xiàn)小程序中的文件預(yù)覽和下載，fileName是我們從h5頁(yè)面那邊那過(guò)來(lái)的文件名，跟wx.env.USER_DATA_PATH拼接一下就組成了一個(gè)自定義的下載地址，下載成功在success回調(diào)中獲取filePath（其實(shí)是我們自定義的地址），然后調(diào)用wx.openDocument打開(kāi)我們要預(yù)覽的文件，最后在預(yù)覽文件中選擇保持文件到本地；隨手調(diào)試代碼，我就不規(guī)范了，看著來(lái)吧；