微信小程序嵌入H5页面跳转回小程序页面(针对navigationStyle: custom自定义导航栏的情况)

最新推荐文章于 2024-09-14 13:39:52 发布

MercuryUsaki

最新推荐文章于 2024-09-14 13:39:52 发布

阅读量9.4k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/Mercwang/article/details/82746003

版权

本文介绍了在微信小程序中使用web-view组件嵌入H5页面时，如何在自定义导航栏(navigationStyle: custom)情况下，从H5页面通过点击事件跳转回小程序页面。关键步骤包括在H5页面引入微信小程序的js库，并使用wx.miniProgram.navigateBack() API，以及在小程序wxml文件中设置页面路径。

摘要由CSDN通过智能技术生成

微信小程序嵌入H5页面使用的组件是 web-view, 它很方便, 但是有一定的局限性. 当设置"navigationStyle: custom自定义导航栏"时, 如果想跳转回小程序页面需要在H5页面加一个点击事件来处理, 也就是说嵌入的页面是你自己写的. 如果是嵌入别人的页面, 比如公众号页面, 就无法再页面添加点击事件了.

代码如下:

1. 首先, 写一个H5页面:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>
<h5 onclick="openSdaXcx()">返回到小程序页面</h5>
<script>
  function openSdaXcx() {
    // 这里退回到上一级页面, 也就是刚刚跳转前的页面
    wx.miniProgram.navigateBack({})
  }
</script>
</body>
</html>

关键代码是需要引入小程序的js库 "https://res.wx.qq.com/open/js/jweixin-1.3.2.js", 这样点击事件里面的API "wx.miniProgram.navigateBack({})" 才能生效. 这个H5页面的路径为下一个步骤路面的url.