uniapp开发微信小程序 嵌套(uniapp开发/其他)H5，H5点击跳转微信小程序页面（通信

环境： uniapp开发微信小程序，嵌套webview，H5页面也是用的uniapp框架开发，H5页面点击商品后，需要跳转到微信小程序的详情页面

做法的原因

在微信小程序中使用web-view元素，如果要实现 H5到小程序的通信，很难，很复杂，限制很多。

如果不做跳转页面，只做通信的话，建议通过后端接口轮询，或者WebSocket,
或者跳转loading页面，通过url传递参数，loading页面进行逻辑处理

---

成功源码：

• H5项目

1. 需要引入 weixin-js-sdk

 pnpm add weixin-js-sdk

2. 在需要跳转微信小程序页面的页面引入

import jwx from 'weixin-js-sdk'

3. 使用sdk的miniProgram.navigateTo事件可以跳转到微信小程序中的某个页面

 // 点击事件， url的值跟微信小程序中跳转的值一样，路径也跟微信小程序的一样
 // 微信小程序中怎么跳转，这个也怎么跳转
 toDetails(name, item) {
      if (name === 'design') {
        jwx.miniProgram.navigateTo({
          url: `/pageHome/pages/design/index?id=${item.id}`,
        })
      } else {
        jwx.miniProgram.navigateTo({
          url: `/pageHome/pages/videos/index?id=${item.id}`,
        })
      }
    },

• 微信小程序逻辑

如果只是跳转到某个页面，微信小程序的web-view页面不需要任何操作

<web-view :src="src" :webview-styles="webviewStyles"></web-view>

---

如果有更好的方案，希望联系我，或者留言，谢谢大佬们！