微信小程序使用webview打开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了
在这里插入图片描述
2022年6月6日更新
微信小程序通过webview打开e签宝(ps:e签宝是一个签订电子合同的第三方网站,有兴趣的小伙伴可以点击看看 e签宝)时,提示我 不支持打开非业务域名
在这里插入图片描述
然后我就去百度了下,发现是需要配置e签宝的业务域名的, 之前是把接口配置在了服务器域名了,所以不行,
在这里插入图片描述
配置业务域名时,需要把校验文件发给第三方,在他们接口地址的目录下添加该文件
在这里插入图片描述
本以为业务域名配置好了,地址也发过来了,微信里面是可以打开的并且电子合同信息都完全显示、签字盖章的,但是在微信小程序里面打开却只是个静态页面,很无语,截图如下
1.微信通过点击链接打开的页面:
在这里插入图片描述
2.微信小程序打开的页面
在这里插入图片描述
有点小迷,后来想了想是不是参数没传过去,然后就打印下了跳转页面时传来的值,
在这里插入图片描述
而接口返回的链接呢,是这样的,明显看到?后面的值都没传过来。。
在这里插入图片描述
所以果然是参数没传过来啊,然后就去百度了下,发现可以使用 encodeURIComponent()对地址进行编码,然后使用decodeURIComponent()对地址进行解码,代码如下
在这里插入图片描述
哈哈,有活咱就干,解决不了就摆烂,可不是好习惯哦~
在这里插入图片描述

### 实现 uni-app 中 web-view 组件的方法 在微信小程序使用 `uni-app` 的 `web-view` 组件可以加载外部网页或 HTML 文件。此组件仅限于微信小程序环境内使用,其他平台可能不具备相同的支持能力[^1]。 #### 创建并配置项目结构 为了使 `web-view` 正常工作,在页面对应的 `.vue` 文件里定义 `<template>` 部分如下: ```html <template> <view class="content"> <!-- 使用web-view标签 --> <web-view :src="url"></web-view> </view> </template> <script> export default { data() { return { url: 'https://example.com' // 替换成实际要加载的HTTPS链接地址 } }, } </script> ``` 这里设置了一个名为 `url` 的变量来保存目标网址,并将其绑定给 `web-view` 的 `src` 属性。注意 URL 必须采用 HTTPS 协议,因为出于安全考虑,微信小程序不允许加载 HTTP 页面。 #### 处理不同端之间的差异 考虑到 `uni-app` 支持多端编译的特点,对于某些特定的功能如 `web-view` 可能在不同的运行环境中表现有所区别。因此建议开发者仔细阅读官方文档关于各端特性的说明,确保应用能够在预期平台上正常运作[^2]。 #### WebView 和 H5 应用间的交互 如果希望进一步增强用户体验,还可以探索 `web-view` 加载的内容与宿主程序之间建立双向通讯机制的可能性。这通常涉及到 JavaScript Bridge 技术的应用,允许 Web 端调用微信原生接口完成更复杂任务,比如上传 PDF 文档等特殊需求场景下的处理逻辑[^3]。
评论 37
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderdwy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值