微信小程序 web-view 访问外部链接

2023-11-18

<web-view></web-view> :承载网页的容器,会自动铺满整个小程序页面。

web-view 中导航栏的标题是取的页面 <title> 标签的内容。
web-view 中无法调起微信支付。

实现方法:

  1. 登录小程序管理后台配置业务域名,并且需要上传一个验证文件到要跳转的外链的服务器上的根目录里。

    可直接打开关联的公众号的文章(以 http://mp.weixin.qq.com/s 开头),模板链接(以 https://mp.weixin.qq.com/mp 开头)无法打开。

    在这里插入图片描述
    其他网页,包括网页内 iframe 的域名也都需要配置到域名白名单。

    在这里插入图片描述
    在这里插入图片描述

  2. 新建 outer 页面。

    // outer.wxml
    <web-view src="https://test.com/"> </web-view>
    
  3. 点击 index 页面的按钮跳转到 outer 页面,即可访问外部链接。

    // index.wxml
    <button bindtap="handleNav">跳转外链</home>
    
    // index.js
    handleNav(){
    	wx.navigateTo({
    		"url": "../outer/outer"
    	})
    }
    

调试:

在微信开发者工具上调试:

微信开发者工具打开一个 webview 页面后,点击模拟器右下角七星瓢虫模样的按钮,将会打开一个新的调试窗口,就可以查看到嵌入的 H5 页面的调试信息了。
请添加图片描述

真机调试:

可以借助微信 Web 开发者工具来调试基于微信内置浏览器的网页。

下载地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Web_Developer_Tools.html

请添加图片描述

存在的问题:

  1. 访问的外链运行在微信内置的浏览器上,会存在缓存问题,有可能导致无法访问到最新的页面。

    想要清除微信内置的浏览器的缓存,可以:

    1. 在设置中清空存储空间。
    2. 退出微信账号重新登录。

    解决方法:

    • 前端设置不缓存资源;后端也设置每次请求都不缓存,强制更新资源。
    • 可以在链接后面添加随机数,https://test.com/?timestamp=123456;或者在链接中加入版本号,每次发布都更新版本号,https://text.com/v1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序 web-view 访问外部链接 的相关文章

  • mysql之基础查询,条件查询测试题07

    1 基础查询 条件查询测试题 看图 结果 1 SELECT salary last name FROM employees WHERE commission pct IS NULL AND salary lt 18000 2 SELECT
  • STM32F407 CAN1 CAN2

    注意CAN1可以单独使用 CAN2要开启CAN1时钟才能使用 u8 CAN1 Mode Init u8 mode GPIO InitTypeDef GPIO InitStructure CAN InitTypeDef CAN InitStr

随机推荐

  • DBeaver 如何配置离线驱动

    1 打开已经下载过DBeaver驱动的软件 点击 数据库 驱动管理器 进入 2 选中 MySQL 点击右侧的 编辑 进入 3 点击页签 库 打开列表内容 选中 mysql connector java 8 0 17 jar 点击 类路径 4
  • Android用surface直接显示yuv数据(二)

    研究了一段时间Android的surface系统 一直执着地认为所有在surface或者屏幕上显示的画面 必须要转换成RGB才能显示 yuv数据也要通过颜色空间转换成RGB才能显示 可最近在研究stagefright视频显示时发现 根本找不
  • 泰克

    主要功能 硬件连接 参数配置 运行参数 数据查询 程控对象 示波器 程控接口 兼容市面上所有具有GPIB USB RS232 LAN RS485 TTL任意一种程控接口的示波器 仪器兼容性 泰克Tektronix 是德科技Keysight
  • CISC RISC ARM MIPS区别与联系

    转载 文章有点老 不过还是有所收获 补充一句 国内那么多牛人研究处理器架构 要钱有钱 要人有人 ARM都能获得如此成就 为啥国产那么多CPU团队都不成功 其它类型的芯片也一样 大多都是买国外IP 个人理解 相关专利太少 也就是积累不足 无法
  • 【MATLAB第31期】基于MATLAB的降维/全局敏感性分析/特征排序/数据处理回归问题MATLAB代码实现(持续更新)

    MATLAB第31期 基于MATLAB的降维 全局敏感性分析 特征排序 数据处理回归问题MATLAB代码实现 持续更新 本文敏感性分析主要分析回归问题 下期分析分类问题 fisher rf arf nca等 内容更新 增加视频解说 基于MA
  • npm创建openlayer(入门)

    1 搭建node js开发环境 2 创建目录 mkdir ol deme 3 安装ol包 npx create ol app 4 打开 npm start
  • flex布局和grid布局

    flex布局 父容器 parent 8个设置项 parent display flex flex direction row row reverse column column reverse 决定子元素的排列方式 flex wrap no
  • 服务器系统磁盘分区,服务器磁盘分区教程

    服务器磁盘分区教程 内容精选 换一换 对于Linux弹性云服务器 磁盘分区与磁盘设备名称完全对应 本节以Red Hat Enterprise Linux 7的图形界面为例 介绍查询Linux弹性云服务器磁盘分区与磁盘设备的方法 以root权
  • pandas导入和导出数据至MySQL数据库

    安装准备 可以不用看 同学们在进行数据分析 数据处理时经常会使用pandas来储存结构化数据 我们在数据处理中会出现各种的过程文件或最终文件 虽然pandas给我们提供了非常多的输出结口 比如csv文件 xlsx文件 但在软件开发过程中db
  • 关于httpurlconnection getcontentlength返回值为-1的问题

    在做AsyncTask异步任务读取网络数据的时候 发现了httpUrlConnection的获取数据内容长度 connection getContentLength 总是为 1 导致进度条一直为灰色状态 预期结果应如图所示 而现在的效果是这
  • 网络协议的三要素

    一个网络协议主要由语法 语义和同步三个要素组成 1 语法 语法指数据与控制信息的结构或格式 确定通信时采用的数据格式 编码及信号电平等 2 语义 语义由通信过程的说明构成 它规定了需要发出何种控制信息 完成何种控制动作以及做出何种应答 对发
  • timeout in locking authority file in /home/**/.Xauthority,

    进入终端后使用startx命令 看是否有错误提示 我的当时是 timeout in locking authority file in home Xauthority 解决办法是将 Xauthority删掉 在检查用户目录权限 确定为775
  • Mesh(802.11s)组网 — 基于OpenWRT路由器

    一 mesh网络 1 mesh网络拓补图 2 介绍 二 OpenWRT路由器Mesh网络配置 1 准备阶段 说明 本次测试用2台单WiFi路由器作为测试 wifi用于组建Mesh网络连接 因此内网已无额外WiFi可以提供使用 因此局域网用有
  • Android Studio3.5.2 设置代码提示和代码自动补全快捷键

    方法步骤如下 1 左上角点击File选项 找到Settings 2 点击Settings后 找到Editor 3 点击Editor后 找到General 点击General 找到Code Completion 从图中我们可以看到标红 选择F
  • 实时时钟DS1302原理详解和单片机编程

    一 DS1302的功能 DS1302是美国DALLAS推出的一款高性能 低功耗的日历时钟芯片 DS1302是一种串行接口的实时时钟 芯片内部具有可编程的日历时钟和31个字节的静态RAM 日历时钟可以自动进行闰年补偿 计时准确 接口简单 使用
  • mfc读取txt文件一列数据到double数组中

    CString filepath filepath C Users Administrator source repos MFCApplication8 Debug data txt std vector
  • 用jquery插件实现手风琴效果

  • 电脑性能一目了然,教你用测试软件测试整机性能

    一台笔记本电脑或者是一台DIY台式电脑 都是由处理器 显卡 硬盘等配件构成 而每个配件都有自己的性能 性能是高是低我们可以进行单项测试 对于整机性能我们也可以对其进行测试 来看看它的真实性能到底如何 CPU中文名叫中央处理器 它是一台电脑中
  • Java多线程并行处理任务的实现

    Java多线程并行处理任务的实现 在实际项目开发的过程中 遇到过需要处理一个由多个子任务组成的任务的问题 顺序处理起来会造成响应时间超长 用户体验不好的问题 我想到一个解决方案 即使用多线程并行处理子任务 思路就是使用ThreadPoolE
  • 微信小程序 web-view 访问外部链接