小程序和H5之间互相跳转实现方法

发布时间 2023-11-01 11:35:11作者: shuihanxiao

1、小程序内打开H5

这个只需要用标签web-view即可,类似

<web-view src="https://www.baidu.com" bindload="bindload" binderror="binderror"></web-view>

参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

2、小程序内H5返回小程序

wx.miniProgram.navigateTo({url: '/path/to/page'})

返回指定页面即可

参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

3、H5跳转到小程序

使用wx-open-launch-weapp标签

<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

参考文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

4、小程序打开小程序

wx.navigateToMiniProgram({
   appId: appId, //必传值
   path: path,//别的小程序路径,空为跳到主页
   success(res) {
     // 打开成功
   },
   fail(res) {
     //打开失败
    }
})

参考:https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html

5、小程序内H5跳小程序

还有一种比较诡异的现象,我们的H5被某一个小程序打开,又想在H5内打开别的小程序,这种我们可以结合”小程序内H5返回小程序”和”小程序打开小程序”的模式
首先是H5页面修改

1、获取配置的别的小程序参数和别的小程序路径
2、跳转到包含该h5页面的小程序某个页面,带上目标参宿和

wx.miniProgram.navigateTo({
    url: '/pages/自己小程序页面路径?appid=别的小程序参数&path=别的小程序路径'
});

然后是小程序页面修改

1、获取别的小程序appid和别的小程序路径path
2、小程序打开小程序

wx.navigateToMiniProgram({
   appId: appId, //必传值
   path: path,//别的小程序路径,空为跳到主页
   success(res) {
     // 打开成功
   },
   fail(res) {
     //打开失败
    }

文档参考:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html ,

 https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html