前言
微信小程序容许将内部的H5页面在整个小程序页面中展现进去，该性能应用的是web-view组件。该组件的技术文档如下所示。
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
web-view组件的实质是应用浮动框架标记对 iframe来对src属性指定的页面进行加载。本文对web-view组件应用的一些注意事项进行总结。
一、web-view组件的应用
web-view组件能够应用src属性来指定要在小程序中显示的页面地址，这个地址必须满足下列两个条件。
- 必须是https域名地址。
- 必须是在微信公众平台中配置为白名单的域名。
微信小程序页面的wxml文件的代码如下所示。
<web-view src=“https://www….”></web-view>微信小程序中，一个页面只容许应用一个组件，并且该组件会铺满整个页面并笼罩页面中的其余组件。
同时该组件还反对以下事件：
- bindload：src属性指定的页面加载胜利时触发该事件。
- binderror：src属性指定的页面加载失败时触发该事件。
二、web-view页面跳转回小程序页面
个别的，web-view组件的src属性指定的H5页面之间，能够失常的采纳超级链接a标记对进行页面之间的条转。然而web-view页面要想通过手指触碰返回小程序页面，就无奈应用超级链接a标记了。那么这个问题应该如何解决呢？
1、在H5页面引入JSSDK
首先须要在H5页面中引入JSSDK，它能够让H5页面的js文件执行微信小程序的局部API命令。H5页面引入JSSDK的代码如下所示。
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>2、为须要跳转至小程序页面的元素绑定事件
能够通过jQuery或原生js找到须要跳转至小程序页面的元素，而后为该元素绑定click事件或touchend事件。在事件中能够应用下列API进行小程序页面的条转。
- wx.miniProgram.navigateTo()
- wx.miniProgram.navigateBack()
- wx.miniProgram.switchTab()
- wx.miniProgram.reLaunch()
- wx.miniProgram.redirectTo()
上述API的应用与微信小程序中页面跳转的API应用标准是一样的，以wx.miniProgram.navigateTo()为例，该办法的API格局如下所示。
wx.miniProgram.navigateTo({ url:'../swt/swt', //指定跳转至小程序页面的门路 success: function(){ console.log('success'); //页面跳转胜利的回调函数 }});总结
本文重点在于对web-view页面返回小程序页面进行了解说和总结。在小程序开发过程中，web-view页面的实现还有许多开发技巧和性能，次要得力于JSSDK的应用。JSSDK的阐明文档如下所示。
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
对于作者
小海前端，具备18年Web我的项目开发和前后台培训教训，在前端畛域著有较为零碎的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发畛域都有较为深的造诣。入住segmentfault，心愿可能更多的结识Web开发畛域的同仁，将Web开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。