微信小程序使用webview打开pdf文档以及显示网页内容的方法步骤

目录
  • 一、微信小程序根据接口返回的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文档内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序webview 脚手架使用详解

    项目地址 https://github.com/fangkyi03/wechat-webview-template 项目介绍 1.wechat 使用taro创建的初始化项目 2.react-ssr-h5 使用nextjs创建的项目 已经做好完整的兼容处理 使用vw vh为单位 简单介绍 因小程序对于webview通信做出的限制 从webview发起的postMessage并不会实时的被小程序端接受到 详情可见 :https://developers.weixin.qq.com/miniprogr

  • 微信小程序使用webview打开pdf文档以及显示网页内容的方法步骤

    微信小程序使用webview打开pdf文档以及显示网页内容的方法步骤

    目录 一.微信小程序根据接口返回的pdf链接,在小程序内部浏览pdf内容 二.根据网页链接,把网页内容在微信小程序内部显示 总结 一.微信小程序根据接口返回的pdf链接,在小程序内部浏览pdf内容 需要用到微信小程序的两个api 下载资源到本地 wx.downloadFile    wx.openDocument 前一个api下载资源到本地,后一个api打开pdf文档 wx.downloadFile({ //将文档下载到本地 url: fileUrl,//pdf链接 success(res) {

  • 微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法.分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程.流程是这样的: 商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面. 但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错. 翻看微信小程序开发文档,参考

  • 小程序中读取腾讯文档的表格数据的实现

    小程序中读取腾讯文档的表格数据的实现

    目录 1 创建连接器 2 创建腾讯文档 3 应用中访问腾讯文档 3.1 获取sheet中的所有数据 3.2 迭代行和列的数据 4 总结 日常生活中我们使用腾讯文档在线的收集各类数据,数据收集是比较方便,但是如果希望对数据进行维护或者后续统计分析还是不方便的.本篇就介绍一下如何利用微搭低代码工具来接入腾讯文档的数据,实现数据的在线管理功能. 1 创建连接器 如果希望接入腾讯文档的功能,需要创建连接器.打开微搭控制台,点击新建连接器 选择腾讯文档 然后进行授权 输入连接器的名称和标识,点击开始新建

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g

  • 微信小程序实现image组件图片自适应宽度比例显示的方法

    微信小程序实现image组件图片自适应宽度比例显示的方法

    本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法.分享给大家供大家参考,具体如下: 一. 了解image组件 由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了.下面就来一起解决下 二. 方法 (一).使用mode:widthFix widthFix:宽度不变,高度自动变化,保持原图宽高比不变. 首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx. 这样图片也可以自适应了..因为小程序的r

  • 微信小程序实现Session功能及无法获取session问题的解决方法

    因为小程序原生不支持Cookie,因此也不支持Session. 网上找到的的一些方法有缺陷,而且很多累赘,估计没有实际测试过,在此直接给出实测可用的代码. 大概思路就是借助小程序本地储存+网络请求的header可读可写来实现类似浏览器的cookies保存session功能. 直接上代码 function NetRequest({url, data, success, fail, complete, method = "POST", header = { 'Content-type':

  • 微信小程序页面传多个参数跳转页面的实现方法

    这里举例跳转两个参数 传递多少个也可以 这里传参数 我写作 data-item data-id 来绑定 同事加了点击事件bindtap 在index.js 在 data 里我写的是假数据 在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在console打印 console.log(e) 这样我们就拿到了 传递的数据 然后进行定义等 这里跳转详情页的函数 wx.navigateTo 这是一种跳转的方法 tabBar页面要用wx.switchTab 路径后面加上 jsonStr 等 在跳转的

  • 微信小程序中的canvas 文字断行和省略号显示功能的处理方法

    文字的多行处理在dom元素中很好办.但是canvas中没有提供方法,只有通过截取指定字符串来达到目的. 那么下面就介绍我自己处理的办法: wxml: <canvas canvas-id='word' id='test'></canvas> canvas肯定要一个画板容器啦,记得设置宽高哦,小程序中默认宽高是300px和150px js:在page中 //处理文字多出省略号显示 dealWords: function (options) { options.ctx.setFontSi

  • 微信小程序图片加载失败时替换为默认图片的方法

    微信小程序图片加载失败时替换为默认图片的方法

    先看一下效果图: 1.第一种情况:单独加载一个图片 index.wxml代码: <image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image> index.js代码: errorFunction: function(){ this.setData({ avatar: '/image/default.png' }) } 2.

  • 微信小程序下拉加载和上拉刷新两种实现方法详解

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onReachBottom方法 下拉加载说明: 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新. onPullDownRefresh(){ console.log('--------下拉刷新-------') wx.showNavigationBarLoadin

随机推荐