个人随笔
目录
小程序和H5之间互相跳转实现方法
2023-05-16 14:34:22

我们开发微信小程序过程中,会遇到如下几种情况:小程序内打开H5、小程序内H5返回小程序、H5跳转到小程序、小程序打开小程序、小程序内H5跳小程序,那具体怎么操作实现呢,下面就总结下我认为可行的方案。

1、小程序内打开H5

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

  1. <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返回小程序

这个也很简单直接

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

返回指定页面即可

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

3、H5跳转到小程序

使用wx-open-launch-weapp标签

  1. <wx-open-launch-weapp
  2. id="launch-btn"
  3. appid="wx12345678"
  4. path="pages/home/index?user=123&action=abc"
  5. >
  6. <script type="text/wxtag-template">
  7. <style>.btn { padding: 12px }</style>
  8. <button class="btn">打开小程序</button>
  9. </script>
  10. </wx-open-launch-weapp>
  11. <script>
  12. var btn = document.getElementById('launch-btn');
  13. btn.addEventListener('launch', function (e) {
  14. console.log('success');
  15. });
  16. btn.addEventListener('error', function (e) {
  17. console.log('fail', e.detail);
  18. });
  19. </script>

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

4、小程序打开小程序

  1. wx.navigateToMiniProgram({
  2. appId: appId, //必传值
  3. path: path,//别的小程序路径,空为跳到主页
  4. success(res) {
  5. // 打开成功
  6. },
  7. fail(res) {
  8. //打开失败
  9. }
  10. })

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

5、小程序内H5跳小程序

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

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

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

然后是小程序页面修改

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

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

文档参考:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.htmlhttps://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html

 4993

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2