乐趣区

关于微信小程序:微信小程序页面与webview页面之间的跳转

jiezi

前言

微信小程序容许将内部的 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 开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。

退出移动版