微信小程序页面与web-view页面之间的跳转

前言

微信小程序允许将外部的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文件的代码如下所示。

微信小程序中,一个页面只允许使用一个组件,并且该组件会铺满整个页面并覆盖页面中的其他组件。

同时该组件还支持以下事件:

  • bindload:src属性指定的页面加载成功时触发该事件。
  • binderror:src属性指定的页面加载失败时触发该事件。

二、web-view页面跳转回小程序页面

一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转。但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了。那么这个问题应该如何解决呢?

1、在H5页面引入JSSDK

首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令。H5页面引入JSSDK的代码如下所示。

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开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。

你可能感兴趣的:(微信小程序,jssdk,小程序)