首頁 > 軟體

微信小程式使用webview開啟pdf檔案以及顯示網頁內容的方法步驟

2022-07-29 22:00:20

目錄

一、微信小程式根據介面返回的pdf連結，在小程式內部瀏覽pdf內容
二、根據網頁連結，把網頁內容在微信小程式內部顯示
總結

一、微信小程式根據介面返回的pdf連結，在小程式內部瀏覽pdf內容

需要用到微信小程式的兩個api 下載資源到本地 wx.downloadFile wx.openDocument

前一個api下載資源到本地，後一個api開啟pdf檔案

wx.downloadFile({ //將檔案下載到本地
        url: fileUrl,//pdf連結
        success(res) {
          wx.openDocument({ //開啟檔案
            filePath: res.tempFilePath,//本地檔案路徑
            fileType: "pdf",//檔案型別
            showMenu: true,
            success: function (res) {
              wx.showToast({
                title: '開啟檔案成功',
              })
            },
            fail: function (res) {
              wx.showToast({
                title: '開啟檔案失敗',
              })
            },
          })
        },
      })

二、根據網頁連結，把網頁內容在微信小程式內部顯示

需要用到微信小程式的一個標籤 web-view

其實就是需要新建一個頁面，然後新建的頁面裡面只寫一個web-view標籤，src等於從上一個頁面傳過來的值就ok了

補充：

微信小程式通過webview開啟e籤寶（ps:e籤寶是一個簽訂電子合同的第三方網站，有興趣的小夥伴可以點選看看 e籤寶）時，提示我不支援開啟非業務域名，

然後我就去百度了下，發現是需要設定e籤寶的業務域名的，之前是把介面設定在了伺服器域名了，所以不行，

設定業務域名時，需要把校驗檔案發給第三方，在他們介面地址的目錄下新增該檔案，

本以為業務域名設定好了，地址也發過來了，微信裡面是可以開啟的並且電子合同資訊都完全顯示、簽字蓋章的，但是在微信小程式裡面開啟卻只是個靜態頁面，很無語，截圖如下

1.微信通過點選連結開啟的頁面：

2.微信小程式開啟的頁面

有點小迷，後來想了想是不是引數沒傳過去，然後就列印下了跳轉頁面時傳來的值，

而介面返回的連結呢，是這樣的，明顯看到?後面的值都沒傳過來。。

所以果然是引數沒傳過來啊，然後就去百度了下，發現可以使用 encodeURIComponent()對地址進行編碼，然後使用decodeURIComponent()對地址進行解碼，程式碼如下

總結

到此這篇關於微信小程式使用webview開啟pdf檔案以及顯示網頁內容的文章就介紹到這了,更多相關小程式用webview開啟pdf檔案內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

IT145.com E-mail:sddin#qq.com