小程序和h5页面之间的互相跳转

桃扇骨 2022-05-11 17:30 263阅读 0赞

小程序跳转到 h5 页面  
小程序代码：

wx.navigateTo({url: '/pages/webview?url=' + encodeURIComponent('h5页面的 url')});

1、webview.js

<web-view src="{
       {url}}" bindmessage="handlePostMessage"></web-view>
    
    Page({
      data: {
        url: ''
      },
      onLoad: function (options) {
        this.setData({
          url: decodeURIComponent(options.url),
        });
      },
      // 接收 h5 页面传递过来的参数
      handlePostMessage: function (e) {
        const data = e.detail;
        console.log(data);
      }
    })

2、h5 页面代码：

<head>
        ···
      <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    </head>

记得把 url 的 host 添加到后台的合法域名中。

h5 页面跳回小程序  
在 h5 页面的任何点击事件中：

/* eslint-disable */
     wx.miniProgram.getEnv(function (res) {
       if (res.miniprogram) {
         wx.miniProgram.switchTab({url: '/pages/home/home'});
         wx.miniProgram.postMessage({data: {id: '1234'}}); // 传的参数
       }
     });
     /* eslint-enable */

请注意，是wx.miniProgram，不是 window.wx.miniProgram

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5网页跳转小程序

现在小程序越来越普遍了，从H5网页（要在微信浏览器下打开的）跳转到相应小程序的场景也越来越多。至此微信提供了相应的[微信开放标签][Link 1]让网页开发者可安全便捷地使用微

超、凢脫俗/ 2023年10月14日 04:50/ 0 赞/ 63 阅读

相关微信小程序之间的互相跳转

从这个小程序跳进另一个小程序每个小程序可跳转的其他小程序数量限制为<= 10个步骤：一、配置在app.json文件中新增配置项目navigateToMiniPr

快来打我*/ 2023年06月23日 03:57/ 0 赞/ 14 阅读

相关微信小程序_如何实现小程序之间互相跳转

首先我们要在 app.json 中配置以下代码 "navigateToMiniProgramAppIdList": [ "目标小程序的appid"

逃离我推掉我的手/ 2023年03月13日 11:58/ 0 赞/ 1 阅读

相关 H5跳转小程序，uniapp跳转小程序

网页跳转小程序需要使用微信的开放标签 [wx-open-launch-weapp][] ，使用开放标签需要使用微信的jssdk，然后sdk的版本不能低，低版本点击无效。先给

以你之姓@/ 2023年01月17日 07:48/ 0 赞/ 279 阅读

相关小程序页面之间跳转的时候传递参数

A页面跳转 wx.navigateTo({ url: '../popularId/popularId?title=我是传递的参数' }) B页面

Love The Way You Lie/ 2023年01月10日 13:18/ 0 赞/ 154 阅读

相关小程序之间实现跳转

小程序之间相互跳转是需要在需要跳转的js使用wx.navigateToMiniProgram就可以了 const certToken=12321t4215;

「爱情、让人受尽委屈。」/ 2022年12月27日 14:18/ 0 赞/ 221 阅读

相关小程序和h5页面之间的互相跳转

小程序跳转到 h5 页面小程序代码： wx.navigateTo({url: '/pages/webview?url=' + encodeURIComponen

桃扇骨/ 2022年05月11日 17:30/ 0 赞/ 264 阅读

相关支付宝小程序跳转到h5页面web-view

支付宝小程序跳转到h5页面web-view 基础库 1.6.0 开始支持，低版本需做兼容组件是一个可以用来承载H5网页的组件，会自动铺满整个小程序页面。 web-

骑猪看日落/ 2022年04月02日 05:27/ 0 赞/ 1151 阅读

相关从h5页面跳转回小程序页面失败

场景：在小程序里嵌套h5页面，然后从h5跳转回小程序，jwexin-1.3.2.js 也引入了，然后打印 wx 也可以打印出来，但是页面就是不跳转！方法： na

朱雀/ 2022年03月09日 18:26/ 0 赞/ 648 阅读

相关 h5网页跳转到小程序

第一：网页引用 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

清疚/ 2022年01月23日 04:25/ 0 赞/ 359 阅读