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

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

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

1、webview.js



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 页面代码:


    ···
  

记得把 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

你可能感兴趣的:(微信小程序)