微信小程序之内嵌网页(webview)

2023-11-17

微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。在这之前,我们在小程序中没有办法整合我们已有的HTML程序(比如HTML5文章系统,商城系统等),只能使用小程序的方式重新开发一套,现在有了<web-view>就可以方便的集成这些网页系统,为我们减少了可观的工作量。

下面我们来看一下具体如何使用。

设置权限

要在小程序中访问外部网页,需要先设置允许访问的业务网站的域名。让我们先登录小程序平台管理后台页面,进入“设置” => "开发设置",可以看到这边多出来了一块“业务域名”的设置区域:

点击“开始配置”按钮,弹出一个窗口,我们可以在这个窗口中添加一个或多个你要在小程序中访问的域名。当然,不是所有的域名下的网页你的小程序都可以访问,只有那些你可以“掌控”的网站,你才可以访问!你需要在这个窗口里下载“校验文件”,并把这个校验文件上传到你的网站的根目录,供小程序平台进行验证,验证通过了才能成功添加域名。

使用web-view组件显示HTML页面

<web-view>组件的使用就比较简单了,类似HTML里面的<iframe>标签:

<web-view src="https://www.xxxxxxxxx.com/index.html" />

就这样,HTML页面就可以在小程序中显示了。

但是,和<iframe>可以嵌入到页面的任意部分不同的是,小程序的这个<web-view>总是自动铺满整个页面,且每个页面只能有一个<web-view>,它会覆盖其他组件。也就是说,没有办法实现小程序界面组件和<web-view>页面混排的情况,这点要注意。

在内嵌的HTML页面中跳转回小程序

如果要在已经通过<web-view>嵌入小程序的网页中,跳转到小程序中的其他页面(Page),可以引入微信的一个JSSDK,使用它提供的方法来实现相关跳转功能。网页代码类似如下所示:

<!-- html代码中引入JS SDK -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

<script>
// 跳转到小程序的一个页面
wx.miniProgram.navigateTo({url: '/path/to/page'})
</script>

(不过很遗憾,还是没有办法从一个网页中跳转到一个指定的小程序。哈哈,我也就瞎想想~~)

总结

这一内嵌网页的功能,也算顺应了广大开发者的要求,解决了很大一部分开发者的痛点。在混合开发方面的增强,为小程序的功能开发提供了不少灵活性和便利性。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序之内嵌网页(webview) 的相关文章

随机推荐

  • VS2022安装qt插件

    1 安装Qt软件 Qt下载网址 5 14之后的需要手动编译 官方不提供exe文件 2 配置环境变量 3 安装插件 vs2022 qt vsaddin插件已经更新 可以下载安装 链接 https download qt io developm
  • 【正点原子STM32连载】第十七章 通用定时器中断实验 摘自【正点原子】APM32F407最小系统板使用指南

    1 实验平台 正点原子stm32f103战舰开发板V4 2 平台购买地址 https detail tmall com item htm id 609294757420 3 全套实验源码 手册 视频下载地址 http www openedv
  • python爬虫学习笔记-jQuery

    jQuery介绍 jQuery是什么 jQuery是一个快速 简洁的JavaScript框架 jQuery设计的宗旨是 write Less Do More 即倡导写更少的代码 做更多的事情 它封装JavaScript常用的功能代码 提供一
  • C# 集合

    数组是一种指定长度和数据类型的对象 在实际应用中有局限性 集合正是为这种局限性而生的 集合的长度能根据需要更改 也允许存放任何数据类型的值 集合简介 集合和数组比较类似 都用于存放一组值 但集合中提供了特定的方法直接操作集合中的数据 并提供
  • Java接口详解

    接口 接口的概念 在现实生活中 接口的例子比比皆是 比如 笔记本上的USB口 电源插座等 电脑的USB口上 可以插 U盘 鼠标 键盘等所有符合USB协议的设备 电源插座插孔上 可以插 电脑 电视机 电饭煲等所有符合规范的设备 通过上述例子可
  • OneNote复制为默认字体大小(只复制文字,不复制原有字体格式)

    当我们从word中复制一段文字到onenote中 onenote会自动带上原有字体的格式 非常不方便 下面是只复制文字的方法 1 随便按 ctrl c 复制一段文字 2 到onenote里按下 ctrl v 粘贴 选择右下角的框 3 在弹出
  • 使用XMind解决问题?只需4个简单步骤!

    我们每天都在解决问题并做出决定 从我应该穿什么到学校的小问题到如何找工作或上大学等等的问题 我们面临的问题可能或大或小 或简单或复杂 无论它是什么 我们都必须解决它 解决问题和决策是商业和生活的重要技能 我们生活中非常重要的一部分是找到解决
  • UE4_积分相同排名显示问题

    找了一下ue4 rank 函数相关 没找到合适的 自己简单写了个 解决积分相同时名次要一样 之后顺位排序 中国式排名 蓝图实现 c 原理一样 1 2 3 4 5
  • 编译 QT4.6.3 出现 derefIfNotNull 未定义 解决

    使用高版本的编译工具编译QT4 6 3 出现错误 derefIfNotNull 未定义 找到 RefPtr h文件 在WFT 的 public 里面增加 两个函数的定义 void derefIfNotNull T ptr if LIKELY
  • CS从头配置电脑清单(软件篇)

    CS从头配置电脑清单 软件篇 假设你电脑丢了 重新搞了一台 怎么从头配置 迅速可以进行高效产出 假设你是Linux ubuntu系统 安装zoom 安装slack 进行其他设备的信息发送 自己给自己发 项目交流 安装截图软件 推荐flame
  • 【Java】QueryWrapper方法解释

    继承自 AbstractWrapper 自身的内部属性 entity 也用于生成 where 条件 及 LambdaQueryWrapper 可以通过 new QueryWrapper lambda 方法获取 queryWrapper lt
  • 加解密

    目录 一 加密基础知识 1 加密函数 密钥 反函数 2 加密 解密 3 对称加密 4 非对称加密 公钥私钥 二 非对称加密 1 大素数分解问题类 1 RSA 2 Rabin 3 Pollard s rho 素数分解算法 2 离散对数问题类
  • 论文笔记-深度估计(5)Unsupervised Monocular Depth Estimation with Left-Right Consistency

    ECCV2016 Unsupervised Monocular Depth Estimation with Left Right Consistency 本文采用无监督学习 没有ground truth 的方法来估计深度 基本思路是匹配好左
  • Graph Neural Network-Based Anomaly Detection in Multivariate Time Series 代码配置及解析

    可以在GPU上跑通的代码 含数据集 我已经放到了以下链接 链接 https pan baidu com s 1gM4KTbRNHzfbGEGgvEjXAw 提取码 e7wu 在服务器上跑 先创建一个虚拟环境 conda create n G
  • 算法——B树,B-树,B+树,B*树全面解析笔记

    算法 B树 B 树 B 树 B 树全面解析笔记 https www cnblogs com lianzhilei p 11250589 html http blog codinglabs org articles theory of mys
  • 【QT】混合UI设计

    虽然利用Designer和代码的设计方式都可以开发GUI 但是毫无疑问的是最有效的开发方式是利用两者进行混合开发 下面这个实验例子来自 QT5 9 C 开发指南 我做了小部分修改 最终效果是这样 图标导入 这次我们要开发的是一个有工具栏 菜
  • 哈希表——哈希表的概念,哈希表的实现(闭散列,开散列)详细解析

    作者 努力学习的少年 个人简介 双非大二 一个正在自学c 和linux操作系统 写博客是总结知识 方便复习 目标 进大厂 如果你觉得文章可以的话 麻烦你给我点个赞和关注 感谢你的关注 种一颗树最好是10年前 其次是现在 目录 哈希概念 哈希
  • 实战怎么用u盘重装系统

    当电脑系统出现故障问题无法进系统的情况下 我们可以通过制作u盘启动盘进pe系统进行修复或者重装系统解决 不过很多网友不知道怎么用u盘重装系统 今天小编就给大家分享一个简单易操作的u盘重装系统教程 具体的步骤如下 1 先在一台可用的电脑上下载
  • nodejs服务后台持续运行三种方法

    网上看到的 用了第二种方式OK的 自己备份保存下 一 利用 forever forever是一个nodejs守护进程 完全由命令行操控 forever会监控nodejs服务 并在服务挂掉后进行重启 1 安装 forever npm inst
  • 微信小程序之内嵌网页(webview)

    微信小程序提供了新的开放能力 它终于开放了在小程序中内嵌HTML页面的功能 从微信小程序基础库1 6 4开始 我们就可以在小程序内放置一个