环境: uniapp开发微信小程序,嵌套webview,H5页面也是用的uniapp框架开发,H5页面点击商品后,需要跳转到微信小程序的详情页面
做法的原因
在微信小程序中使用web-view元素,如果要实现 H5到小程序的通信,很难,很复杂,限制很多。
如果不做跳转页面,只做通信的话,建议通过后端接口轮询,或者WebSocket,
或者跳转loading页面,通过url传递参数,loading页面进行逻辑处理
成功源码:
- H5项目
- 需要引入 weixin-js-sdk
pnpm add weixin-js-sdk
- 在需要跳转微信小程序页面的页面引入
import jwx from 'weixin-js-sdk'
- 使用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>