文章目录

前言

微信小程序允许在整个小程序页面上显示外部H5页面，并且此功能使用Web-View组件。该组件的技术文档如下所示。

Web视图组件的本质是使用浮动框架标签对加载SRC属性指定的页面。本文总结了用于使用Web视图组件的一些预防措施。

1。使用Web视图组件

Web-View组件可以使用SRC属性来指定要在中显示的页面地址。该地址必须符合以下两个条件。

微信页面的WXML文件的代码如下。

<web-view src=“https://www….”>web-view>

在一个微信小程序中，只有一个组件用于一个页面，该组件将填充整个页面并覆盖页面中的其他组件。

同时，该组件还支持以下事件：

2。网络视图页面跳回小程序页面

通常，Web视图组件的SRC属性指定了H5页面，可以使用标签正常在页面之间旋转的超链接。但是，如果Web-View页面希望通过用手指触摸页面返回页面，则无法使用标签。那么该问题应该如何解决？

1。在H5页面上引入

首先，需要在H5页面中介绍它，该页面允许H5页面的JS文件执行微信系的某些API命令。 H5页面上引入的代码如下。

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>

2。需要重定向到小程序页面的元素的绑定事件

您可以找到需要通过本机JS跳到小程序页面的元素，然后绑定该元素的事件或事件。如果您可以使用以下API传输页面。

上述API的使用与微信小组中的页面跳跃的使用规格相同。以WX ..（）为例，此方法的API格式如下。

wx.miniProgram.navigateTo({ url:'../swt/swt', //指定跳转至小程序页面的路径 success: function(){ console.log('success'); //页面跳转成功的回调函数 } });

总结

本文的重点是解释和总结返回页面的Web视图页面。在开发迷你程序过程中，Web-View页面的实现还具有许多开发技术和功能，这主要是由于它们有用的用途。描述文档如下。

关于作者

在Web项目开发和前端培训方面拥有18年的经验。它在前端领域编写了相对系统的培训材料，并在全堆栈开发领域（例如vue.js，微信小组制作开发等）都有深远的成就。了解网络开发领域的更多同事，并大力推广Web开发。同时，我们愿意与所有人进行深入的技术讨论和业务合作。