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

桃扇骨 2022-05-11 17:30 245阅读 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 条评论，245人围观）

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

相关阅读

相关 H5跳转小程序的方案及适用场景

1、通过 URL Scheme 适用场景适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景（第三方普通浏览器跳转小程序）获取方法：通过后端服务器生产

末蓝、/ 2023年09月24日 23:51/ 0 赞/ 47 阅读

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

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

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

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

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

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

相关小程序之间实现跳转

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

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

相关 H5跳转小程序仅需一行代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM

╰半橙微兮°/ 2022年08月29日 00:12/ 0 赞/ 226 阅读

相关 H5页面跳转与传值

页面之间的跳转经常使用a标签，使用mvc框架的都是通过访问controller的请求方法，返回请求页面。但本次开发，前端与后台完全分离，前端APP使用HBuide

太过爱你忘了你带给我的痛/ 2022年07月13日 15:49/ 0 赞/ 271 阅读

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

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

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

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

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

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

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

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

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

相关 h5网页跳转到小程序

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

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