博客

小程序跳转H5

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

<web-view :src="url"></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: '跳其他小程序'}})

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