小程序如何关闭内嵌的h5页面，返回到小程序上一级页面

首先关键引入小程序js库

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

调用小程序内的方法即可

 wx.miniProgram.navigateBack({})  // 这里退回到上一级页面, 也就是刚刚跳转前的页面

微信小程序 嵌入H5页面 返回到小程序页面的问题

微信小程序嵌入H5页面使用的组件是 web-view,  它很方便,  但是有一定的局限性.  那就是如果想跳转回小程序页面需要在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. 

2. 然后, 小程序wxml文件里的代码很简单:

//url要写你刚刚创建那个页面的路径
<web-view src="url"></web-view>

记录好这个页面的路径,  比如是pages/articles/articles

3. 从小程序A页面跳转到pages/articles/articles: 

 <view bindtap="forMoreInfoTap">
    点击跳转到H5页面
 </view>
 
 
 
//JavaScript
 
forMoreInfoTap: function () {
    wx.navigateTo({
      url: '../articles/articles',
    })
  }

 

posted @ 2022-10-17 14:40  可爱的小猫咪  阅读(2902)  评论(0)    收藏  举报