如何在微信H5页面链接跳转到第三方小程序的任意页面?

在微信内的H5界面,跳转到第三方小程序的前提条件:

  1. 佣有已认证的服务号,服务号添加“JS接口安全域名”, 即访问H5界面的域名

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第1张图片

  1. 获得第三方小程序的原始ID

这个只能手动获取,微信官方没有给出api接口动态调用,获取方法见图

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第2张图片

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第3张图片

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第4张图片

  1. 获得第三方小程序的页面路径

如果页面路径获取不到,默认跳转的是第三方小程序的首页, 获取页面路径官方也提供了手动获取方法,但是也有没有暴露的API方法,这里我实现了动态获取,见下图:

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第5张图片

先收藏要获取的页面,然后再切换到消息会话界面发送刚收藏的页面,稍等几秒就会自动回复该页面的路径

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第6张图片

使用跳转小程序 wx-open-launch-weapp 标签来实现,该标签需要2个参数,username(原始id) path(页面路径),可通过上述方式获取,标签使用官方用例

目录 | 微信开放文档

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第7张图片

我的实际开发项目VUE用例:

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第8张图片

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第9张图片

如何在微信H5页面链接跳转到第三方小程序的任意页面?_第10张图片

些标签在跳转的时候,会展示一个中间界面,需要人工点击一下页面按键才继续跳转,为了提升用户体验,可以在按键点击事件里设置关闭页面或回退到上一个页面。

你可能感兴趣的:(微信小程序)