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

浏览：78264 次 | 倒序看帖楼主 1 楼

一、web-view组件的使用

web-view组件可以使用src属性来指定要在小程序中显示的页面地址，这个地址必须满足下列两个条件：

1、必须是https域名地址。

2、必须是在微信公众平台中配置为白名单的域名。

微信小程序页面的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的代码如下所示。

[script][/script]

2、为需要跳转至小程序页面的元素绑定事件

可以通过jQuery或原生js找到需要跳转至小程序页面的元素，然后为该元素绑定click事件或touchend事件，在事件中可以使用下列API进行小程序页面的条转：

wx.miniProgram.navigateTo() //保留当前页面，跳转到应用内的某个页面

wx.miniProgram.navigateBack() //返回到原页面

wx.miniProgram.redirectTo() //关闭当前页面，跳转到应用内的某个页面

wx.miniProgram.switchTab() //跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。

wx.miniProgram.reLaunch() //关闭所有页面，打开到应用内的某个页面

上述API的使用与微信小程序中页面跳转的API使用规范是一样的，以wx.miniProgram.navigateTo()为例，该方法的API格式如下所示：

wx.miniProgram.navigateTo({

url:'/pages/index/***', //指定跳转至小程序页面的路径

success: function(){

console.log('success'); //页面跳转成功的回调函数

}

});

总结

本文重点在于对web-view页面返回小程序页面进行了讲解和总结。在小程序开发过程中，web-view页面的实现还有许多开发技巧和功能，主要得力于JSSDK的使用。

JSSDK的说明文档如下所示：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

查看移动版

← 扫码查看移动版【转发给朋友】或【分享到朋友圈】

1、查看方法：使用手机微信扫描二维码，打开本页移动端页面。
2、分享方法：在打开的本页移动端页面，点击右上角的“...”，选择【转发给朋友】或【分享到朋友圈】即可。

关注公众号

|< < >

我来回复：

您需要登录后才可以回帖登录 | 注册