微信小程序和H5之间相互跳转的几种情况

小程序跳转H5

直接通过web-view内嵌的方式,有且只有这一种方式。

H5跳转小程序 分为三种情况:

H5内嵌在小程序的web-view中,想要打开小程序自身的页面,可通过 wx.miniProgram.navigateTo 方法,参考链接:web-view | 微信开放文档 (qq.com)

wx.miniProgram.navigateTo({
  url: "/pages/home/detail?id=123",
});

H5在非小程序环境中,微信浏览器或者手机自带浏览器打开时,想要跳转到小程序,可通过scheme协议的方式。类似于这种:weixin://dl/business/?t=xxxxxxxxx
scheme链接之前可以直接在小程序管理后台生成,输入小程序页面路径和参数就可以直接获取,但是微信限制现在不行了,只能通过调用API的方式去获取。
拿到链接后,直接跳转,代码如下:

location.href = "weixin://dl/business/?t=xxxxxxxxx";

H5内嵌在小程序的web-view中,但是需要跳转到其他小程序的页面,可通过 wx.miniProgram.navigateBack() 结合 wx.miniProgram.postMessage()的方式。
思路是H5先和当前小程序交互,给其一个动作,然后当前小程序再去跳转到其他小程序。

// H5页面代码
// 返回 退出web-view
wx.miniProgram.navigateBack();
// 因为只有执行了返回动作 小程序那边才能捕获到这边传递的参数
wx.miniProgram.postMessage({data:{from: '跳其他小程序'}})

// 小程序代码

getMessage(e) {
  console.log("H5传来的数据",e.detail.data);
  if(e.detail.data[0].from==='跳其他小程序'){
    wx.navigateToMiniProgram({
      appId: 'wx0a67cae1782f6688',
      path: '/pages/detail/index?id=123',
    })  
  } 
}
 
 

你可能感兴趣的:(微信小程序,前端,javascript)